> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/collections/collection-page.md).
# Collection page
Customize Volume collection pages: combine collection banners with product grids, add subcollections via metafields, and create dynamic category navigation.
In the Volume theme, the **Collection banner** is a standalone section, separate from the product grid. This separation allows for greater flexibility when customizing the appearance of your collection pages.
You can combine the **Collection banner** with the **Product grid** in several ways, depending on your layout preferences and content strategy. Here are a few example configurations:
{% columns %}
{% column width="50%" %}
**Collection banner + Product grid**
{% endcolumn %}
{% column width="50%" %}
**Subcollection banners + Product grid**
{% endcolumn %}
{% endcolumns %}
{% columns %}
{% column width="50%" %}
**Collection banner vertical + Product grid**
{% endcolumn %}
{% column width="50%" %}
**Product grid only**
{% endcolumn %}
{% endcolumns %}
{% columns %}
{% column width="50%" %}
**Collection banner with subcollections + Product grid**
{% endcolumn %}
{% column width="50%" %}
{% endcolumn %}
{% endcolumns %}
### **Related or subcollections**
Adding related or subcollections to large collections helps users narrow down their search and discover more relevant products faster. This approach improves product discovery and overall user experience, especially when a parent collection contains a wide variety of items. Instead of forcing users to scroll through dozens of products, you can guide them toward more specific categories that match their intent.
Subcollections are displayed as a horizontal slider and can be added in two ways:
* As part of the **Collection banner** section
* As a standalone **Subcollection banners** section (if you prefer not to display a collection image)
**To make this setup dynamic**—so that each collection displays its own relevant subcollections—you’ll need to create and connect a metafield.
{% stepper %}
{% step %}
### **Step 1: Create a metafield for collections**
1. Go to **Settings** → **Metafields and metaobjects** → **Collections**
2. Click **Add definition** and fill in the fields:
* **Name**: Subcollections
* **Namespace and key**: custom.subcollections
* **Type**: Collection
* Enable **List of collections**
3. Click **Save**
{% endstep %}
{% step %}
### **Step 2: Bulk assign subcollections**
1. Go to **Products** → **Collections**
2. Select all collections and click **Bulk edit**
3. Open **Columns**, add **Metafields → Subcollections**, and hide any unnecessary fields
4. Assign subcollections to each collection as needed
{% endstep %}
{% step %}
### **Step 3: Connect dynamic sources**
1. Open the **Collection banner** or **Subcollection banners** section in the theme editor
2. Click the **dynamic source icon** next to the **Collections** field
3. Choose **Template → Collection → Subcollections**
4. Save your changes
{% endstep %}
{% endstepper %}
---
# 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/volume-themes/collections/collection-page.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
