Layout type
Field type:
Select
Available values:
• Shopware default
• ThemeWare®
Example value:ThemeWare®
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)"
Technical name:twt-product-detail-configurator-layout-type
Select how variant options (e.g. sizes or colors) are displayed on the product detail page.
In the "Shopware" layout type the options behave as shipped.
In the "ThemeWare®" layout type, you can customise variants (such as text, image and colour) using the following configurations.
Colour configuration
Text colour
Field type:
Color picker
Example value:#2b3136
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-color
Border colour
Field type:
Color picker
Example value:#adb5bd
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-border-color
Background colour
Field type:
Color picker
Example value:transparent
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-bg-color
Text Colour @hover
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-color-hover
Border colour @hover
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-border-color-hover
Background colour @hover
Field type:
Color picker
Example value:transparent
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-bg-color-hover
Text Colour @active
Field type:
Color picker
Example value:#2b3136
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-color-active
Border Colour @active
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-border-color-active
Background colour @active
Field type:
Color picker
Example value:transparent
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-bg-color-active
Text Colour @disabled
Field type:
Color picker
Example value:#2b3136
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-color-disabled
Border colour @disabled
Field type:
Color picker
Example value:#adb5bd
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-border-color-disabled
Background colour @disabled
Field type:
Color picker
Example value:transparent
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-bg-color-disabled
Inactive variants
Layout type (inactive variants)
Field type:
Select
Available values:
• Shopware default (reduced opacity)
• ThemeWare® (single strikethrough)
• ThemeWare® (double strikethrough)
Example value:ThemeWare® (double strikethrough)
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Inactive variants"
Technical name:twt-product-detail-configurator-option-disabled-layout-type
Select how unavailable (inactive) variant options are visually marked on the product detail page.
In the "Shopware" layout type, the opacity of inactive variants is reduced.
In the "ThemeWare®" layout type, inactive variants (of text, image and colour) are additionally displayed with a strikethrough.
Strikethrough colour
Field type:
Color picker
Example value:#b3bfcc
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Inactive variants"
Technical name:twt-product-detail-configurator-option-disabled-strikethrough-color
Define the color of the line used to strike through inactive variants.
Note: This configuration is only applied if the "ThemeWare®" layout type is selected.
Text option
Show border
Field type:
Select
Available values:
• no
• yes
Example value:yes
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Text option"
Technical name:twt-product-detail-configurator-text-option-bordered