> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/styling/components/product-slider.md).

# Product slider

### Colors

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FfqB1snPp01C5yloFnUoj%2Fdocs-en-config-theme-components-product-slider-colors.png?alt=media\&token=10253b1e-63ac-4d14-a344-39d24c3c0c18)

Example:

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FsA7FXOSMEnK8tREJpkby%2Fdocs-theme-elemente-slider-controls-product-slider-demo.jpg?alt=media\&token=71787aae-6c84-491d-8f2f-0026e31f98fa)

### Basic configuration

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FS2yIOiinoejWhnDvNWx2%2Fdocs-en-config-theme-components-product-slider-basic-configuration.png?alt=media\&token=b8e0e390-9c37-4ec4-b5ed-9b6eff93e5b5)

The **appearance** of the product slider can be set to display elements outside the active area with 50% visibility. Often this can increase the impact of the product slider and the interaction with this element.

Optionally, you can **show arrow controls on mouseover only (2)**. 

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FmaDdn3uLlFNRCcFfNzXc%2Fdocs-storefront-theme-elements-produc%20t-slider-axpanded.webp?alt=media&amp;token=ede8a7b7-a2ce-499c-95de-3bb8fe67406d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FHc8vYtITYul2oE5pvp1a%2Fdocs-storefront-theme-elements-produc%20t-slider.webp?alt=media&amp;token=5b089b61-e676-4607-bb9f-f93d12554c99" alt=""><figcaption></figcaption></figure>

> From theme version 5.9.0

In newer versions of the theme, this setting can also be found within the product slider CMS element in the Shopping Experiences. It is possible to inherit the theme's default setting.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FDEqMzeOxgRgUfXIoaMgZ%2Fdocs-en-config-shopping-experience-product-slider-style.webp?alt=media&amp;token=959cd431-6730-428c-9798-87647a3e2467" alt=""><figcaption></figcaption></figure>