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