What is the collection list section?
The collection list section provides the opportunity to promote specific collections in multiple areas of your store. It can be a very useful tool to showcase the variety of collections that are available to potential customers. Strategically placing collection list sections across your store can guide customers toward key product groups, improve the browsing experience, and aid product discovery which may help to drive additional sales.
How to create a collection list section
Steps
- Open the Theme Editor and add a Collection List section to your page.
- Under the section settings, click on Collection List to add a section Heading if required. Set the Size, Alignment and choose whether the heading should be displayed before or after any Highlight collection blocks.
- Under Cards set the card Size and and adjust the layout
- Style: Choose whether the text appears below the image or over the image.
- Show product count: Toggle to display the number of products in the collection.
- Compact: Enable to reduce padding and make the card more condensed.
- Grid offset: Choose whether the collections are displayed in a line or offset.
- In the Style settings set the colors of the cards and the section background. Cards can inherit the Color scheme of the section or use a different color scheme. The setting Remove top padding can be used to improve the layout by bringing the section closer to the section above when the background colors match.
- Click on a collection block, choose Select collection and pick the collection you want to display. Replace the Image with a custom image if desired or add a different Title.
- Repeat the process for each block or add more collection blocks until all your required collections are displayed.
- Refer to Theme Settings > Collection cards to browse other settings that are available to manage card layout, such as Image shape and Image fit.
Note
When using shape settings that match the height of the shortest or tallest image, check that this works well across all images - especially when the image dimensions vary.
How to use the Highlight collection block
Highlight collection blocks allow you to link to a curated set of collections and display them in a collage style layout. Highlight collection blocks are usually larger than standard collection blocks and will be shown above other collection cards. They are used to spotlight important, high-level collections you want customers to notice first. Use cards of different sizes and shapes to create an eye-catching layout.
Steps
- Open the Theme Editor and navigate to the Collection List section. Click on or add a Highlight Collection block to configure it.
- Click Select to choose the collection you want to highlight. You can also give the block a custom Title to replace the collection name.
- In the Image settings, configure the image layout.
- Image: By default, the collection’s featured image will be used. You can replace it by uploading or selecting another image.
- Image shape (aspect ratio): Choose the aspect ratio for the highlight collection image.
- Image fit: Select Natural to keep the original image proportions, or Cover to crop the image so it fills the space.
- Image alignment: If using Cover, choose how the image is anchored — Top, Center, or Bottom.
- Disable focal point: Toggle this if you don’t to use the focal point set for the image.
- Adjust the Layout
- Style: Choose whether the text appears below the image or over the image.
- Show product count: Toggle to display the number of products in the collection.
- Compact: Enable to reduce padding and make the card more condensed.
- In the Style settings, set the card color scheme for each Highlight collection block.
- Repeat the process to add more highlight collection blocks as required.
Note
FAQs
Can I choose a custom image instead of the collection’s default image?
Yes. By default, blocks in the collection list section uses the collection featured image, but you can upload or select a different image to better represent your collection.
What’s the difference between 'Natural' and 'Cover' for image fit?
“Natural” keeps the original proportions of your image, which may add space if image sizes differ. “Cover” crops the image so it fills the card evenly, creating a consistent grid.
Can I change where the text appears on the card?
Yes. You can display the text below the image or over the image, depending on your design preference. In addition, the Display button can be controlled using the settings in Theme settings > Collection cards.
Can I show the number of products in a collection?
Yes. Enable the Show product count option to display how many products are inside each collection.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us