> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/page-templates/collection-page/collection-template.md).

# Collection template

## Collection page

The Collection page is where your customers browse and discover products. It has two jobs: show them a compelling header area that sets the tone for the collection, and present products in a clean, filterable grid that's easy to navigate.

The Collection page is built from two private sections that work together:

* **Page Header** — a customizable area at the top showing the collection title, description, and optional image or video
* **Collection Listing** — the main product grid with sorting, filtering, and pagination

***

### What you can customize

* **Header** — show or hide the collection title, description, and product count
* **Collection cover** — display the collection's cover image or video as a backdrop
* **Filtering layout** — choose between a sidebar filter panel or a horizontal top filter bar
* **Product grid** — control how many products appear per row and how much space sits between them
* **Color and background** — apply a custom color scheme or background to each section
* **Spacing** — customize padding around each section for desktop and mobile

***

### How to access this template

1. In the **Theme Editor (Customize)**, click the **template selector** (dropdown at the top).
2. Select **Collections** → choose a collection or create a new template.
3. The page editor will show both sections: **Page Header** and **Collection**.

> **💡 Tip:** To customize a specific collection, go to **Store Admin** → **Collections** → select a collection → **Theme** → click **Customize**. Changes you make there will only apply to that collection.

***

### Page overview

| Area                    | What customers see                                                                              | Why it matters                                                                                                       |
| ----------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| **Page Header**         | Collection title, description, and optional cover image or video — creates the first impression | A strong header sets expectations, builds brand feel, and helps customers orient themselves within your store.       |
| **Filtering & Sorting** | Sidebar or top-bar filter controls, plus a sort dropdown                                        | Helps customers narrow down products by type, price, or other attribute — reducing bounce and increasing conversion. |
| **Product Grid**        | Product cards in a responsive grid — images, titles, prices                                     | The core shopping area. Card layout, image ratio, and spacing all affect how quickly customers can scan and decide.  |
| **Pagination**          | Navigation at the bottom to load more products                                                  | Prevents information overload and keeps page load times fast.                                                        |

***

### Sections

#### Page Header

This section sits at the top of your collection page. It shows the collection's title, optional description, product count, and an optional background image or video.

***

**Section settings**

**Container width**

Controls the maximum width of the header area. A narrower container keeps the content focused; a wider one gives you more breathing room.

**Options:** *Inherit / Full width / Standard / Wide / Narrow*

**Default:** *Inherit*

> **📌 Note:** On mobile, the header is always full width regardless of this setting.

**Content — Show breadcrumbs**

When enabled, displays a small navigation trail above the title (e.g., *Home > Collections > Dresses*) so customers always know where they are.

**Default:** *Enabled*

**Content — Show count**

When enabled, displays the total number of products in the collection (e.g., "24 products") below the heading.

**Default:** *Enabled*

**Content — Show description**

When enabled, displays the collection's description text below the heading. The description comes from the text you add in **Store Admin** → **Collections** → select your collection.

**Default:** *Enabled*

> **💡 Tip:** Keep the description short (1–2 sentences) for collections with many products. Long descriptions push the product grid further down the page.

**Style — Show collection image**

When enabled, the collection's cover image (set in **Store Admin** → **Collections** → your collection → Cover image) appears as the background of the header.

**Default:** *Disabled*

**Style — Inherit color scheme**

When enabled, the header uses your theme's default color scheme.

**Default:** *Enabled*

**Color Scheme** — When Inherit color scheme is disabled, pick a color scheme. This applies a complete color palette to the header area.

**Default:** *Scheme 1*

**Style — Custom background**

Enable to add a custom color or media background to the header. Hidden when **Show collection image** is enabled.

**Default:** *Disabled*

**Background** — When Custom background is enabled:

* *None* — No custom background
* *Color* — A solid color behind the header
* *Media* — An image or video behind the header

**Default:** *None*

**Color style** — When Background is Color:

* *Solid* — A single flat color
* *Gradient* — A two-color gradient

**Color code** — The actual color value for the selected style.

**Default:** *Solid — #ffffff*

**Media type** — When Background is Media:

* *Image* — Upload a static image
* *Video* — Upload a video (MP4 or hosted video URL)

**Default:** *Image*

**Media overlay** — Add a semi-transparent layer over the image or video to improve text readability.

**Default:** *Disabled*

**Overlay style** — When Media overlay is enabled: *Solid* or *Gradient*

**Overlay color** — The overlay color. For solid overlays, use an alpha-transparent color (e.g., `#00000033`) for best results.

**Enable parallax effect** — When enabled, the background image or video moves slightly as the customer scrolls — creating a subtle sense of depth.

**Default:** *Disabled*

> **⚠️ Warning:** Parallax can affect performance on mobile devices. Test thoroughly on real devices before enabling it on your live store.

**Spacing**

**Padding** — Toggle to enable custom padding values around the header.

**Default:** *Disabled*

**Top / Bottom / Left / Right** — Padding from 0 to 200px in 2px steps.

**Defaults:** *Top 60px, Bottom 60px, Left 32px, Right 32px*

**Custom on mobile** — Enable different padding values for mobile devices.

**Default:** *Disabled*

**Mobile Top / Bottom / Left / Right** — Padding from 0 to 100px.

**Defaults:** *Top 24px, Bottom 24px, Left 16px, Right 16px*

***

#### Collection Listing

This is the main section of your collection page — it displays all products in a responsive grid with filtering, sorting, and pagination.

***

**Section settings**

**General — Products per page**

Controls how many product cards appear before pagination kicks in. Higher values show more products at once; lower values keep each page fast and focused.

**Range:** *3* to *30*

**Default:** *14*

> **💡 Tip:** 14–16 products per page is a good balance for most stores. If your product cards are information-rich (many variants, badges, etc.), fewer per page keeps the layout clean.

**Layout — Invisible mode**

When enabled, removes the section's background and padding so the product grid sits directly on your page background — creating a seamless, modern look.

**Default:** *Disabled*

**Layout — Container width**

Controls the maximum width of the product grid area.

**Options:** *Inherit / Full width / Standard / Wide / Narrow*

**Default:** *Inherit*

***

**Inner content layout — Gap**

Controls the spacing between product cards in the grid. Tight spacing creates a denser look; wider spacing lets each product breathe.

**Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom*

**Default:** *Default*

**Custom gap** — When Gap is set to Custom, enter a value from 0 to 200px.

**Default:** *4px*

**Custom on mobile** — Enable different gap values for mobile.

**Default:** *Disabled*

**Mobile Gap** — Gap options for mobile.

**Default:** *Default*

**Mobile Custom gap** — Custom gap value for mobile, from 0 to 200px.

**Default:** *4px*

> **💡 Tip:** On mobile, a gap of 8–16px often looks cleaner than the default, which may be too tight on narrow screens.

***

**Style & Background**

**Inherit color scheme** — When enabled, uses your theme's default color scheme.

**Default:** *Enabled*

**Color Scheme** — When Inherit color scheme is disabled, pick a color scheme.

**Default:** *Scheme 1*

**Custom background** — Enable to add a color background behind the product grid. Hidden when Invisible mode is enabled.

**Default:** *Disabled*

**Background** — When Custom background is enabled: *None* or *Color*

**Color style** — When Background is Color: *Solid* or *Gradient*

**Color code** — The actual color values.

**Default:** *Solid — #ffffff*

***

**Spacing**

**Padding** — Enable custom padding around the product grid section.

**Default:** *Disabled*

**Top / Bottom / Left / Right** — Padding from 0 to 200px in 2px steps.

**Default:** *0px*

**Custom on mobile** — Enable mobile-specific padding.

**Default:** *Disabled*

**Mobile Top / Bottom / Left / Right** — Padding from 0 to 100px.

**Default:** *0px*

***

**Available blocks**

The Collection Listing section uses fixed private blocks — these are pre-configured and cannot be replaced:

| Block                                       | What it does                                              |
| ------------------------------------------- | --------------------------------------------------------- |
| **\_blck\_filter\_sorting**                 | Displays filter controls and a sort dropdown for products |
| **\_blck\_collection\_page\_product\_grid** | Renders the product card grid                             |
| **\_blck\_page\_pagination**                | Displays pagination controls at the bottom of the grid    |

***

### Tips & best practices

> **💡 Tip:** Use a **Narrow** container width for collections with detailed product information (lots of variants, size guides, etc.). This keeps text line lengths readable and focused.

> **💡 Tip:** If your collection has a lot of products (100+), use the **Sidebar** filter layout on desktop. Horizontal filters on desktop take up valuable screen real estate and can make the filter bar feel cluttered.

> **💡 Tip:** Enable **Show collection image** with a strong cover photo — it sets the mood and creates a much more memorable impression than a plain colored header.

> **⚠️ Warning:** If your collection has hundreds of tagged products, placing all of them in a single collection page can slow down load times. Consider splitting products into sub-collections or using Shopify's smart collections to segment by tag.

***

### Common questions

**Q: How do I add more content below the product grid?**

A: Below the built-in Collection section, you can use **Add section** to insert any Custom Section — such as a promotional banner, brand story section, or related collections row.

**Q: Can I change the number of product columns on desktop?**

A: Yes — this is controlled by the product card block settings, which you can access in **Theme settings** → **Products**. Changes there affect all product grids across your store.

**Q: How do I add the collection image as a background?**

A: Go to **Store Admin** → **Collections** → select your collection → **Cover image** — upload an image. Then in the Theme Editor, enable **Show collection image** in the Page Header section.

***

### Related pages

* Global Theme Settings — configure default container widths and brand settings
* Custom Section guide — add custom sections to your collection page
* Product Page Template — where customers go after selecting a product
* Highlight Features — understand the bento grid system behind the scenes