The Collection list section allows you to showcase multiple collections in a card-based layout. Each collection card can display an image and title that links customers directly to the corresponding collection.
Click the section name to see the section settings on the right-hand sidebar.
Customize the overall appearance of the section.
Reveal on scroll: Show an animation when the section becomes visible while scrolling.
Make section full width: Expand the section to use the full available width.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Customize the introductory content displayed above the collection cards.
Caption: Add optional text above the main heading. Example: Discover performance gear designed to move with you.
Heading: Enter the main heading of the section. Example: Check out now.
Heading size: Select the display size of the heading.
Heading tag: Choose the HTML heading tag, such as h2. This setting may affect SEO.
Description: Add optional supporting content below the heading.
Align center: Center-align the section header content.
Use these settings to control how collection cards are arranged on desktop and mobile.
Carousel on desktop: Display the collection cards as a horizontal carousel on desktop.
Number of cards on desktop: Set the number of collection cards displayed at the same time on desktop. The number is automatically optimized on smaller screens.
Carousel on mobile: Display collection cards as a swipeable carousel on mobile devices.
Mobile slide width: Set the width of each collection card on mobile. A value below 100% reveals part of the next slide to indicate that customers can swipe for more.
Spacing between cards: Adjust the space between collection cards on desktop.
Spacing between cards (mobile): Adjust the space between collection cards on mobile devices.
Customize the appearance of individual collection cards.
Color scheme: Select the color scheme applied to the collection cards.
Style: Choose the visual style of the cards. For example, Solid.
Hover effect: Select the effect applied when customers hover over a collection card. For example, Zoom enlarges the image on hover.
Image ratio: Choose the aspect ratio used for collection images. For example, Square.
Content center: Center-align the collection card content.
Button uppercase: Display the collection button text in uppercase.
Use these settings to add an optional button below the collection cards.
Text: Enter the text displayed on the button. Leave this field blank if you don't want to display the button.
Align center: Center-align the button within the section.
Use these settings to adjust the spacing around the section on desktop and mobile devices.
Top padding: Adjust the space above the section content on desktop.
Bottom padding: Adjust the space below the section content on desktop.
Mobile top padding: Adjust the space above the section content on mobile devices.
Mobile bottom padding: Adjust the space below the section content on mobile devices.
Click Add Collection to add a new collection card to the section. Each Collection block represents one collection displayed in the list.
The available options include:
Collection: Select the Shopify collection you want to display.
Image: Select a custom image for the collection card. A 1000 × 1000 px image is recommended. If no custom image is selected, the selected collection's image is used by default.
Title: Enter the title displayed on the collection card. If left blank, the selected collection's title is used by default. Example: Bracelets.
Link: Set the destination when customers click the collection card. If left blank, the selected collection's URL is used by default.
You can add multiple Collection blocks, such as Bracelets, Necklaces, or other collection categories, and reorder them by dragging and dropping the blocks in the Theme Editor.