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
Last updated