> 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
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 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://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 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.