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
- Open the theme configuration of your theme
- Go to the tab "Shopping Experiences"
- Expand the block "Product slider (Category 'Commerce')"
- Select the desired "Layout type" in the section "Design"
- 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 |
Note: The setting applies to all product sliders in your shop, including the cross-selling on your product pages.
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
Note: Both values only apply to the layout types with peek.
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.
- Open the shopping experience in the CMS editor
- Click the CMS block containing the product slider to select it
- Go to the tab "Block settings" in the sidebar on the right
- Expand the section "Layout" there
- Enter the desired class in the configuration field "CSS classes"
- 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 |
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.
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:
Styling a CMS block individually