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

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>