Collection List

Collection list displays selected collections in a grid.

Configure Collection List

1. Add Collection list.
2. Add one or more Collection blocks.
3. Choose a color scheme.
4. Add heading and text.
5. Set desktop and mobile columns.
6. Choose image ratio.
7. Save.

Section Settings

• Color scheme: Sets the section background and text colors.
• Fluid width: Lets the collection list use a wider layout. Use this for image-led collection grids that should feel more expansive.
• Heading: Section heading. Example: Shop by category , Collections , or Explore the range .
• Heading tag: Sets the HTML heading level. Use H2 for most homepage sections.
• Text: Optional intro text below the heading. Use this to explain how the collections are grouped.
• Columns on desktop: Number of collection cards per row on desktop. Use fewer columns for larger imagery; use more columns for compact browsing.
• Columns on mobile: Number of collection cards per row on mobile. Use one column for large images and two columns for quick scanning.
• Image ratio: Controls collection image cropping. Square gives a clean grid, Portrait gives a taller editorial look, and Adapt follows the image’s natural shape if available.

Spacing is controlled using the shared padding settings. See Section Spacing and Padding.

Collection Block

• Collection: Select the Shopify collection to display in this card. The card uses the collection title and image.

Tips

• Use Collection list to help customers browse major product groups.
• Keep collection images visually consistent.
• Use fewer columns when collection titles are long.