Collection list

Overview

The Collection list section allows you to display a curated group of collections in a visually engaging grid or slider. It helps highlight key categories, improve navigation, and encourage users to explore more of your catalog.

With flexible layout, header, and card settings, you can customize presentation, text, and buttons for desktop, tablet, and mobile — ensuring a cohesive and polished browsing experience.

⚠️ Important:
The Collection list section is a powerful tool for directing shoppers toward featured, seasonal, or strategic collections. By combining responsive design and customizable visuals, it improves navigation, enhances product discovery, and supports better user engagement across devices.

Key components and functionality

1. Collection selection

Choose which collections are featured in this section. Each selected collection appears as a clickable card that leads users to a specific product category. Curate these intentionally to guide focus to your most important or high-performing collections.

2. Header settings

Header settings define how the top of your section appears, helping introduce and structure your content with text and calls to action.

1. Text alignment — Adjust alignment for captions, titles, and subheadings.

2. Icon — Add an icon above the title for branding or emphasis.

3. Caption — Write a short tagline or intro line above the main heading.

4. Heading — Customize the main title to match your merchandising focus (default: Collections list).

5. Heading size — Choose from:
   Extra small, Small, Medium, Large, Extra large, Jumbo.

6. Heading type — Select heading tag for structure and SEO (default: H2).
   Options: Paragraph, H1, H2, H3, H4, H5, H6.

7. Subheading — Add a supporting line of text below the main heading.

8. Button icon — Include an icon for additional visual emphasis.

9. Button text — Define CTA label or leave blank if only an icon is shown.

10. Button link — Add a destination URL for the CTA.

11. Open in new tab — Enable to open links in a new browser tab (default: off).

12. Button style — Choose from: Primary, Secondary, Extra large, Plain, Small, Small secondary, Circle.

13. Button layout — Decide how icon and text are displayed: Icon left, Icon right, Icon only.

14. Button position — Position button relative to section content (default: Above content).

15. Mobile button position — Adjust placement for mobile screens (default: Above content).

16. Header position — Control heading and caption placement: Above content (default), Left, or Right.

17. Full width on mobile — Enable to make the header span the full width (default: off).

💡 Tip: Adjust button and heading placement separately for mobile and desktop. Keep captions short and CTAs visible to improve clarity and conversion.

3. Layout settings

Layout settings define how your collections appear across devices, whether as a grid or an interactive slider.

1. Desktop column count — Range: 1–12. Default: 4.

2. Tablet column count — Range: 0–8. Default: 0.
   When set to 0, this inherits the desktop column count.

3. Mobile column count — Range: 1–4. Default: 2.

4. Desktop layout — Choose Grid or Slider.

5. Tablet layout — Choose Grid or Slider.

6. Mobile layout — Choose Grid or Slider.

📝 Note:
Responsive layout controls ensure your collection cards scale properly and stay readable across all devices.

4. Card settings

Card settings control how each collection card looks, including image proportions, visible text, and call-to-action styles.

1. Image aspect ratio (desktop) — Options: Use theme setting (default), Default, Landscape, Portrait, Square, Widescreen, Ultrawide.

2. Image aspect ratio (mobile) — Options: Use theme setting (default), Default, Landscape, Portrait, Square, Widescreen, Ultrawide.

3. Card text — Options: Use theme setting (default), Title and excerpt, Excerpt only, Title only, No text.

📝 Note: Fine-tuning card visuals ensures visual balance and consistency with your theme design.

5. Slideshow settings

These settings activate when using a slider layout, allowing smooth transitions and dynamic motion.

1. Animation style — Options: Default (slide) (default), Fade.

2. Animation speed — Range: 0.1–5 seconds. Default: 0.8 seconds.

3. Autoplay delay — Range: 0–10 seconds. Default: 4 seconds. Setting 0 disables autoplay.

4. Autoplay slideshow — Enable automatic cycling. Default: Disabled.

5. Loop slides — Restart the slideshow continuously. Default: Disabled.

6. Pagination style — Options: Dynamic, Fraction, Progress bar, Scrollbar.

7. Show navigation — Display navigation arrows. Default: Enabled.

8. Show pagination — Add visual indicators (dots, bars, or numbers). Default: Disabled.

💡 Tip: Match your slideshow animation to your brand personality. Fast transitions and dynamic indicators work best for playful brands, while fade effects suit refined or editorial styles.

6. Supported block types

The Collection list section doesn’t use individual blocks — all customization happens within the section settings for easier configuration and uniformity.

Usage notes

1. Adjust layouts and column counts for each device type to optimize readability and flow.

2. Keep featured collections limited for a clean, easy-to-navigate design.

3. Maintain consistent image sizes and aspect ratios for polished visuals.

4. Ensure navigation, pagination, and autoplay settings are intuitive and accessible.

5. Test on multiple devices to confirm spacing, clarity, and responsiveness.

⚠️ Important: Consistency and balance are key. The right combination of layout, visuals, and navigation makes your Collection list an effective gateway to deeper browsing and higher engagement.