Collection list slider

Section overview

The Collection list slider is a customizable horizontal slider that showcases different product collections through cards. It provides an interactive way for users to browse through various product categories.

Common Use Cases

• Highlight different product categories on your homepage

• Showcase featured or seasonal collections

• Create a visually appealing navigation for your store's main product lines

• Display curated collections alongside custom content blocks

Usage Tips

• Keep the number of collections reasonable to prevent overwhelming users

• Use consistent imagery across collection cards for a cohesive look

• Consider mobile display when setting card widths - cards that are too wide on mobile may create a poor user experience

• Use the custom content block to introduce the collections or provide context

• For better performance, optimize collection images before uploading

Section Settings

Setting	Description
Collection	Select the collections to display in the slider
Heading	Main heading for the section
Content	Text content to display below the heading
Button label	Text to display on the button
Button URL	URL to navigate to when button is clicked
Top spacing	Amount of space above the section (in pixels)
Bottom spacing	Amount of space below the section (in pixels)
Color scheme	Background and text color theme for the section
Border color	Color of the section border
Button color	Style and color of the button
Border position	Position of the border (top, bottom, both, or none)
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 cards on mobile devices (in 12ths)
Card width desktop	Width of cards on desktop devices (in 12ths)
Enable margin	Whether to add horizontal margin to the section
Enable split	Whether to split the header and content into separate columns
Visibility	Control whether section appears on all devices, only mobile, or only desktop
Enable arrows	Show navigation arrows for the slider
Enable indicators	Show indicator dots for the slider
Enable scrollbar	Show a scrollbar for the slider

Block Settings

Content

The Content block allows you to add a custom content card to the beginning of the collection slider, which can include text, images, or video.

Block limit: 1

Setting	Description
Heading	Title text for the content block
Content	Rich text content for the block
Button label	Text to display on the button
URL	Link destination when the content is clicked
Image	Main image to display in the content block
Image background	Background image for the content block
Video	Video to display in the content block
Enable autoplay	Automatically play video when visible
Enable mute toggle	Show mute/unmute button for video
Enable loop	Continuously loop the video
Minimum height	Minimum height of the content block (in pixels)
Enable padding	Add padding inside the content block
Color scheme	Background and text color theme for the block
Text color	Force text to be light or dark, regardless of background
Border color	Color of the border around the content block
Button color	Style and color of the button
Enable gradient	Apply a gradient overlay to the block background
Y alignment	Vertical alignment of content within the block
X alignment	Horizontal alignment of content within the block
Text position	Position of text relative to the image (above or below)