Collections list - Main

Featured links

1. Shopify documentation on templates
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on headers settings
4. Company XYZ documentation on cards settings
5. Company XYZ documentation on section padding settings
6. Company XYZ documentation on section backgrounds settings
7. Company XYZ documentation on separators settings
8. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Display every available collection in a single browsable layout, then shape the page with card styling, color overrides, spacing, and width controls. This section is best when you want a complete collections landing page rather than a hand-picked set of featured collections. For a broader overview of the page structure, see Shopify documentation on templates

How this section works

This section outputs the full collections list for the page template it supports. You do not choose individual collections here, so the final result depends heavily on how consistent your collection titles, images, and descriptions are. For details on how theme sections are arranged, see Shopify documentation on sections and blocks

Because all collections appear automatically, weak or inconsistent collection images and descriptions will be much more noticeable here than in smaller featured-collection sections.

Card color settings

These settings let you override the default card colors for this section only. They are useful when you want the collections page to feel distinct without changing collection cards across the rest of the site.

Banner overlay controls matter only when you use the Banner card style. Use them to improve text readability over images, but keep the overlay light enough that shoppers can still recognize one collection from another.

For non-banner styles, the background, border, heading, and text colors help you tune contrast and visual weight. If you also show collection excerpts, check that the text remains easy to read against both the card background and the surrounding section background.

Color settings

These settings control the colors used in the section intro content, including the icon, main text, and subheading. They are most useful when your collections page uses a custom section background or needs stronger contrast than your default text styling provides.

Try to keep the intro styling visually connected to the card treatment below it. If the heading area feels much louder or more decorative than the collection grid, the page can feel unbalanced.

Standard section settings

Header settings

Use the shared Header settings to introduce the collections page with an optional icon, caption, heading, supporting text, and button. In this section, a short, clear intro usually works best because shoppers typically want to start browsing quickly.

The optional button is most useful as a secondary action, such as linking to a seasonal campaign or a shopping guide. If you use an icon-only button, make sure the icon clearly communicates the action, especially on mobile.

Card settings

Use the shared Card settings to control how each collection appears in the list. In this section, card style, image ratio, text visibility, alignment, and card button treatment do most of the work in shaping how quickly shoppers can scan the page.

Banner-style cards create a more image-led look, while simpler padded or no-image styles are often better when collection imagery is inconsistent. A fixed image ratio usually makes the grid feel more organized, but it can crop images in ways that hide important focal points.

Tip

If the page feels too busy, simplify the cards first. Reducing card text or hiding card buttons often improves scanability faster than changing spacing or width.

Padding settings

Use the shared Padding settings to control the space above and below the section. On a collections page, padding helps separate the intro from nearby content without making the grid feel isolated.

Section background settings

Use the shared Section background settings to add a color, gradient, image, or video behind the section. This can create a stronger branded frame for the collections page, especially when the surrounding layout is otherwise minimal.

Backgrounds need extra care in image-heavy collection grids. If the cards already rely on strong imagery, keep the section background subtle so the page does not feel overcrowded.

Separator settings

Use the shared Separator settings to add a line above or below the section. They work well when you want a cleaner visual boundary without relying only on extra spacing.

Width settings

Use the shared Width settings to control the content width and the outer section width. Wider settings can make large collection grids feel more efficient to browse, while narrower settings can make the page feel more curated and easier to read when you use a stronger intro.

Width choices become more noticeable when you also use a background, image, or video. It is worth previewing these changes on the live page view, since editor framing can make width differences harder to judge accurately.

Usage notes

1. Keep collection content consistent. This section looks best when collection titles, images, and descriptions follow a similar quality and style.
2. Choose card styles based on image strength. Use banner or image-led layouts only when your collection imagery is clear, recognizable, and consistently cropped.
3. Keep the intro brief. A concise heading and short supporting text usually help shoppers more than a long explanation on a browse-first page.
4. Check mobile layout carefully. Review button placement, image ratios, and text length on smaller screens so the collection grid remains easy to scan.
5. Test contrast with real content. When using overlays, custom card colors, or section backgrounds, confirm that text stays readable across different collection images.
6. Compare both viewports. Desktop and mobile controls can behave differently, so preview each screen size before you publish.
7. Use explicit overrides intentionally. Blank or default-style values usually preserve fallback styling, while custom colors, gradients, or separate media choices make this section more independent from the rest of the page.