Collection list

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on layout settings
3. Company XYZ documentation on slideshow controls settings
4. Company XYZ documentation on headers settings
5. Company XYZ documentation on cards settings
6. Company XYZ documentation on section padding settings
7. Company XYZ documentation on section backgrounds settings
8. Shopify documentation on customizing sections
9. Company XYZ documentation on separators settings
10. Company XYZ documentation on visibility settings
11. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to feature selected collections as visual cards that help shoppers browse by category. It works especially well on homepages, landing pages, and campaign pages where you want to guide people toward the right part of your catalog.

Core settings

Start by selecting the collections you want to show. This section is best for collection discovery and category browsing, rather than highlighting hand-picked individual products. For a broader overview of how sections work in the editor, see Shopify documentation on sections and blocks

Layout settings

Use the layout controls to choose how many collection cards appear on desktop, tablet, and mobile, and whether each device uses a grid or slideshow. See layout settings.

The tablet column setting can inherit the desktop column count when left at 0, which is useful if you want fewer device-specific adjustments. If your desktop layout feels too dense on mid-sized screens, set a tablet value explicitly instead of relying on the inherited layout.

A layout that looks balanced on desktop can feel crowded on smaller screens. It is often better to reduce columns or switch mobile to a slideshow for easier browsing.

Slideshow settings

When a device uses slideshow layout, these settings control how the section moves and how shoppers navigate between collection cards. See slideshow controls.

Fade animation creates a simpler, more focused presentation, but it also limits the layout to one visible slide at a time and does not show pagination. Use it when you want a cleaner promotional feel, not when quick scanning across multiple collections matters more.

Autoplay can add motion, but it should feel supportive rather than distracting. Pause on hover is especially useful on desktop so shoppers can stop movement while deciding where to click.

Previewing the next slide can make the section feel more interactive, especially on touch devices. If you want a tidier, more contained layout, turn that preview off.

Card color settings

Use these settings to override the card colors used elsewhere in the theme for this section only. This is helpful when the collection list needs a stronger promotional look or when the surrounding section background calls for different card contrast.

Banner overlay controls apply only when you use the Banner card style. For other card styles, focus on background, border, heading, and text colors to keep cards readable and visually consistent.

Color settings

These controls override the section’s icon, heading, and supporting text colors. They are most useful when you add a custom section background and need the header content to stand out more clearly.

Keep text contrast strong against both the section background and the card area below. Small adjustments here can make the section feel more polished without changing the card design itself.

Standard section settings

Header settings

Use the shared Header settings to add an intro above the collection cards, including alignment, heading, caption, supporting text, and an optional button. See Header settings.

This is a good place to explain what connects the featured collections, such as seasonality, product type, or intended audience. If you add a button, use it for a clear next step like viewing all collections or opening a related landing page.

Card settings

Use the shared Card settings to control how each collection card looks, including style, image ratio, text display, alignment, and button treatment. See Card settings.

These settings override broader theme defaults for this section only, which is useful when featured collections need a different presentation from the rest of the site. Banner cards are more dramatic, while simpler padded styles are often easier to scan in larger grids.

Note

Vertical text alignment only affects cards when the Banner card style is in use.

Padding settings

Use the shared Padding settings to adjust the space above and below the section. See Padding settings.

More padding helps the collection list feel like a distinct browsing area, while tighter spacing works better when it supports nearby content. Check spacing on both desktop and mobile so the section feels balanced in context.

Section background settings

Use the shared Section background settings to add a color, gradient, image, or video behind the section. See Section background settings.

Backgrounds can make the section feel more editorial or campaign-driven, but they also affect readability and perceived spacing. If you use an image or video background, make sure the header text still has enough contrast and use overlays when needed. For editor-level setup details, see Shopify documentation on customizing sections

Separator settings

Use the shared Separator settings to add a line at the top or bottom of the section. See Separator settings.

Separators help when this section sits between visually similar content areas and needs a clearer boundary. Keep them subtle unless you want a stronger structural break.

Visibility settings

Use the shared Visibility settings to control whether the section appears on desktop, mobile, or both. See Visibility settings.

This is useful when you want separate versions of the section for different devices, such as a large desktop grid and a simpler mobile slider. If you create device-specific versions, keep the featured collections and messaging aligned.

Width settings

Use the shared Width settings to control the section’s content width and outer section width. See Width settings.

Wider widths support larger grids and more columns, while narrower widths can make a smaller set of collections feel more curated. If you use a background, preview width changes on the live storefront because editor framing can make spacing feel different than it does on the page.

Usage notes

1. Group collections intentionally. Choose collections that share a clear theme so the section feels curated rather than like a directory.
2. Match the layout to the goal. Use a grid for fast comparison across several collections, and use a slideshow when space is limited or touch-friendly browsing matters more.
3. Keep cards easy to read. Strong overlays, custom colors, and banner styles work best when text stays clear over collection imagery.
4. Add helpful header context. A short heading and brief supporting text can make the featured collections easier to understand at a glance.
5. Check every screen size. Columns, slideshow behavior, and width choices can feel very different across desktop, tablet, and mobile.
6. Review device-specific media carefully. Separate desktop and mobile images can change cropping, loading, fallback behavior, and readability.
7. Treat navigation content as customer flow. Reordered, hidden, or mobile-only links can change what shoppers can reach from the section.