Collection list

The Collection list section displays collections in a Grid or Slider layout.

• Select which collections you want to show with their featured image and title.

• Customize the appearance and aspect ratio of the collection images.

Editing templates will change all pages that use the same template. Create new templates for different page layouts, or show dynamic page content in the same template.

Set up section

---

In the editor side panel, click (+) Add section and select Collection list. Click and hold the drag handles ⋮⋮ to re-order sections.

Click the section to add a section header and change section styles for colors and spacing.

Section header

Section colors

Width and Padding

Select collections to show

---

Select a list of your collections to show. For each collection, the section displays a tile with an image and title.

Click Collection list section to find settings:

Setting	Description
Collection	Click Select collections to choose which of your collections to show in the section.

Use grid or slider layout

---

Display collections in a Grid or single-row Slider. Then choose the Number of columns to display in one row.

Click section to find settings

Setting	Description	Options
Layout	Display collection list items in multiple rows or in a single row that visitors can rotate through.	Slider Default Grid
Show slider scrollbar	When checked, the scrollbar appears below the collections and allows visitors to move through the slider.
Number of columns on desktop	Select the number of collections per row on desktop screens.	2 3 Default 4
Number of columns on mobile	Select the number of collections per row on mobile screens.	1 Default 2

Set up collection images

---

Choose which images to use for the collection items. By default, the collection image will be used. If no collection image is set, the first product's image will be used.

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

Using color overlays

Learn how to change overlay colors and use gradients.

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

Change image aspect ratio

---

Change the aspect ratio to crop images to be a uniform shape.

An image's aspect ratio is the proportion between its width and height (w:h). A square 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 Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)