> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.
![Collection list section with four collection cards](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/a2-s1_1grudqn.png)

**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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Collection list**.
3. Under **General**, enter a **Section subheading**, **Section heading**, and **Section description**. Leave a field empty to hide it.
4. Under **Collection items**, click **Select collections** and choose the collections to show.
5. 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
1. Under **Layout**, choose a **Style**: **Standard** or **Card**.
2. Choose the **Items per row on desktop** and **Items per row on mobile**.
3. Choose the **Content alignment**: **Left**, **Center**, or **Diagonal**.
4. Optional: select **Enable carousel on mobile**, and then **Show navigation on mobile** to add arrows.
5. 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
1. Under **Button**, select **Show 'View all' button to view all collections**.
2. Enter the **'View all' button label**. The button opens your Collection list page.
3. Optional: under **Prominent badge**, enter a badge **Text**, and then choose its **Accent scheme**, **Position**, and **Shape**.
4. 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.
![Collection list on mobile, one collection per row](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/a2-s2_bepfpe.png)

## 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](https://doc.ecomx.co/en/article/blum-featured-collections-1ioinmx/)
- [Blum Collection List template](https://doc.ecomx.co/en/article/blum-collection-list-template-1h0cn0d/)
- [Blum Collection template](https://doc.ecomx.co/en/article/blum-collection-template-1tog81y/)
- [Blum Icon With Text](https://doc.ecomx.co/en/article/blum-icon-with-text-a8a4ez/)
- [Blum All-Template Sections](https://doc.ecomx.co/en/article/blum-all-template-sections-jwz099/)