Section: Collection List

Everything you'll need to know on how to setup your Collection List section.

The Collection List section displays a curated list of collections in a clean grid — perfect for the homepage to spotlight your top categories. Each card has a uniform height, optional Shop Now hover state, product count pill, badges, and per-card corner radius overrides. Maximum 12 collection blocks.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section in your left sidebar.

2) Search for Collection List, then click on it.

3) Done — your Collection List is added with default placeholder collections. Add Collection blocks to customize.

The main section title. Leave empty to hide.

Optional smaller line below the heading.

Alignment of the heading group: Left or Center. Default: Left.

Tick this box to display a View all link next to the section heading. Useful when this section is a curated subset and you want to direct visitors to the full collections page.

Text shown for the View all link (e.g. View all, See all collections, Browse more).

Where the View all link goes. Typically the all-collections page (/collections).

Two layout modes: Grid renders all cards in a uniform N-column grid (clean and predictable — best when collections are visually similar). Mosaic renders the cards in an editorial pattern with one or two feature tiles spanning multiple columns (more dynamic — best when you want to spotlight a hero collection). The mosaic pattern auto-adjusts to the number of blocks you add. Default: Grid.

Number of cards per row on desktop. Only applies in Grid layout — Mosaic uses its own fixed pattern.

Horizontal and vertical space between cards.

Uniform height for all cards. Sets a fixed pixel height regardless of the image's aspect ratio. Images use object-fit: cover so they crop to fit.

Background and heading colors for the section.

Colors for the card overlay text and badges. Pick a contrasting scheme to make titles pop on top of card images.

Where the title sits on the card: Bottom bar (a translucent bar at the bottom — most common) or Center overlay (centered on the card with a darker scrim).

Tick this box to add a soft drop shadow under each card.

Top-left corner radius (0–48 px).

Top-right corner radius (0–48 px).

Bottom-right corner radius (0–48 px).

Bottom-left corner radius (0–48 px).

Replaces title text on card hover. When ticked, the title swaps to a CTA text on hover, encouraging clicks. Default: off.

Text shown on hover when CTA is enabled (e.g. Shop Now, Discover, Explore →).

Tick this box to display a pill on each card showing the number of products in the collection (e.g. 24 products). Default: off.

Height of the gradient overlay on desktop (56–160 px). Default: 100.

Height of the gradient overlay on mobile (56–140 px). Default: 80.

Strength of the gradient overlay (0–100%). Default: 50%.

Visual size of the card title from H1 down to H6. Default: H4.

Default badge position: Top left, Top center, or Top right.

Corner radius of badges (0–40 px). Default: 20.

Horizontal padding inside badges (6–28 px). Default: 16.

Vertical padding inside badges (4–20 px). Default: 7.

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

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

Space above the section in pixels (0–160). Default: 80.

Space below the section on desktop (0–160 px). Default: 80.

Space below the section on mobile (0–120 px). Default: 50.

Accessible label for screen readers, applied to the outer section. Default: Collections. Useful when the visible heading is hidden or doesn't fully describe the section.

Each card is an individual Collection block. Click Add block inside the section and choose Collection. Maximum: 12 blocks.

Pick the collection to display in this card.

Optional image used when the collection has no featured image.

Override the collection's title with custom text. Useful for marketing-style names (e.g. Bestsellers instead of the actual collection name).

Override the link to a custom URL (e.g. a landing page). Defaults to the collection's URL when empty.

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

Text shown on the badge. Default: New.

Override the default badge position for this card.

Override each corner radius for this specific card. Set 0 to inherit section defaults.

Collection List is a smaller manually curated list (max 12) — perfect for the homepage to highlight just a few collections. Collections grid auto-lists all collections with pagination — best for the all-collections page.

Card height is uniform across all cards (set by the Card height setting at the section level). For varied heights you'd need a custom layout — Collection List prioritizes a clean, balanced grid.

The hover state requires a real hover (mouse or trackpad). On touch devices, the hover swap doesn't trigger — the title remains visible. This is intentional so that touch visitors aren't confused by a CTA they can't easily activate.

The section is capped at 12 blocks. For more, use the Collections grid section (auto-list with pagination) or stack two Collection List sections.

The pill only renders when Show product count pill is on. Make sure the toggle is ticked under Product count.