Collection list

The Collection list template presents the store's collections as a browsable index. Use it when shoppers need to choose a collection before viewing its products.

Open the Collection list template

1. From Shopify admin, go to Online Store > Themes > Customize.
2. Use the page selector to open Collections > Collection list.
3. Select the Collections grid section.
4. Preview the index with a small and a large number of collections before saving.

Template order

The current saved Collection list template contains one section:

1. Collections grid

Heading

Heading

• Controls: The main heading for the collection index.
• Use it when: Add a heading that explains what customers can browse.

Introduction

• Controls: Rich text below the heading.
• Use it when: Briefly explain how the collections are organised.

Cards

Collections per page

• Controls: Sets how many collection cards are loaded per page.
• Options: 6–48, in steps of 3. The current default is 24.

Full width

• Controls: Uses the full available width when enabled. The current default is off.

Collections per row (mobile)

• Controls: Sets the number of collection cards per mobile row.
• Options: 1 or 2. The current default is 1.

Collections per row (desktop)

• Controls: Sets the number of collection cards per desktop row.
• Options: 2, 3, 4, or 5. The current default is 3.

Image ratio

• Controls: Sets the collection-card image ratio.
• Options: Natural, Portrait, Square, or Landscape. The current default is Portrait.

Content position

• Controls: Chooses where collection-card text appears.
• Options: Below image or Over image. The current default is Below image.
• Use it when: Use below-image content when readability is the priority; use over-image content only after checking text contrast against every collection image.

Card text alignment

• Controls: Aligns the text inside collection cards.
• Options: Left, Center, or Right. The current default is Left.

Show product count

• Controls: Shows the number of products associated with each collection. The current default is off.
• Use it when: Enable it when collection size helps shoppers choose where to start.

Spacing

Section spacing

• Controls: Sets the section spacing to None, Small, Medium, or Large. The current default is Medium.

Top spacing

• Controls: Adds or removes top spacing. The current default is on.

Bottom spacing

• Controls: Adds or removes bottom spacing. The current default is on.

Desktop and mobile behavior

The template exposes independent mobile and desktop card-column controls. A final guide should compare:

• card image crop at every selected ratio;
• one-column and two-column mobile layouts;
• long collection titles and optional product counts;
• pagination when the collection count exceeds Collections per page.

Exact breakpoints and unverified pagination behavior are intentionally not stated here.

Media recommendations

Choose collection images with a clear focal point that survives the selected ratio and the optional over-image text treatment. Exact dimensions require approved fixture testing.

Accessibility and motion

Use meaningful alternative text for collection images and keep the collection-card link text understandable without relying only on the image. Verify visible keyboard focus and reduced-motion behavior for image reveal before publishing a final interaction claim.

Common checks

• If a collection is missing, verify that it is available to the storefront and that the page is using the Collection list template.
• If product counts are absent, review Show product count and the collection data.
• If the index feels too dense, compare Collections per row (desktop) and the image ratio before changing collection artwork.

Related guides

• Collection
• Product card
• Templates overview

[!NOTE] The labels, ranges, options, defaults, and section order above come from the current Collection list template and section schema. Final card geometry, pagination, responsive behavior, and accessibility outcomes remain pending accepted browser verification.