Skip to content
Collection slider
Section overview
The Collection slider section allows merchants to showcase products from a selected collection in an interactive horizontal slider format with customizable appearance and behavior.
Common use cases
- Highlight featured products or bestsellers on the homepage
- Display related products within collection or product pages
- Create seasonal or promotional product showcases
- Combine product recommendations with custom content blocks
Usage tips
- Choose appropriate card widths for both mobile and desktop to ensure products are displayed attractively across devices
- Consider enabling split layout for sections with longer headings or descriptions to prevent overcrowding
- Use the auto-scroll feature sparingly to avoid frustrating users who are trying to browse at their own pace
- For mobile, select wider card widths (8/12 or higher) to ensure products are easily viewable on smaller screens
Section settings
| Setting | Description |
|---|---|
| Collection | Select which product collection to display in the slider |
| Products count | Maximum number of products to display |
| Heading | Main section heading text |
| Content | Rich text area for section description |
| Button label | Text to display on the section button |
| Button url | URL the section 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 color theme for the section |
| Custom color | Custom background color (when color scheme is set to custom) |
| Text color | Force text to display as light or dark, or use default based on background |
| Border color | Color style for section borders |
| Button color | Style and color for the section button |
| Enable color fade | Allow section to change page background color when scrolled into view |
| Border position | Position of decorative borders around the section |
| Card width mobile | Width of product cards on mobile devices (in 12ths) |
| Card width desktop | Width of product cards on desktop devices (in 12ths) |
| X alignment | Horizontal alignment of section content |
| Arrow alignment | Horizontal alignment of slider navigation arrows |
| Arrow placement | Vertical position of slider navigation arrows |
| Enable margin | Add horizontal margin to section |
| Enable scroll margin | Add margin to scrollable area |
| Enable split | Split section into two columns with heading on left and content on right |
| Enable split heading | Split the heading across two lines |
| Visibility | Control which device types the section appears on |
| Auto scroll delay | Time between automatic slide transitions (in seconds) |
| Enable arrows | Show navigation arrows for the slider |
| Enable indicators | Show indicator dots for slider position |
| Enable scrollbar | Show scrollbar for slider navigation |
Block settings
Content
The content block allows for adding custom promotional content alongside products in the slider.
- Block limit: 1
| Setting | Description |
|---|---|
| Heading | Block heading text |
| Content | Rich text area for block content |
| Button label | Text to display on the block button |
| Url | URL the block button links to |
| Image | Image to display in the block |
| Show image as background | Display the selected image as a background instead of inline |
| Video | Video to display in the block |
| Enable autoplay | Automatically play video when visible |
| Enable mute toggle | Show button to toggle video sound on/off |
| Enable loop | Continuously loop video playback |
| Minimum height | Minimum height of the block (in pixels) |
| Enable padding | Add padding inside the block |
| Color scheme | Background color theme for the block |
| Border color | Color style for block borders |
| Text color | Force text to display as light or dark, or use default based on background |
| Button color | Style and color for the block button |
| Enable gradient | Apply a gradient effect to the block background |
| Text position | Position of text relative to media (above or below) |
| Y alignment | Vertical alignment of block content |
| X alignment | Horizontal alignment of block content |