Blum Collection List
Theme: Blum · Section type: All-template section
A Collection list section shows a selection of your collections as image cards. Use it to help customers find the right category quickly, for example on the homepage.
Note: You can add this section to any template, except the header and footer.
What you can do
- Add the section and choose your collections
- Choose the card style and layout
- Add a "View all" button and a badge
- See what customers see
- Change the Collection list settings
- Fix common problems
Add the section and choose your collections
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Collection list.
- Under General, enter a Section subheading, Section heading, and Section description. Leave a field empty to hide it.
- Under Collection items, click Select collections and choose the collections to show.
- Click Save.
Tip: Give each collection an image in the Shopify admin under Products > Collections. Cards without an image look empty next to cards with one.
Choose the card style and layout
- Under Layout, choose a Style: Standard or Card.
- Choose the Items per row on desktop and Items per row on mobile.
- Choose the Content alignment: Left, Center, or Diagonal.
- Optional: select Enable carousel on mobile, and then Show navigation on mobile to add arrows.
- Click Save.
Setting | What it does |
|---|---|
Style | Standard shows the collection title below the image. Card shows the title on the image, over a mask overlay. |
Content alignment | Left or Center aligns the heading and cards. Diagonal shows 2 collections per row on large screens in a staggered layout. |
Note: Items per row on desktop doesn't apply to the Diagonal alignment.
Add a "View all" button and a badge
- Under Button, select Show 'View all' button to view all collections.
- Enter the 'View all' button label. The button opens your Collection list page.
- Optional: under Prominent badge, enter a badge Text, and then choose its Accent scheme, Position, and Shape.
- Click Save.
What customers see
- Collection cards: each card shows the collection image and title. Customers click a card to open the collection. Product counts, image shape, and card colors come from Theme settings > Collection card.
- Large screens: the cards appear in a grid with the number of items per row you chose. With Diagonal, the cards appear 2 per row, offset from each other, and the "View all" button appears with the heading.
- Mobile: the cards appear in 1 or 2 columns. With Enable carousel on mobile, customers swipe through the cards in one row. Arrows appear only when Show navigation on mobile is selected.
- Badge: a small star, diamond, or asterisk shape with your text appears next to the heading.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the colors of the section. Edit the schemes in Theme settings > Colors. |
Section subheading | Adds a short line above the heading. |
Section heading | Adds the section title. |
Section description | Adds a short text below the heading. |
Layout
Setting | What it does |
|---|---|
Style | Shows the title below the image (Standard), or on the image over a mask overlay (Card). |
Items per row on desktop | Shows 3, 4, 5, or 6 collections in each row on large screens. Doesn't apply to the Diagonal alignment. |
Items per row on mobile | Shows 1 or 2 collections in each row on mobile. |
Content alignment | Aligns the content Left or Center, or shows the cards in a Diagonal layout. |
Enable carousel on mobile | Turns the cards into a swipeable row on mobile. |
Show navigation on mobile | Shows previous and next arrows on the mobile carousel. Works only when Enable carousel on mobile is selected. |
Remove padding top | Removes the space above the section. |
Remove padding bottom | Removes the space below the section. |
Collection items
Setting | What it does |
|---|---|
Collections | Selects the collections to show, in the order you set. |
Button
Setting | What it does |
|---|---|
Show 'View all' button to view all collections | Shows a button that opens your Collection list page. |
'View all' button label | Sets the button text. |
Prominent badge
Setting | What it does |
|---|---|
Text | Sets the badge text. Leave it empty to hide the badge. |
Accent scheme | Uses the Main or Extra accent color. Appears after you enter a Text. |
Position | Places the badge on the Left or Right. Appears after you enter a Text. |
Shape | Shows the badge as a Star, Diamond, or Asterisk. Appears after you enter a Text. |
Troubleshooting
The section shows sample cards instead of my collections.
No collections are selected. Under Collection items, select your collections.
Changing "Items per row on desktop" does nothing.
This setting doesn't apply when Content alignment is Diagonal. Choose Left or Center.
There are no arrows on mobile.
Select Enable carousel on mobile and Show navigation on mobile.
I want to show the number of products on each card.
Turn on Show product count in Theme settings > Collection card. This changes every collection card in your store.
Related articles
- Blum Featured Collections
- Blum Collection List template
- Blum Collection template
- Blum Icon With Text
- Blum All-Template Sections
Updated on: 23/10/2026
Thank you!