> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/manual/product-pages/configurator-in-the-buy-box/configuration.md).

# 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`

{% hint style="info" %}
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.
{% endhint %}

## 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`

{% hint style="info" %}
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.
{% endhint %}

***

### 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`

{% hint style="info" %}
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.
{% endhint %}

## 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`