This section displays a horizontal list of collections, typically styled with circular images, making it perfect for a visual navigation bar or category highlighter.
You have several controls for how the section sits on the page and who sees it.
Animation: Toggle Reveal on scroll to add an animation effect when the user scrolls down to this section.
Width: Enable Make section full width to stretch the content to the edges of the screen.
Device Visibility: Use the Hidden on desktop toggle if you intend for this section to be a mobile-only navigation element.
Theme: Select a Color scheme to apply the section's background and text colors.
This section has specific settings for touch devices to encourage swiping.
Slide Width: You can control the width of each item on mobile using the Mobile slide width slider. Setting this below 100% (e.g., 70%) allows a portion of the next slide to peak through, encouraging users to swipe.
Unit: You can toggle the Mobile slide width unit between percentage or pixels.
The Section header settings allow you to add context to the collection list.
Text Content: You can input a Caption (small text above the title), a main Heading, and a Description for more details.
Typography:
Heading size: Adjust the visual size of the title (e.g., Small).
Heading tag: Select the HTML tag (e.g., h2) for SEO structure without changing the visual look.
Alignment: Toggle Align center to center the text; otherwise, it will default to the left.
Yes, there are specific settings for the cards and footer area.
Images: Use the Image ratio dropdown (e.g., Square) to ensure your collection images are cropped uniformly before being rounded.
Button: You can add a call-to-action button at the bottom of the section by entering text in the Button label field.
Instead of adding each collection manually as an individual block, you can now use the Collection source toggle to pull in multiple collections at once.
From list | Select a group of collections all at once using a collection list or connect a Metafield. This is ideal for quickly displaying large sets of categories. |
From blocks | The traditional method where you add and configure each collection as an individual block within the section. |
Choosing From list is ideal for collections that change frequently. By connecting a metafield, the section can automatically update based on the specific page a customer is viewing