# Configuration

***

### Individual styling

**Field type**:\
Select

**Available values**:\
• don't use (default)\
• use individual styling

**Example value**:\
`don't use (default)`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")"

**Technical name**:\
`twt-product-slider-controls-individual`

{% hint style="info" %}
In the tab "Content" you can configure all sliders globally.
{% endhint %}

## Arrow navigation (Individual styling)

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Rectangle (default)\
• Square/Circle

**Example value**:\
`Rectangle (default)`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

**Technical name**:\
`twt-product-slider-controls-style`

***

### Corner type

**Field type**:\
Select

**Available values**:\
• not rounded\
• rounded corners (default)\
• round corners

**Example value**:\
`rounded corners (default)`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

**Technical name**:\
`twt-product-slider-controls-corner-type`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}

***

### Hover effect

**Field type**:\
Select

**Available values**:\
• no effect (default)\
• fade in

**Example value**:\
`fade in`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

**Technical name**:\
`twt-product-slider-controls-hover-type`

***

### Text colour

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

**Technical name**:\
`twt-product-slider-controls-color`

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`transparent`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

**Technical name**:\
`twt-product-slider-controls-border-color`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`transparent`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

**Technical name**:\
`twt-product-slider-controls-background-color`

***

### Text colour @hover

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

**Technical name**:\
`twt-product-slider-controls-color-hover`

***

### Border colour @hover

**Field type**:\
Color picker

**Example value**:\
`darken($twt-product-slider-controls-border-color, 10%)`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

**Technical name**:\
`twt-product-slider-controls-border-color-hover`

***

### Background colour @hover

**Field type**:\
Color picker

**Example value**:\
`darken($twt-product-slider-controls-background-color, 7.5%)`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Arrow navigation (Individual styling)"

**Technical name**:\
`twt-product-slider-controls-background-color-hover`

## Product image

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`rgba(0, 0, 0, 0)`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Product slider (Category "Commerce")" => Section "Product image"

**Technical name**:\
`twt-cms-element-product-box`

{% hint style="info" %}
Background colour of procuct images in product boxes of shopping experience sliders.
{% endhint %}