Collections list page

Template

The Collections list template provides the layout and design of the /collections page that displays your store's collections in a grid. Use this page to give customers an overview of all or selected collections.

• Choose to display all or only selected collections.

• Adjust the layout of the grid

• Change the style of the collection titles and backgrounds

• Customize the images, including their shape and size

Select collections to show

---

By default, the Collection list shows all published collections. You can choose to display only Selected collections. To customize your list, choose 'Selected' and add collection to the collection list.

Collections are created and edited in your Shopify admin. See Shopify's Collections manual ↗ to learn how to group products into collections.

Click Collection list page section to find settings

Setting	Description	Options
Select collections to show	Choose which collections to display on the page.	All Default Selected

Change layout

---

Change the number of columns to display for desktop and mobile screens.

Click Collection list page section to find settings

Setting	Description	Options
Number of columns on desktop	Select the number of collections per row on desktop screens.	4 5 6
Number of columns on mobile	Select the number of collections per row on mobile screens.	2 3
Number of rows on desktop	Set the number of rows to display on desktop.	Show all rows 1 - 5

Set up collection items

---

Click the Collections list page to customize the style of the collection items.

• Choose the style of collection items

• Display product counts

• Change the title font and alignment.

Click Collection list page section to find settings

Setting	Description
Show product counts	Show the total number of products in the collection.
Style	Display collection items as Filled (color tiles), Outlined, or Plain.
Title font	Set the title font to the Body or Heading font as set in your theme settings.
Text alignment	Position the text within collection items: either Left, Center, or Right.

Customize collection images

---

By default, the collection image will be used. If no collection image is set, the first product's image will be used.

• Select an image source

• Adjust the image spacing on desktop

To change the collection image, go to Products > Collections in your Shopify admin. Click the name of the collection, then click Add image.

Click Collection list section to find settings

Setting	Description	Options
Image source	Choose which image to display for the collection list items.	First product image Collection image Default
Desktop image spacing	Adjust the space around images within the collection items.	0 - 40px

Change image shape

---

Change the aspect ratio to crop images to be a uniform shape, and display images as circles.

The aspect ratio of an image is the proportion between its width and height (w:h). A square image has equal width and height (1:1), whereas most images are either wider (2:1) or taller (1:2).

Click Collection list section to find settings

Setting	Description	Options
Aspect ratio	Select an aspect ratio to crop images to be a uniform shape, or select Natural to display images in their original shape.	Natural Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)
Apply circle crop to images	Enable to display square images as cropped circles. Only applies when the aspect ratio is "Square".

---

Related links

Templates