> 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/tabs/configuration.md).

# Configuration

## Basic configuration

***

### Layout type

**Field type**:\
Select

**Available values**:\
• default\
• Buttons/Tabs (integrated)\
• Tabs

**Example value**:\
`Tabs`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Basic configuration"

**Technical name**:\
`twt-product-detail-tabs-layout-type`

***

### Border-bottom

**Field type**:\
Text field

**Example value**:\
`2px solid`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Basic configuration"

**Technical name**:\
`twt-product-detail-tabs-background-border-bottom`

## Colour configuration

***

### Background colour (Tabs container)

**Field type**:\
Color picker

**Example value**:\
`#fafafa`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Colour configuration"

**Technical name**:\
`twt-product-detail-tabs-container-background-color`

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Colour configuration"

**Technical name**:\
`twt-product-detail-tabs-color`

***

### Text colour @hover

**Field type**:\
Color picker

**Example value**:\
`#111111`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Colour configuration"

**Technical name**:\
`twt-product-detail-tabs-color-hover`

***

### Text colour @active

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Colour configuration"

**Technical name**:\
`twt-product-detail-tabs-color-active`

***

### Border-bottom colour

**Field type**:\
Color picker

**Example value**:\
`#eeeeee`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Colour configuration"

**Technical name**:\
`twt-product-detail-tabs-border-bottom-color`

***

### Border-bottom colour @hover

**Field type**:\
Color picker

**Example value**:\
`#dcdcdc`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Colour configuration"

**Technical name**:\
`twt-product-detail-tabs-border-bottom-color-hover`

***

### Border-bottom colour @active

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Colour configuration"

**Technical name**:\
`twt-product-detail-tabs-border-bottom-color-active`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#eeeeee`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Colour configuration"

**Technical name**:\
`twt-product-detail-tabs-background-color`

***

### Background colour @hover

**Field type**:\
Color picker

**Example value**:\
`#f5f5f5`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Colour configuration"

**Technical name**:\
`twt-product-detail-tabs-background-color-hover`

***

### Background colour @active

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Product pages" => Block "Tabs" => Section "Colour configuration"

**Technical name**:\
`twt-product-detail-tabs-background-color-active`