> 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/skeleton/getting-started/collection-page.md).

# Setting up the collection page

The collection page is where customers browse a category — it shows a heading, an optional description, filter and sort controls, and the product grid.

## Open the right page in the editor

1. Go to **Online Store → Themes → Customize**.
2. Click the page selector at the top center of the editor (it says "Home page").
3. Choose **Collections → Default collection**.

You'll see one of your collections rendered with the **Collection page** section. Click it in the left panel to open its settings.

## The settings

* **Products per page** (8–48, default 24) — how many products load before pagination kicks in. 24 is a good balance; very long pages feel endless on mobile.
* **Columns on desktop** (2–6, default 4) — 4 columns suits most catalogs; drop to 3 if you want bigger photos, or 2 for an editorial feel.
* **Columns on mobile** — **2** (default) or **1**. Choose 1 only if your photography really carries it.
* **Show collection description** (on by default) — shows the description you wrote on the collection in **Products → Collections**. Great for a sentence of context or SEO copy; turn it off if your descriptions are empty anyway.
* **Enable filtering** (on by default) — shows filter dropdowns (availability, price, and any others you configure). Checking a box applies the filter immediately; the price filter has From/To fields with an Apply button. Active filters appear as removable chips above the grid, with a "clear all" link.
* **Enable sorting** (on by default) — a sort dropdown (best selling, price, newest, and so on). Sorting keeps your active filters.
* **Section style** — top/bottom padding sliders plus optional background and text color overrides for this section only.

## Where do the filters come from?

Skeleton displays whatever filters your store defines. To control them:

1. In your Shopify admin, go to **Online Store → Navigation**.
2. Click **Collection and search filters** (this uses Shopify's free **Search & Discovery** app — install it if prompted).
3. Add or remove filters like Size, Color, Price, Availability.

💡 If the filter dropdowns look empty or missing on your store, it's almost always because no filters are set up in Search & Discovery yet.

## How the product cards look

The cards themselves (image shape, crop vs. no-crop, hover image, quick view + button, sale/sold-out badges) are global settings shared by every grid in the theme. Set them under **Theme settings → Product cards** — full walkthrough in [Theme settings](/sitesbyseth-docs/skeleton/theme-settings.md).

## The breadcrumb

The page shows a small "Home / Collection name" trail automatically. Nothing to configure.

## One template, many collections

The settings you choose here apply to **every** collection, because they all share one template. Any collection you open will use the same grid and filters.

Next: [the product page](/sitesbyseth-docs/skeleton/getting-started/product-page.md) — the most important page in your 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/skeleton/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.