Here you can configure the "Listing subcategories" theme extension.
Note: These configurations also apply to the CMS extension "Listing subcategories" of the Pro Edition. However, you can also overwrite the theme configuration in the corresponding CMS element.
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
Select the desired layout type.
Tip: Use the same aspect ratio for all cateogry images to get the best result.
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.
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.
Enter your desired width (e.g. 100%).
Enter your desired height (e.g. 140px).
Note: This configuration refers to the display mode "Contain".
Enter the desired minimum height (e.g. 140px or none).
Note: This configuration refers to the display mode "Cover".
Enter the desired maximum height (e.g. 140px or none).
Note: This configuration refers to the display mode "Cover".
Number of columns in the smartphone viewport (
Number of columns in the smartphone viewport (≥576px).
default: 2
Number of columns in the tablet viewport (≥768px).
default: 2
Number of columns in the tablet viewport (≥992px).
default: 3
Number of columns in the desktop viewport (≥1200px).
default: 4
Number of columns in the desktop viewport (≥1440px).
default: 4
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".