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)