# Configuration

***

### Show 'Listing subcategories'

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)"

**Technical name**:\
`twt-listing-subcategories-show`

{% hint style="info" %}
This configuration enables the element "Listing subcategories" on all listing pages.

You can disable the element with a custom field in categories.

**Tip**: In the "ThemeWare® Pro Edition" you can use the CMS element "Listing subcategories" in specific categories instead.
{% endhint %}

***

### Show 'Listing subcategories' (CMS shop pages)

**Field type**:\
Select

**Available values**:\
• don't show\
• show\
• show (via custom field)

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)"

**Technical name**:\
`twt-listing-subcategories-show-cms-shop-pages`

{% hint style="info" %}
**Beta**: This feature may change in an upcoming update, but feel free to test it and send us your feedback.

**show**:\
This option displays the element "Listing subcategories" on all shop pages.\
You can disable the element with a custom field in categories.

**show (via custom field)**:\
With this option you can display the "Listing subcategories" element via a custom field on certain category pages.

**Tip**: In the "ThemeWare® Pro Edition" you can use the CMS element "Listing subcategories" in specific categories instead.
{% endhint %}

## Basic configuration

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Image only\
• Text only\
• Text below the image

**Example value**:\
`Text below the image`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Basic configuration"

**Technical name**:\
`twt-listing-subcategories-layout`

{% hint style="info" %}
Select the desired layout type.

**Tip**: Use the same aspect ratio for all cateogry images to get the best result.
{% endhint %}

***

### Content alignment

**Field type**:\
Select

**Available values**:\
• align left\
• align right\
• align center\
• space-between\
• space-around

**Example value**:\
`align left`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Basic configuration"

**Technical name**:\
`twt-listing-subcategories-justify-content`

{% hint style="info" %}
Select the desired horizontal alignment.

**left**\
Items are positioned at the beginning of the container.

**right**\
Items are positioned at the end of the container.

**center**\
Items are positioned at the center of the container.

**space-between**\
Items are positioned with space between them.

**space-around**\
Items are positioned with space before, between, and after them.
{% endhint %}

## Images

***

### Display mode

**Field type**:\
Select

**Available values**:\
• Cover\
• Contain

**Example value**:\
`Contain`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Images"

**Technical name**:\
`twt-listing-subcategories-display-mode`

{% hint style="info" %}
Select the desired display mode.

**cover**\
The image is sized to maintain its aspect ratio while filling the element's entire content box.

**contain**\
The image is sized to maintain its aspect ratio while fitting within the element's content box.
{% endhint %}

***

### Width (e.g. 100%)

**Field type**:\
Text field

**Example value**:\
`100%`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Images"

**Technical name**:\
`twt-listing-subcategories-image-width`

{% hint style="info" %}
Enter your desired width (e.g. 100%).
{% endhint %}

***

### Height (e.g. 140px)

**Field type**:\
Text field

**Example value**:\
`140px`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Images"

**Technical name**:\
`twt-listing-subcategories-image-height`

{% hint style="info" %}
Enter your desired height (e.g. 140px).

**Note**: This configuration refers to the display mode "Contain".
{% endhint %}

***

### Minimum height (e.g. 140px or none)

**Field type**:\
Text field

**Example value**:\
`140px`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Images"

**Technical name**:\
`twt-listing-subcategories-image-min-height`

{% hint style="info" %}
Enter the desired minimum height (e.g. 140px or none).

**Note**: This configuration refers to the display mode "Cover".
{% endhint %}

***

### Maximum height (e.g. 140px or none)

**Field type**:\
Text field

**Example value**:\
`140px`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Images"

**Technical name**:\
`twt-listing-subcategories-image-max-height`

{% hint style="info" %}
Enter the desired maximum height (e.g. 140px or none).

**Note**: This configuration refers to the display mode "Cover".
{% endhint %}

## Colour configuration

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`$sw-text-color`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"

**Technical name**:\
`twt-listing-subcategories-color`

***

### Text colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"

**Technical name**:\
`twt-listing-subcategories-color-hover`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"

**Technical name**:\
`twt-listing-subcategories-background-color`

***

### Background colour @hover

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"

**Technical name**:\
`twt-listing-subcategories-background-color-hover`

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`$sw-border-color`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"

**Technical name**:\
`twt-listing-subcategories-border-color`

***

### Border colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"

**Technical name**:\
`twt-listing-subcategories-border-color-hover`

***

### Background colour (Image)

**Field type**:\
Color picker

**Example value**:\
`#eef2f5`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"

**Technical name**:\
`twt-listing-subcategories-image-background-color`

## Typography

***

### Font family

**Field type**:\
Select

**Available values**:\
• Text\
• Headlines

**Example value**:\
`Text`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Typography"

**Technical name**:\
`twt-listing-subcategories-font-family`

***

### Font size

**Field type**:\
Number field

**Example value**:\
`16`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Typography"

**Technical name**:\
`twt-listing-subcategories-font-size`

***

### Font weight

**Field type**:\
Select

**Available values**:\
• light\
• normal\
• bold

**Example value**:\
`normal`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Typography"

**Technical name**:\
`twt-listing-subcategories-font-weight`

***

### Text formatting

**Field type**:\
Select

**Available values**:\
• none\
• uppercase\
• lowercase\
• capitalize

**Example value**:\
`none`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Typography"

**Technical name**:\
`twt-listing-subcategories-text-transform`

## Grid

***

### Phone (portrait) (<576px)

**Field type**:\
Select

**Available values**:\
• 1\
• 2

**Example value**:\
`1`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"

**Technical name**:\
`twt-listing-subcategories-column-count-xs`

{% hint style="info" %}
Number of columns in the smartphone viewport (
{% endhint %}

***

### Phone (landscape) (≥576px)

**Field type**:\
Select

**Available values**:\
• 1\
• 2\
• 3

**Example value**:\
`2`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"

**Technical name**:\
`twt-listing-subcategories-column-count-sm`

{% hint style="info" %}
Number of columns in the smartphone viewport (≥576px).

default: 2
{% endhint %}

***

### Tablet (portrait) (≥768px)

**Field type**:\
Select

**Available values**:\
• 2\
• 3\
• 4

**Example value**:\
`2`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"

**Technical name**:\
`twt-listing-subcategories-column-count-md`

{% hint style="info" %}
Number of columns in the tablet viewport (≥768px).

default: 2
{% endhint %}

***

### Tablet (landscape) (≥992px)

**Field type**:\
Select

**Available values**:\
• 2\
• 3\
• 4\
• 5\
• 6

**Example value**:\
`3`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"

**Technical name**:\
`twt-listing-subcategories-column-count-lg`

{% hint style="info" %}
Number of columns in the tablet viewport (≥992px).

default: 3
{% endhint %}

***

### Desktop (≥1200px)

**Field type**:\
Select

**Available values**:\
• 2\
• 3\
• 4\
• 5\
• 6

**Example value**:\
`4`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"

**Technical name**:\
`twt-listing-subcategories-column-count-xl`

{% hint style="info" %}
Number of columns in the desktop viewport (≥1200px).

default: 4
{% endhint %}

***

### Desktop (≥1440px)

**Field type**:\
Select

**Available values**:\
• 2\
• 3\
• 4\
• 5\
• 6

**Example value**:\
`4`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"

**Technical name**:\
`twt-listing-subcategories-column-count-xxl`

{% hint style="info" %}
Number of columns in the desktop viewport (≥1440px).

default: 4
{% endhint %}

## Pagespeed

***

### Lazy loading

**Field type**:\
Select

**Available values**:\
• Eager\
• Lazy

**Example value**:\
`Eager`

**Path to the configuration**:\
Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Pagespeed"

**Technical name**:\
`twt-listing-subcategories-lazy-loading`

{% hint style="info" %}
Select the desired loading attribute.

**eager**\
Instructs the browser to prioritise the loading of the image. This should be used for images "above the fold".

**lazy**\
Instructs the browser not to load the image until the user scrolls to it. This should be used for images "below the fold".
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.themeware.design/manual/extensions/listing-subcategories-on-listing-pages/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.