Design
Layout type
Field type:
Select
Available values:
• Shopware default
• Outline
• Outline with spacing
• Outline with fill
• Flat
• Flat with underline
• Underline
Example value:Outline with spacing
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Design"
Technical name:twt-product-detail-configurator-layout-type
Select how variant options (text, colour and image) are displayed on the product detail page.
"Shopware default" shows the options as shipped. All other layout types use the following configurations and show the option name as a tooltip.
All layout types compared
Basic configuration
Border width
Field type:
Select
Available values:
• thin
• normal
• thick
Example value:normal
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Basic configuration"
Technical name:twt-product-detail-configurator-option-border-width
Applies to the layout types "Outline", "Outline with spacing" and "Outline with fill" (border) as well as "Flat with underline" and "Underline" (bar).
Corner type
Field type:
Select
Available values:
• not rounded
• rounded corners
• round corners
Example value:rounded corners
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Basic configuration"
Technical name:twt-product-detail-configurator-option-corner-type
rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners
Colours and images are shown as a circle, text options as a pill.
Corner type using the layout type Outline with fill
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:#e9ecef
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
Applies to the layout types "Outline with fill", "Flat" and "Flat with underline".
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:#d3d9df
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
Applies to the layout types "Outline with fill", "Flat" and "Flat with underline".
Text Colour @active
Field type:
Color picker
Example value:#ffffff
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
Only applies to the layout type "Flat" (selected text option).
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:$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-bg-color-active
Only applies to the layout type "Flat" (selected text option).
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:#e9ecef
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
Applies to the layout types "Outline with fill", "Flat" and "Flat with underline".
Colour (inner line)
Field type:
Color picker
Example value:#ced4da
Path to the configuration:
Tab "Product pages" => Block "Configurator (in the buy box)" => Section "Colour configuration"
Technical name:twt-product-detail-configurator-option-inner-line-color
Fine line around colour and image options for the layout types "Flat", "Flat with underline" and "Underline", so that light colours and cut-out images remain recognisable.
Inactive variants
Layout type (inactive variants)
Field type:
Select
Available values:
• Shopware default (reduced opacity)
• single strikethrough
• double strikethrough
Example value: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 marked on the product detail page.
"Shopware default (reduced opacity)" only reduces the opacity. With "single strikethrough" and "double strikethrough" text, colour and image options are additionally struck through.
Note: Does not apply to the layout type "Shopware default".
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: Only applies to "single strikethrough" and "double strikethrough".