Collection list

Collection list shows your collections as large photo tiles with the name written on the image, in a grid or in a scrolling row. Use it to let customers shop by category, such as outerwear, knitwear or accessories, or to point to seasonal edits. You can add it to any page.

Choose the collections

Each tile is a Collection block: add one per collection, up to 12, and drag them into the order you want. In each block, pick the collection in Collection. The tile then shows:

• the collection image, set in Products > Collections in your Shopify admin, unless you choose a different photo in Image;
• the collection title, unless you write a shorter or different one in Heading;
• the number of products in the collection, if Show product count is on in the section.

A tile without a collection links to the page that lists all your collections. Write the alternative text of the photos in Content > Files in your Shopify admin.

Pick a grid or a row

With Layout set to Grid, all tiles are visible at once. Collections per row on desktop sets the columns on large screens, and Columns on mobile lets you show one or two tiles per row on phones.

With Carousel, the tiles sit in a single row that customers scroll sideways, with the next tile peeking in. It suits many collections in little space. On computers with a mouse or trackpad, arrows appear next to the heading when the row is longer than the screen. On phones the row always shows a bit more than one tile, so Columns on mobile is not used.

All tiles share the shape set in Image ratio, whatever the size of your photos, so choose photos where the subject sits near the center.

Make the names readable on the photos

The collection name sits on the photo over a soft gradient. Text on image color scheme sets both: the text takes the scheme’s text color and the gradient its background color. Choose a scheme with strong contrast, such as light text on a dark background, and check the result on your lightest photos.

Add a heading

Heading and Subheading appear above the tiles. The heading also names the section for screen readers, so keep one unless the page already introduces the collections.

Show it only between two dates

Turn on Schedule visibility and set a start, an end, or both. See Scheduling.

Each Collection block can be scheduled too, with the same settings, so a sale or holiday collection can appear in the list only while it runs. If every tile is hidden, the whole section is hidden in your store.

Settings

Settings: Collection list

Setting	Type	Default	Options
Heading	Text	Shop by category	—
Subheading	Text	Fall–winter	—
Layout
Layout	Drop-down	Grid	Grid Carousel
Collections per row on desktop	Slider	2	2–5, step 1
Columns on mobile Shown when Layout is Grid	Drop-down	1 column	1 column 2 columns
Image ratio	Drop-down	Portrait	Portrait Square Landscape
Use full page width	Checkbox	On	—
Show product count	Checkbox	On	—
Vertical spacing	Drop-down	Regular	Compact Regular Spacious
Color scheme	Color scheme	scheme-1	—
Text on image color scheme The gradient behind the collection name uses the background color.	Color scheme	scheme-3	—
Schedule
Schedule visibility	Checkbox	Off	—
Start date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when Schedule visibility is on	Text	—	—
End date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when Schedule visibility is on	Text	—	—

Blocks

Collection

Settings: Collection

Setting	Type	Default	Options
Collection	Collection	—	—
Image Replaces the collection image. 1200 x 1500px recommended.	Image	—	—
Heading Replaces the collection title.	Text	—	—
Schedule
Schedule visibility	Checkbox	Off	—
Start date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when Schedule visibility is on	Text	—	—
End date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when Schedule visibility is on	Text	—	—