Configuration

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