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

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.

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

Select the desired layout type.

Tip: Use the same aspect ratio for all cateogry images to get the best result.

---

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

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.

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

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.

---

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

Enter your desired width (e.g. 100%).

---

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

Enter your desired height (e.g. 140px).

Note: This configuration refers to the display mode "Contain".

---

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

Enter the desired minimum height (e.g. 140px or none).

Note: This configuration refers to the display mode "Cover".

---

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

Enter the desired maximum height (e.g. 140px or none).

Note: This configuration refers to the display mode "Cover".

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

Number of columns in the smartphone viewport (

---

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

Number of columns in the smartphone viewport (≥576px).

default: 2

---

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

Number of columns in the tablet viewport (≥768px).

default: 2

---

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

Number of columns in the tablet viewport (≥992px).

default: 3

---

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

Number of columns in the desktop viewport (≥1200px).

default: 4

---

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

Number of columns in the desktop viewport (≥1440px).

default: 4