Collection links

Collection links is a list of collections set as large text links, with each collection’s image alongside. It suits a category landing page or the top of a parent collection, where a shopper wants to jump to one part of the range.

It can’t be placed in the header or footer groups.

Settings

Collections. Up to 50, in the order you pick them. With none picked the section shows four placeholders.
Layout.
- Image beside links (default). The images sit in a column beside the list. The first collection’s image shows until a shopper points at or tabs to another link, which brings that collection’s image forward.
- Large text links. The list takes the full width, and a collection’s image appears when a shopper points at or tabs to its link.
Phones show the collections as a scrolling row with either layout.
Image position. Left or Right (default). Shown with Image beside links.
Section width. Page width (default) or Full width.
Alignment. Left (default), Center or Right. Aligns the links.
Background. An optional background color for the section. This section has no color scheme setting; without a background it sits on the page’s own.
Top padding / Bottom padding. Range: 0 to 100 px in 1 px steps. Default: 40 px each.

Blocks

Every link is drawn by one fixed Collection block, so its setting applies to all of them at once.

Show product count. The number of products in the collection, next to its title. Default: on.

Where the images come from

Each link uses the collection’s own image, set in Shopify admin > Products > Collections. A collection without one falls back to the featured image of its first product.

Tips

Short names read best. The links are set large, so “Knitwear” works better than “Our knitwear collection for autumn”.
Give every collection an image. The first-product fallback is rarely the photograph you would have chosen, and with the image beside the links it is on show the whole time.
Five to eight links is a comfortable list. Up to 50 are allowed, but a long list scrolls away from its images.
On touch screens the images don’t follow the finger. With Large text links they appear in a fixed spot, which is also what shoppers who prefer reduced motion see.