> 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/product-grid-and-filtering.md).

# Product Grid & Filtering

Set up the Volume product grid: columns switcher, pagination, drawer/vertical/horizontal filters, and native Shopify color swatches support.

This section controls how products are displayed on collection pages. You can set the number of products shown before pagination, choose a pagination style, enable filtering and sorting, and configure product card appearance. [Learn more about product card settings](/docs/volume-themes/products/product-cards.md)

### **Grid columns switcher**

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FYxTXXF0RUgC0fixbPY2l%2Fgrid-switcher.gif?alt=media&amp;token=3fd8a070-6f4d-4462-bc05-83ea845b8f04" alt=""><figcaption></figcaption></figure>

This feature allows you to define up to three different grid layouts and let customers toggle between them. The selected layout is saved to local storage and remains active while the customer browses within collection templates.

{% hint style="warning" icon="triangle-exclamation" %}
On mobile devices, only the default and preview grids are used. The secondary grid is disabled for mobile to maintain a consistent user experience.
{% endhint %}

To configure the grid switcher:

{% stepper %}
{% step %}

#### Set a default grid layout

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FHYurBm1Fxbeh2fo4uzXv%2Fimage.png?alt=media&amp;token=5cc0e1c1-71dc-4fd9-97ee-cceaade4cfea" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Enable the secondary grid for a wider product view

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FNyepZrx2uchzxLcwJwi7%2Fimage.png?alt=media&amp;token=c79faea7-c878-413b-807f-a581bf9c108b" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Enable the preview grid, which displays product images only

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FJO44QZE1KU0ENdE5s0Xw%2Fimage.png?alt=media&amp;token=8f2f6f7f-0db0-4a8e-9a94-4c2cccb7dd0f" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### Filtering

Choose from three filter layout styles:

* **Drawer**
* **Vertical**
* **Horizontal**

For **Drawer** and **Vertical** styles, you can define which tabs are expanded by default. Use the **Tabs always open** field and enter tab names separated by commas.

#### **Filter configuration**

The Volume theme fully supports native Shopify filters, including color swatches configured via category metafields—no coding required. When properly set up, these swatches appear consistently across product pages, collection filters, and product cards.

You can also configure the display of color swatches created using **Metaobjects**, ensuring consistency in visual filtering.

[Learn how to set up category metafields for color filters](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields#step-two)

[Learn how to use metaobjects for advanced filtering](https://help.shopify.com/en/manual/custom-data/metaobjects)


---

# 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/product-grid-and-filtering.md?ask=<question>&goal=<user_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.