> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/product-slider-with-overflow.md).

# Product slider with overflow

By default, a product slider ends at the edge of its container. Instead, you can have the neighbouring products displayed cropped — so your customers can see at a glance that there is more to discover.

In these instructions you will learn how to set the overflow globally and how to configure it individually for single CMS blocks.

***

## Step 1: Choose the layout type

1. Open the **theme configuration** of your theme
2. Go to the tab "**Shopping Experiences**"
3. Expand the block "**Product slider (Category 'Commerce')**"
4. Select the desired "**Layout type**" in the section "**Design**"
5. Save your changes

Four layout types are available:

| Layout type           | Effect                                                               |
| --------------------- | -------------------------------------------------------------------- |
| **Off (default)**     | The products end at the container edge                               |
| **Peek**              | The neighbouring products are partially visible inside the container |
| **Overflow**          | The neighbouring products extend beyond the container                |
| **Peek and overflow** | Both combined                                                        |

{% hint style="info" %}
**Note**: The setting applies to **all** product sliders in your shop, including the cross-selling on your product pages.
{% endhint %}

***

## Step 2: Adjust the crop

You can further adjust the crop in the section "**Basic configuration**".

**Cropped products**

Controls whether the cropped neighbouring products are dimmed. Dimmed products are not clickable — as soon as a product is fully visible, it becomes clickable again.

**Crop width**

You define how much of the neighbouring products is visible separately for desktop and mobile devices:

* "**Crop width @Desktop (>=992px)**" — default: 30 pixels
* "**Crop width @Mobile (<992px)**" — default: 20 pixels

{% hint style="info" %}
**Note**: Both values only apply to the layout types with peek.
{% endhint %}

***

## Step 3: Configure single CMS blocks individually

You do not have to commit to one setting for your entire shop. Using a CSS class on the CMS block, you can display individual product sliders differently.

1. Open the shopping experience in the CMS editor
2. Click the CMS block containing the product slider to select it
3. Go to the tab "Block settings" in the sidebar on the right
4. Expand the section "Layout" there
5. Enter the desired class in the configuration field "CSS classes"
6. Save the changes to your shopping experience

| CSS class                                 | Layout type       |
| ----------------------------------------- | ----------------- |
| `twt-cms-product-slider-reset`            | Off               |
| `twt-cms-product-slider-peek`             | Peek              |
| `twt-cms-product-slider-overflow-visible` | Overflow          |
| `twt-cms-product-slider`                  | Peek and overflow |

{% hint style="success" %}
**Tip**: With `twt-cms-product-slider-reset` you reset the global setting for this single block. This way you can, for example, enable the overflow globally and still switch it off on a particular page.
{% endhint %}

***

## If the overflow is not visible

In two cases the overflow is suppressed on purpose, because the neighbouring products would otherwise extend into adjacent content. The peek remains in place:

* The product slider is placed in a **multi-column CMS block** — the products would otherwise run into the other column
* The product slider is placed in a **sidebar section**

If you want to see the overflow at this position, place the product slider in a single-column CMS block.

***

#### Further information

You can find more information on how to assign a CSS class to a CMS block in the following instructions:

{% content-ref url="/pages/3BmlLbhrCbhJGQlJXDZf" %}
[Styling a CMS block individually](/knowledge-base/tutorials/shopping-experiences/styling-a-cms-block-individually.md)
{% endcontent-ref %}