# 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 %}