Heading
Sets the main title shown above the collection grid.
Usage
- Keep it short so customers understand what the row represents.
- Leave blank to hide the heading and show only collection cards.
Collection list
Collection list displays a heading and a grid of collection cards you add as blocks. Use it to highlight signature collections, scent families, or curated groups with optional custom labels under each image.
Storefront preview
Storefront preview
Where to find this section
Where to find this
Themes → Customize → Add section → Collection list
After adding the section, use Add Collection to add one block per collection card.
Theme editor section list
Content
Subheading
Adds supporting text below the heading.
Usage
- Use one short line to describe the collections in this row.
- Leave blank if the heading alone is enough context.
Layout
Columns on desktop
Sets how many collection cards appear per row on desktop. Range: 2–5. Default: 4.
Usage
- Use 4 columns for a balanced row like the storefront preview.
- Lower the count when card titles are long or images need more space.
Columns on mobile
Sets how many collection cards appear per row on mobile. Range: 1–3. Default: 1.
Usage
- Use 1 for a single-column scroll on phones.
- Use 2 when you want a compact grid on small screens.
Images
Image ratio
Sets the aspect ratio for each collection image. Default: 1:1 – Square.
Usage
- Use 1:1 – Square for uniform tiles across the row.
- Pick another ratio if your collection images are portrait or landscape—fixed ratios may crop.
Background
Sets the background color behind each collection image (visible when the image does not fill the frame). Default color: #FAFAFA.
Usage
- Use a light neutral tone so product and lifestyle shots stand out.
- Match this to your page background for a seamless grid look.
Image corner radius
Rounds the corners of collection images using presets from Theme settings → Border radius. Default: Extra large radius.
Usage
- Pick a preset that matches rounded corners used elsewhere on your store.
- Applies to every card in the section for a consistent look.
Image fit
Sets how each collection image fills its tile. Default: Cover.
Usage
- Choose Cover to fill the tile—edges may crop if the image shape does not match the ratio.
- Choose Contain to show the full image with the Background color visible around it.
Image blend mode
Sets how the image blends with the card background. Default: Normal.
Usage
- Choose Normal for standard photos on any background color.
- Choose Multiply to soften white-background product shots—works best with a light Background color.
Image padding
Adds space around each collection image inside the card. Default: 0 px. Range: 0–16 px.
Usage
- Leave at 0 for edge-to-edge images inside rounded corners.
- Increase the value to inset logos or product shots from the card edge.
- When you move the slider, the gap around each image grows or shrinks on the storefront.
Collection block
Collection
Selects which collection this card links to. The collection’s featured image is used on the card.
Usage
- Add one Collection block per card with Add Collection.
- Choose a collection that has a strong featured image for the grid.
- Clicking the card opens that collection on your store.
Card heading
Optional label shown under the image instead of the collection name.
Usage
- Enter custom text (for example Floral studio) for a marketing-friendly label.
- Leave blank to show the collection’s name from Shopify automatically.
- Use short titles so they fit cleanly under square or cropped images.
Section spacing
Section spacing
Adds empty space above and below this section on desktop and mobile.
Usage
- Top padding (desktop) — Default: 40 px · 0–100 px
- Bottom padding (desktop) — Default: 40 px · 0–100 px
- Top padding (mobile) — Default: 40 px · 0–100 px
- Bottom padding (mobile) — Default: 40 px · 0–100 px
- When you move the slider, the gap above or below grows or shrinks