Collections list

Everything you'll need to know on how to setup your Collections grid section.

The Collections grid section displays a responsive grid of collection cards with optional badges, custom corner radii per card, and an overlay-style title. Show all collections automatically, or pick specific ones with manual blocks (up to 24). Each card supports a fallback image, a sale/new badge, and per-card corner radius overrides for unique looks.

Collections grid is a template-only section. It is locked to the list-collections template (the page that lists every collection on your store, available at the /collections URL). You won't find it in the Add section menu on other templates — Shopify only loads it when a customer visits the all-collections page.

1) In the theme editor, open the page dropdown at the top and choose Collections list (the all-collections page template).

2) In the left sidebar, click the Collections grid section to open its settings.

3) Configure the fields below. Changes apply to the /collections page on your storefront.

Small uppercase label shown above the heading. Leave empty to hide.

The main section title. Leave empty to hide.

Visual size of the heading: Heading 1, Heading 2, Heading 3, or Heading 4. Pulls from your theme's heading scale.

Optional paragraph below the heading.

Alignment of the section header (subheading, heading, description): Left, Center, or Right. Default: Center.

Background and heading colors for the section.

Colors used inside the card overlay (title text, badge background). Choosing a different scheme creates contrast between the card and the section.

Choose 'All' to list every collection automatically, or 'Selected' to add specific collections as blocks below. All auto-pulls every collection from your store; Selected uses the Collection blocks you add manually for full control.

Applies when 'Show collection' is set to All. Pagination kicks in when you have more collections than this number. The grid splits across multiple pages with previous/next links.

Number of collection cards per row on desktop. Pick a value that fits your layout — 3 columns is the most common.

Number of collection cards per row on mobile: 1 column (best for image-heavy cards) or 2 columns (compact).

Aspect ratio of card images: Square (1:1), Portrait (3:4), Landscape (4:3), or Wide (16:9). Use the same ratio across all cards for a polished grid.

Alignment of the title inside each card overlay: Left, Center, or Right.

Tick this box to add a soft drop shadow under each card. Lifts the cards off the page. Default: on.

Top-left corner radius of cards (0–48 px). Default: 16. Set 0 for sharp corners.

Top-right corner radius of cards (0–48 px). Default: 16.

Bottom-right corner radius of cards (0–48 px). Default: 16.

Bottom-left corner radius of cards (0–48 px). Default: 16. Mix-and-match the four radii for asymmetric card shapes.

Height of the gradient overlay at the bottom of each card on desktop (40–160 px). Default: 96 px.

Height of the gradient overlay on mobile (40–120 px). Default: 80 px.

Strength of the gradient overlay (0–100%). Default: 50%. Higher values create a more readable title; lower values let the image shine.

Font size of the collection title inside the overlay (12–48 px). Default: 28.

Default position of badges on cards: Top-left, Top-center, or Top-right. Each Collection block can override this.

Corner radius of badges in pixels (0–40). Default: 22 — pill-shaped.

Horizontal padding inside badges (4–32 px). Default: 18.

Vertical padding inside badges (2–20 px). Default: 8.

Distance from the card edge horizontally (0–60 px). Default: 10.

Distance from the card edge vertically (0–60 px). Default: 10.

Space between cards in the grid (0–50 px). Default: 16 px.

Space above the section in pixels (0–100). Default: 40 px.

Space below the section in pixels (0–100). Default: 40 px.

When Show collection is set to Selected, add Collection blocks to manually pick which collections appear and in what order. Maximum: 24 blocks. Click Add block and choose Collection.

Pick the collection to display in this card. Pulls the collection title and image automatically.

Optional image used when the collection has no featured image. Useful for new or empty collections that should still look polished.

Tick this box to display a badge on this specific card.

Text shown on the badge. Default: SALE. Examples: NEW, HOT, -30%, EXCLUSIVE.

Override the default badge position for this card.

Override each corner radius (top-left, top-right, bottom-right, bottom-left) for this specific card. Set to 0 to inherit section defaults. Use to create cards with unique shapes — for example, all-rounded for featured cards and sharp for standard ones.

Collections grid auto-lists all your collections (or selected ones) with pagination — best for the All Collections page or a category browser. Collection list is a smaller, manually curated list of collections — best for highlighting just a few key collections on the homepage.

The 24-block limit applies to Selected mode. If you have many collections, switch to All mode and use Collections per page to control pagination — there's no upper limit on All mode.

Badges only appear on cards where Badge enable is ticked at the block level. The section-level Badge settings only control the visual style — they don't auto-add badges to all cards.

No — image ratio is set at the section level and applies to all cards. To mix ratios you would need to use two separate Collections grid sections with different ratios. For consistency on the same page, stick to one ratio.

Pagination only appears in All mode when you have more collections than your Collections per page setting. In Selected mode, all your blocks render on a single page with no pagination.

By design — this section is locked to the Collections list template (URL /collections) and won't appear in Add section elsewhere. It's the only section that powers that page, so the theme keeps it pre-installed there. To configure it, switch to the Collections list template using the page dropdown at the top of the theme editor.