Skip to content
Slider
Section overview
The Content Slider section provides a customizable horizontal slider of content cards that can be used to display various types of information and media.
Common use cases
- Showcasing featured products with images and descriptions
- Displaying promotional content or announcements
- Highlighting key features or benefits of products/services
- Creating image galleries with supporting text content
Usage tips
- Use consistent image sizes across slider blocks for a polished appearance
- Keep text content concise within each slide to maintain readability
- Consider mobile users by setting appropriate mobile widths for each block
- Use color schemes that complement your overall store design
- Test slider navigation on both desktop and mobile to ensure good user experience
Section settings
| Setting | Description |
|---|---|
| Heading | Main section heading displayed above the slider |
| Content | Rich text content displayed below the section heading |
| Button label | Text to display on the section's call-to-action button |
| Button URL | Destination URL for the section's call-to-action button |
| Top spacing | Amount of space above the section (0-300px) |
| Bottom spacing | Amount of space below the section (0-300px) |
| Color scheme | Background and text color combination for the section |
| Border color | Color of the section's border |
| Button color | Style and color variant for the section's button |
| Border position | Position of borders around the section (none, top, bottom, or both) |
| Horizontal alignment | Controls the alignment of section content (left, center, right) |
| Visibility | Controls section visibility on different device types (all, mobile only, desktop only) |
Block settings
Content
Content blocks are the individual slides within the slider. Each block can contain images, text, and a call-to-action button.
Limit: 20 blocks per slider
| Setting | Description |
|---|---|
| Heading | Title text for the content block |
| Content | Rich text content displayed in the block |
| Image | Featured image displayed in the block |
| Background image | Image used as the block's background |
| Background video | Video used as the block's background |
| Enable video autoplay | Automatically plays the background video when visible |
| Enable mute button | Shows a button to toggle video sound on/off |
| Enable video loop | Continuously loops the background video |
| Button label | Text to display on the block's call-to-action button |
| Button URL | Destination URL for the block's call-to-action button |
| Top spacing | Amount of space above the block content (0-300px) |
| Bottom spacing | Amount of space below the block content (0-300px) |
| Enable padding | Adds padding around the block content |
| Color scheme | Background and text color combination for the block |
| Border color | Color of the block's border |
| Text color | Controls text color rendering (default, force light, force dark) |
| Button color | Style and color variant for the block's button |
| Enable gradient | Adds a subtle gradient overlay to the block |
| Vertical alignment | Controls the vertical alignment of block content (top, middle, bottom) |
| Horizontal alignment | Controls the horizontal alignment of block content (left, center, right) |
| Desktop width | Width of the block on desktop devices (1-12 grid units) |
| Mobile width | Width of the block on mobile devices (1-12 grid units) |