Product Slider
Overview
The Product Slider Studio section presents product collections in a horizontally scrollable format. Navigation controls can be positioned at the top or bottom, with an optional scrollbar for additional browsing feedback. A content header area supports headings, sublines, and a single call-to-action button. Product tiles are fully configurable for the information displayed. The slider works well for cross-sells, related products, or category highlights throughout the store.
Key Business & UX Benefits
- One section for product sliders with headline and CTA so cross-sells and related products are easy to add.
- Flexible navigation (top/bottom) and scrollbar fit different layouts.
- Full-width or boxed layout and spacing keep the section flexible.
- Product tile customization supports different catalog needs.
Usage
Product Slider with Headline and Link
Users can easily navigate through the cards by swiping or using navigation arrows, making it convenient to explore a collection of products within a limited space. The component is responsive and adapts to different devices, ensuring a consistent and enjoyable browsing experience.
Feature List
- Flexible navigation positioning (Top or Bottom)
- Content area with heading, subline, and button
- Comprehensive product tile customization
- Full width or boxed layout with spacing controls
API Reference
| Prop | Default | Type |
|---|---|---|
productsrequired | ProductTileBasicProps[] { productId, variantId, href, 24 more } | |
headline | string | |
headlineColor | string | |
subline | string | |
sublineColor | string | |
cta | { text, link, variant } | |
hasScrollbar | boolean | |
navigationPosition | "top" | "bottom" | |
colorMode | "on-light" | "on-dark" | "on-bright" | |
textAlignment | "left" | "center" | "right" |
| Slot | Type |
|---|---|
productTile | { product: any; } |