Collection list slider

Section overview

The Collection Slider section displays a horizontal scrollable slider of product collections, allowing customers to browse through different collection categories with a visually appealing interface.

Common use cases

• Showcasing different product categories on the homepage

• Highlighting seasonal or featured collections

• Creating a navigation element for browsing product categories

• Promoting special collections alongside custom content cards

Usage tips

• Use clear, high-quality images for each collection to improve visual appeal

• Keep the number of collections reasonable to avoid overwhelming customers

• Add a descriptive heading to help customers understand the purpose of the slider

• Consider adding a promotional card to highlight special offers or announcements

Best practices:

• Maintain consistent image dimensions across all collections for a polished look

• Use concise, descriptive titles for each collection

• Set appropriate card widths for mobile and desktop to ensure proper display

Common pitfalls to avoid:

• Adding too many collections, making it difficult for customers to navigate

• Using poor quality or inconsistent images

• Neglecting to configure responsive settings for mobile devices

Mobile responsiveness considerations:

• Adjust card width for mobile using the card_width_mobile setting

• Test the slider on different devices to ensure proper display and navigation

• Consider hiding complex content on mobile if it affects usability

Section settings

Setting	Description
Collection	Select the collections to display in the slider
Heading	Set the heading text for the section
Content	Add descriptive text content for the section
Button label	Text to display on the section button
Button URL	URL for the section button link
Spacing top	Control the top padding of the section (0-300px)
Spacing bottom	Control the bottom padding of the section (0-300px)
Color scheme	Choose the color scheme for the section background and text
Border color	Select the color for section borders
Button color	Choose the style and color for buttons in the section
Border position	Set the position of borders (none, top, bottom, or both)
Horizontal alignment	Control how content aligns horizontally (left, center, right)
Card width mobile	Set the width of cards on mobile devices (fraction of 12)
Card width desktop	Set the width of cards on desktop devices (fraction of 12)
Visibility	Control section visibility across devices (all, mobile only, desktop only)
Enable collection size count	Show or hide the number of products in each collection

Block settings

Card

The Card block allows you to add a promotional content card to the collection slider, which can feature text, images, or video to highlight special offers or announcements.

Block limit: 1

Setting	Description
URL	Set the link destination when the card is clicked
Heading	Add a title for the promotional card
Content	Add descriptive text content for the card
Button label	Text to display on the card's button
Image	Select the main image to display on the card
Background image	Choose a background image for the card
Video	Upload or select a video to display on the card
Enable autoplay	Automatically play video when it comes into view
Enable mute toggle	Show a button to toggle video sound on/off
Enable loop	Continuously loop the video playback
Background color scheme	Choose the color scheme for the card background and text
Border color	Select the color and visibility of card borders
Button color	Choose the style and color for the card's button
Column size	Set how many columns the card should span (1-4)