Collection list

Show the collections you choose, each with its image and name.

Reference Growth Navigation · Pro Navigation 2 min read

Collection tiles with image and name, each linking to the collection page. Use it for visual shortcuts such as “Shop by category” or “Shop by brand”.

Add the block

Pick a layout

In the mega menu panel of the preview, click Add block. Click Collection, hover over a layout and click Select: Collection list - image top (large image, name under it) or Collection list - image left (small image, name next to it).

(1) Click Collection, (2) pick a layout.

The first layout, Collection spotlight, is a separate block. See Collection spotlight.
Choose the collections

In Edit Item, click Select collections and pick the collections to show.

The Collection list block in the preview, with its settings in Edit Item.
Save and publish

Adjust the settings below, then click Save and Publish.

WidthDefault: 100%: How much of the mega menu row the block takes: Auto or 8.33% to 100%.
LayoutDefault: The layout you picked: Image above or Image left. You can switch at any time.
Item(s) per rowDefault: 4: 1, 2, 3, 4 or 6 collections per row.
Image ratioDefault: Auto: Auto, 1:1, 4:3, 3:4, 16:9 or 9:16. Makes all collection images the same shape.
CollectionsDefault: None: The collections to show.
VisibilityDefault: Off: Hide on desktop, Hide on mobile, Hide when logged in, Only show when logged in, Schedule publishing. See Settings every block has.

Collection images come in many shapes. Set Image ratio to 1:1 for a tidy row of equal tiles.
Titles and images update on their own. If you delete a collection or change its handle (URL), open the block and pick it again.

A collection shows a grey placeholder

The collection has no image. Add one in Shopify admin > Products > Collections, and the menu picks it up automatically.

Was this helpful?