> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/getting-started/collection-page.md).

# Collection Page

The collection page is where shoppers browse a whole product line. Reign's version is two sections: a **Collection banner** and the **Product grid**.

## Open the collection template

1. In the theme editor, click the dropdown at the top center
2. Choose **Collections** → **Default collection**
3. The preview loads with one of your real collections so you can see actual products

💡 Changes here apply to *every* collection using the default template. You can create alternate templates later (e.g. a special drop layout) via **⋯** → **Create template** in the dropdown.

## Collection banner

Shows the collection's title, and optionally its description and image (these come from the collection itself — edit them under **Products** → **Collections** in Shopify admin).

| Setting                         | What it does                                           | Default  |
| ------------------------------- | ------------------------------------------------------ | -------- |
| Title and description alignment | Left / Center / Right                                  | Left     |
| Description                     | Show the collection description                        | On       |
| Image                           | Show the collection image as a banner behind the title | Off      |
| Color scheme                    | Background/text colors for the banner area             | Scheme 1 |

💡 Turning **Image** on makes collections feel like campaign pages — but only if every collection has a strong wide image set in admin.

## Product grid

This is the main section. Settings, group by group:

### Grid basics

| Setting           | What it does                           | Default  |
| ----------------- | -------------------------------------- | -------- |
| Products per page | How many load before pagination (8–36) | 16       |
| Columns (desktop) | 1–6 columns                            | 4        |
| Mobile columns    | 1 or 2                                 | 2        |
| Color scheme      | Section colors                         | Scheme 1 |

👉 Streetwear brands with big photography often drop to **3 desktop columns** for larger images.

### Product card

| Setting                     | What it does                                                                                                        | Default       |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------- |
| Image ratio                 | *Adapt to image* keeps your photos' natural shape; *Portrait* and *Square* crop everything uniform                  | Adapt         |
| Image shape                 | Default, Arch, Blob, Chevron left/right, Diamond, Parallelogram, Round — decorative mask shapes                     | Default       |
| Show second image on hover  | Flips to the product's second photo on hover                                                                        | Off           |
| Vendor                      | Shows the brand/vendor name on cards                                                                                | Off           |
| Product rating              | Shows star ratings — requires a reviews app that writes rating metafields                                           | Off           |
| Product card text alignment | Theme default / Left / Center / Right — overrides the global card alignment just for this grid                      | Theme default |
| Quick add                   | *None*, *Standard* (an "Add to cart" button on each card), or *Bulk* (quantity steppers for wholesale-style buying) | None          |

💡 **Quick add: Standard** is the sweet spot for apparel — shoppers pick a size in a popup without leaving the grid. *Bulk* is only for stores where people buy multiples (blanks, wholesale).

⚠️ Keep **Image ratio** consistent with your photography. If your photos are mixed shapes, use *Portrait* or *Square* so the grid doesn't look ragged.

### Filtering and sorting

| Setting       | What it does                                                                                                  | Default    |
| ------------- | ------------------------------------------------------------------------------------------------------------- | ---------- |
| Filters       | Let shoppers filter by availability, price, and any filters you configure                                     | On         |
| Filter layout | *Horizontal* (pills above the grid), *Vertical* (sidebar), *Drawer* (slide-out panel — always used on mobile) | Horizontal |
| Sorting       | Sort dropdown (price, newest, etc.)                                                                           | On         |

👉 Filters are managed with Shopify's free **Search & Discovery** app — that's where you add size/color filters. In Shopify admin: **Apps** → **Search & Discovery** → **Filters**.

### Padding

**Top / Bottom** padding sliders (0–100px) control breathing room around the section. Default 36px.

## Global card styling

The card border, shadow, corner radius, background scheme, and badge position are **global** — set once in **Theme settings** → **Product cards** and **Badges** so cards match everywhere (home, collections, search, related products). See [Theme settings](/sitesbyseth-docs/reign/theme-settings.md#product-cards).

## The collections list page

Your `/collections` page (every collection at once) is the **Collections list page** section — set its heading, sort order (alphabetical, date, product count), image ratio, and columns. See [Sections index](/sitesbyseth-docs/reign/sections.md).

Next: [Set up your product page](/sitesbyseth-docs/reign/getting-started/product-page.md) — the most important page in the store.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/getting-started/collection-page.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.