Skip to content
Product slider
Section overview
The Product slider section displays a customizable horizontal slider of products from a selected collection, optionally mixed with content blocks.
Common Use Cases
- Showcasing featured products on the homepage
- Highlighting new arrivals or seasonal collections
- Creating a "You may also like" section on product pages
- Building promotional sections that combine content and product cards
Usage Tips
- Select a collection with sufficient products to create a meaningful slider
- Consider mobile users by adjusting the card width settings appropriately
- Use content blocks strategically to introduce or explain the product collection
- For best visual results, use images of consistent dimensions throughout the collection
Section Settings
| Setting | Description |
|---|---|
| Collection | Select the collection to display products from |
| Total items | Maximum number of products to display |
| Heading | Main heading for the section |
| Content | Descriptive text for the section |
| Button label | Text for the optional button |
| Button url | URL the button links to |
| Top spacing | Amount of padding above the section (in pixels) |
| Bottom spacing | Amount of padding below the section (in pixels) |
| Color scheme | Background and text color combination for the section |
| Color border | Color style for section borders |
| Color button | Style and color for the section button |
| Border position | Position of borders around the section |
| Size | Width of the section content |
| X alignment | Horizontal alignment of section content |
| Arrow alignment | Horizontal alignment of slider navigation arrows |
| Card width mobile | Width of product cards on mobile devices (as a fraction of 12) |
| Card width desktop | Width of product cards on desktop devices (as a fraction of 12) |
| Enable margin | Apply horizontal margin to the section |
| Enable split | Split section into a sidebar (1/3) and content area (2/3) |
| Visibility | Control whether section appears on mobile, desktop, or both |
| Enable arrows | Show navigation arrows for the slider |
| Enable indicators | Show position indicator dots for the slider |
| Enable scrollbar | Show scrollbar for the slider |
Block Settings
Content Block
The Content block adds text, media, and button elements to the product slider. This can be used to introduce or complement the product collection.
Limit: 1 block
| Setting | Description |
|---|---|
| Heading | Block heading text |
| Content | Descriptive text for the block |
| Button label | Text for the block's button |
| Button url | URL the button links to |
| Image | Primary image to display |
| Image background | Background image to display behind content |
| Video | Video to display |
| Enable video autoplay | Automatically play video when visible |
| Enable mute button | Show a button to toggle video sound |
| Enable video loop | Continuously loop the video |
| Minimum height | Minimum height for the block (in pixels) |
| Enable padding | Apply padding around block content |
| Color scheme | Background and text color combination for the block |
| Color text | Override text color setting |
| Color border | Border color style for the block |
| Color button | Style and color for the block button |
| Enable gradient | Apply a gradient effect to the background |
| Y alignment | Vertical alignment of content within the block |
| X alignment | Horizontal alignment of content within the block |
| Text position | Position text above or below the media |