> 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

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="/files/Vp0XH71753hBlAqmdsh4" 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="/files/r9SyFjgmLliXTxN9NanA" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

<figure><img src="/files/zqVJ4kEMyK3PzgwnfDUG" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

<figure><img src="/files/28Fu9JZ6FpD2JxsaIUtL" 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 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/product-grid-and-filtering.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.