“How do I place a list of product collections on my home page?”

The collection list section displays a list of your product collections on your home page. Using the collection’s name and featured image, it automatically displays the collection information as you set the section up.

A collection list section

You can see this feature in action on the Street demo.

For more information about product collections see Shopify’s Building product collections documentation.

Write a heading to give your collections a title.
Collections per row
Configure how many collections should be displayed, for each row of collections on your home page. Choose between One and Three collections.

Your collections’ featured images may be cropped. See the How does image cropping work section below for more information.

Enable fade-in animation
Use an animation to highlight your collections.
Overlay opacity
Choose the amount of overlay color that should be displayed on top of your images.

You should use this feature if it is difficult to read the text on top of your images.

Overlay color
The color of the overlay that sits on top of your image.

You must also use the Overlay opacity setting in order to display the overlay.

Text color
The color of the text for each collection in your collection list.


You can easily set and reorder what collections should be displayed in your collection list. Use the Add collection button to add up to nine collections.

If you want to display more collections, you can create another collection list section.

How does image cropping work?

No matter if you choose One, Two, or Three in your Collections per row setting, all images are stylishly cropped to a 3:2 landscape aspect ratio.