Collection list
Section
Last updated
Section
Last updated
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.
In the editor side panel, click (+) Add section and select Collection list. Click and hold the drag handles ⋮⋮ to re-order sections.
Editing a template will change all pages that use that template.
Create and assign new templates to design different page layouts.
Add dynamic content to show page-specific content in the same template.
Click the section to customize the general section styles for colors and spacing, available in all sections:
The Section header appears above the section. Add a Heading, Text, and optional Link.
Click Collection list section to find settings
| Setting | Description |
|---|---|
Heading | Change or remove the title of the section. |
Heading tag | Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance. |
Text | Add multiple lines of rich text below the heading. |
Link URL | Select a page or URL for the link. |
Link label | Add text to display the link. |
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. |
Display collections in a Grid or single-row Slider. Then choose the Number of columns to display in one row.
Click Collection list 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 |
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.
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 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) |
The image overlay adds a layer of color to your image. Overlays help balance image and text for clarity and readability.
Choose a Color scheme for the overlay and overlay text
Change the Opacity to make the overlay more or less transparent
Instead of displaying collection images, you can set the Overlay opacity to 100% to show solid color tiles.
Click Collection list section to find settings:
| Setting | Description | Options |
|---|---|---|
Overlay opacity | Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay. Set to 100% to display a solid color (instead of the image). | 0 - 100% Default: 20% |
