> 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.md).

# Collection

Customize your collection pages — from the hero header to the product grid, filtering, and pagination.

<figure><img src="https://193928255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9PfGmHWEt81G4XNeDZqZ%2Fuploads%2Fi2L4b9htyKG46r73bOnv%2FCollection.webp?alt=media&amp;token=ebae5003-ea16-4d57-aea2-9aaf0daa3955" alt=""><figcaption></figcaption></figure>

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

Well-organized collections act as visual catalogs, helping customers find what they are looking for without feeling overwhelmed.

The Collection page is built from two primary sections:

* **Page Header** — a customizable hero area at the top showing the collection title, description, and optional imagery.
* **Collection Listing** — the main section containing your product grid, sorting dropdown, filters, and pagination.

***

### What you can customize

* **Header layout** — toggle the title, product count, and description text on or off
* **Rich media backgrounds** — use the collection's cover image or an uploaded video as an immersive header backdrop
* **Grid density** — control how many products load per page before pagination begins
* **Spacing and alignment** — set the visual spacing between product cards and the width of the main container
* **Color styling** — assign color schemes or custom backgrounds to separate the header from the grid visually

***

### How to access this template

1. In the **Theme Editor (Customize)**, click the **template selector** (the dropdown menu at the top center).
2. Click **Collections** → choose **Default collection** (or any specific custom template you've created).

The page editor will display the two core sections: **Page Header** and **Collection**.

{% hint style="success" icon="lightbulb" %}
**Tip:** By default, changes made here apply to all collections. To give a single collection a different design, create a new template in the Theme Editor and assign it to that collection in your Shopify Admin.
{% endhint %}

***

### Page overview

| Area                    | What customers see                                              | Why it matters                                                                                                    |
| ----------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| **Page Header**         | Collection title, description, and optional cover media         | Creates an immediate visual impression, elevating browsing from a plain list to a curated catalog.                |
| **Filtering & Sorting** | Sidebar or horizontal filter controls alongside a sort dropdown | Helps customers narrow choices by size, color, or price — essential for large catalogs.                           |
| **Product Grid**        | Product cards arranged in rows                                  | The primary shopping area. Card spacing and sizing directly affect how quickly customers can scan your inventory. |
| **Pagination**          | Navigation controls at the bottom of the grid                   | Breaks up large collections for faster page loads and a steady browsing rhythm.                                   |

***

### Sections

#### Page Header

This area sits at the very top of your collection and introduces the products below. You can assign rich media to theme different collections — for example, a winter landscape for a cold-weather apparel collection.

***

**Section settings**

**Container width**

Controls the maximum width of the header's text content. A narrower container prevents your description text from stretching too wide, keeping it easy to read.

**Options:**

* *Inherit* — Matches your global maximum width.
* *Full width* — Stretches the text to the absolute edges.
* *Standard* — Constrains the text to a comfortable, standard reading width.
* *Wide* — Wider than Standard, but keeps margins intact.
* *Narrow* — Pulls the text into a focused, readable column centered on the screen.

{% hint style="info" icon="note-sticky" %}
**Note:** On mobile, the text container is always full width to make use of the limited screen space.
{% endhint %}

**Content**

These toggles control what information is shown in the header.

**Show breadcrumbs** — When enabled, displays a small navigation trail (e.g., *Home > Collections > Shoes*) above the main title, helping customers see where they are on your site.

**Show count** — Displays the total number of products (e.g., "24 products") below the heading. This helps customers understand the scale of the collection.

**Show description** — Pulls the text description you've written in your Shopify Admin and displays it in the header.

{% hint style="success" icon="lightbulb" %}
**Tip:** Keep your collection descriptions brief — 1–2 sentences maximum. Long paragraphs push your products below the fold, forcing customers to scroll before they start shopping.
{% endhint %}

**Style**

Controls the visual backdrop of the header.

**Show collection image** — When enabled, the theme automatically uses the cover image assigned to this collection in your Shopify Admin as a large backdrop behind your text. This is the fastest way to visually distinguish collections from one another.

**Inherit color scheme** — When enabled, the header text adopts your theme's default global colors.

**Color Scheme** — When Inherit is disabled, pick a unique color scheme for the header.

**Custom background** — If you aren't using a collection image, enable this to apply a flat color, gradient, or video behind the text.

**Media overlay** — Adds a semi-transparent layer over your background media. Use this when your background image is busy and makes text hard to read.

**Enable parallax effect** — Makes the background image scroll at a slightly slower speed than the page content, creating a subtle depth effect.

{% hint style="warning" icon="triangle-exclamation" %}
**Warning:** Only enable the parallax effect when you are using high-resolution images. Low-quality images will appear pixelated when stretched during scrolling.
{% endhint %}

**Spacing**

**Padding** — Controls the space above and below the header content. If your header feels cramped, increase the Top and Bottom padding values to give the title more room.

***

#### Collection Listing

This section manages the layout of the product grid below the header. It displays your products alongside sorting and filtering controls.

***

**Section settings**

**General**

**Products per page**

Controls how many product cards appear on screen before the customer reaches pagination.

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

{% hint style="success" icon="lightbulb" %}
**Tip:** A count between 12 and 16 is the sweet spot. Showing 30 products at once can slow page load significantly, especially on mobile connections.
{% endhint %}

**Layout**

**Invisible mode**

When enabled, removes all background colors and boundaries from the grid section. Product cards appear to sit directly on your page background, creating a light, open feel.

**Container width**

Controls the maximum width of the grid. Choosing *Wide* allows you to fit more products in a single row on desktop screens.

**Inner content layout**

**Gap**

Controls the whitespace separating each product card.

* A tight gap (e.g., 4px) creates a compact, dense product grid.
* A wider gap (e.g., 24px) gives each card an elegant boundary — ideal for high-ticket or luxury products.

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

**Custom on mobile**

Enable this to set a different gap spacing for phone screens.

{% hint style="success" icon="lightbulb" %}
**Tip:** On mobile, set your gap much tighter (between 4px and 12px) than your desktop gap to conserve space and keep product cards fully visible.
{% endhint %}

**Style & Background**

If **Invisible mode** is disabled, you can use these settings to wrap the entire collection grid in a colored background.

**Inherit color scheme** — Matches global colors.

**Custom background** — Enable to define a specific solid color or gradient for the grid area.

***

**Available blocks**

The Collection Listing uses three fixed blocks to ensure filtering and sorting work correctly:

| Block                | What it does                                                          |
| -------------------- | --------------------------------------------------------------------- |
| **Filter & sorting** | Displays filter controls (e.g., sort by Best Selling, filter by Size) |
| **Product grid**     | Displays your product cards in order                                  |
| **Pagination**       | Shows page navigation controls at the bottom of the grid              |

***

### Adding more sections

You can add Custom Sections below the collection grid to add extra content — brand stories, shipping FAQs, or promotional banners.

{% hint style="success" icon="lightbulb" %}
**Tip:** Adding an **Image with Text** section below the grid is a great way to explain your brand story or manufacturing process to customers who have browsed all the way through your products.
{% endhint %}