> ## 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 template

**Theme:** Blum · **Section type:** Template (Collection)

The Collection template controls every collection page in your store. Use it to choose how the collection title, description, and image appear, how many products show per page, and how customers filter and sort products.

> **Note:** The main sections of this template are **Collection header** and **Collection products**. You can hide **Collection header** and **Collection products**, but you can't remove them. You can add, move, or remove any other section on this template.
![Collection page with the collection header and product grid](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/a1-s1_17kccu7.jpg)

**What you can do**
- Open the Collection template
- Show the collection image and choose a header layout
- Set up the product grid and loading method
- Set up filtering and sorting
- See what customers see
- Change the Collection header and Collection products settings
- Fix common problems

---

## Open the Collection template
1. In the theme editor, open the page selector at the top center.
2. Click **Collections** > **Default collection**.
3. Optional: to preview another collection, click **Change** in the left sidebar and select a collection.

> **Tip:** Preview a collection that has an image and a description. This way you can see how every Collection header setting looks.

## Show the collection image and choose a header layout
The **Collection header** shows the collection title, and optionally the collection image and description. You add the image and description to the collection in the Shopify admin, under **Products** > **Collections**.

1. In the left sidebar, click **Collection header**.
2. Under **General**, select **Show collection image** and **Show collection description**.
3. Under **Layout**, select a **Layout**: **Text Left**, **Text Below Image**, or **Text Overlay on Image**.
4. If you chose **Text Overlay on Image**, set the **Overlay opacity** and, optionally, the overlay colors.
5. Optional: select **Enable parallax effect** and choose a **Parallax direction**.
6. Click **Save**.

| Setting | What it does |
| ---- | ---- |
| Layout | Text Left shows the title and description beside the image. Text Below Image shows the image full width with the text under it. Text Overlay on Image shows the text on top of the image, like a banner. Appears only when Show collection image is selected. |
| Enable parallax effect | Moves the image slightly as customers scroll. Appears only with Text Overlay on Image. |
| Parallax direction | Moves the image Vertical, Horizontal, or with a Zoom effect. Appears after you select Enable parallax effect. |

> **Tip:** For **Text Overlay on Image**, use a collection image with a calm area for the text, and raise **Overlay opacity** if the title is hard to read.

## Set up the product grid and loading method
1. In the left sidebar, click **Collection products**.
2. Under **General**, select the **Items per page**: 12, 24, or 36.
3. Select a **Load product methods**: **Pagination** or **Infinite scrolling**.
4. Under **Layout**, choose the card **Style** and the **Items per row on desktop** and **Items per row on mobile**.
5. Click **Save**.

## Set up filtering and sorting
1. In the left sidebar, click **Collection products**.
2. Under **Filter and sort**, select **Enable filter** and **Enable Sort**.
3. Optional: select **Expand all filter options by default**.
4. Select the **Filter and sort layout on large screen**: **Vertical sidebar** or **Horizontal toolbar**.
5. Click **Save**.

> **Note:** You choose which filters appear (for example availability, price, size, or color) in the Shopify **Search & Discovery** app, not in the theme editor.

## What customers see
- **Collection header:** the collection title, with the description and image when they're turned on and added to the collection. With **Text Overlay on Image**, the title and description sit on the image, under a colored overlay.
- **Parallax:** when it's turned on, the header image moves as customers scroll. Customers who turned on reduced motion on their device see a still image.
- **Filters on large screens:** with **Vertical sidebar**, the filters appear in a column beside the products. With **Horizontal toolbar**, customers click **Filter** to open the filters in a drawer.
- **Filters on mobile:** customers tap **Filter** to open the filters in a drawer. Active filters appear as tags above the products. Customers remove a tag with **×** or clear all filters with **Clear all**.
- **Sorting and count:** the number of products appears next to the sort menu. Customers can sort by the options Shopify provides, such as price or best selling.
- **Loading more products:** with **Pagination**, page numbers appear below the grid. With **Infinite scrolling**, the next products load automatically when customers reach the bottom of the grid.
![Filters in a vertical sidebar with active filter tags above the products](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/a1-s2_1ry8kx9.png)

## Settings reference
### Collection header: General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. Edit the schemes in Theme settings > Colors. |
| Show collection image | Shows the image you added to the collection in the Shopify admin. |
| Show collection description | Shows the description you added to the collection in the Shopify admin. |

### Collection header: Layout
| Setting | What it does |
| ---- | ---- |
| Layout | Places the text Left of the image, Below the image, or as an Overlay on the image. See "Show the collection image and choose a header layout" above. Appears only when Show collection image is selected. |
| Overlay opacity | Sets how dark the overlay on the image is, from 0 % to 90 %. Appears only with Text Overlay on Image. |
| Custom mask overlay color | Sets the color of the overlay on the image. Appears only with Text Overlay on Image. |
| Custom content overlay color | Sets the color of the title and description on the image. Appears only with Text Overlay on Image. |
| Enable parallax effect | Moves the image as customers scroll. Appears only with Text Overlay on Image. |
| Parallax direction | Sets the movement to Vertical, Horizontal, or Zoom. Appears after you select Enable parallax effect. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Collection products: General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. |
| Items per page | Shows 12, 24, or 36 products on each page. |
| Load product methods | Shows page numbers below the grid (Pagination), or loads more products as customers scroll (Infinite scrolling). |

### Collection products: Layout
| Setting | What it does |
| ---- | ---- |
| Style | Standard shows the product details below the image. Card shows them on the image, over a mask overlay. |
| Items per row on desktop | Shows 3, 4, 5, or 6 products in each row on large screens. |
| Items per row on mobile | Shows 1 or 2 products in each row on mobile. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Collection products: Filter and sort
| Setting | What it does |
| ---- | ---- |
| Enable filter | Shows the filters. Set up the filters in the Shopify Search & Discovery app. |
| Expand all filter options by default | Opens every filter group when the page loads, so customers see all options without clicking. |
| Enable Sort | Shows the sort menu. |
| Filter and sort layout on large screen | Shows the filters in a Vertical sidebar beside the products, or in a Horizontal toolbar above them. |

The product card details (image ratio, vendor, badges, quick shop) come from Theme settings > Product card.

## Troubleshooting
**The collection image doesn't appear.**
Check that **Show collection image** is selected in **Collection header**, and that the collection has an image in the Shopify admin under **Products** > **Collections**.

**I can't find the Layout setting.**
**Layout** appears only when **Show collection image** is selected. The overlay colors and parallax settings appear only when **Layout** is **Text Overlay on Image**.

**The filters don't appear.**
Select **Enable filter** in **Collection products**. Filters also need to be set up in the Shopify **Search & Discovery** app, and they don't appear on an empty collection.

**I want to change the vendor, badges, or image shape on product cards.**
These come from **Theme settings** > **Product card**, so they change on every product grid in your store.

## Related articles
- [Blum Product Card](https://doc.ecomx.co/en/article/blum-product-card-okpp7q/)
- [Blum Collection List template](https://doc.ecomx.co/en/article/blum-collection-list-template-1h0cn0d/)
- [Blum Search Result template & Quick Search](https://doc.ecomx.co/en/article/blum-search-result-template-quick-search-g08dso/)
- [Blum Breadcrumb](https://doc.ecomx.co/en/article/blum-breadcrumb-qfpuyu/)
- [Blum Theme Settings](https://doc.ecomx.co/en/article/blum-theme-settings-1esrmj4/)