# Product grid

<figure><img src="/files/Ddf9I9KQEEZkmF45wYoX" alt=""><figcaption></figcaption></figure>

The **Product grid** section powers the display of your collection’s products. It’s where shoppers browse, filter, and sort items based on their preferences — all with a layout optimized for performance, flexibility, and mobile responsiveness.

## How to navigate to the Product grid

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), open the template selector.
2. Select **Collections**, then **Default collection.**
3. On the left sidebar, locate **Product grid**
4. Make necessary changes **> Save.**
   {% endhint %}

## How to edit a Product grid

### 🔧 General and layout

<table><thead><tr><th width="260">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Products per page</strong></td><td>Set the total number of products shown per page (6-50 products).</td></tr><tr><td><strong>Products per row</strong></td><td>Choose how many products display in each row (2–4 recommended).</td></tr><tr><td><strong>Column gap / Row gap</strong></td><td>Adjust spacing between items.</td></tr><tr><td><strong>Show product count</strong></td><td>Display total number of products.</td></tr></tbody></table>

### 🔍 Filtering and Sorting

Allow your customers to filter collections and search results by product availability, price, color, and more.&#x20;

<figure><img src="/files/X11qw0S3mjnHbz70vsZ9" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="260">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable filtering</strong></td><td>Activate Shopify’s storefront filters.<br>Learn <a href="https://help.shopify.com/manual/online-store/storefront-search/search-and-discovery-filters">how to customize filters</a> </td></tr><tr><td><strong>Enable sorting</strong></td><td>Allow sorting by options like price, newest, best-selling, etc.</td></tr><tr><td><strong>Desktop filter layout</strong></td><td><p>Choose:<br>- Left sidebar:<br><img src="/files/xxaYqmrIpbgWY59M6Msj" alt=""><br><br>- Right sidebar:</p><p><img src="/files/Cy7TjRFym5ZxMEraPUtJ" alt=""><br><br>- Drawer:<br><img src="/files/3jSpvKHvc63W1AJKJ7u9" alt=""></p></td></tr><tr><td><strong>Group collapsible</strong></td><td>Group filters in collapsible dropdowns.<br><img src="/files/wiGJdd15EeLgaDxoCnYw" alt=""></td></tr><tr><td><strong>Default state</strong></td><td>Set filters as <code>Collapsed</code> or <code>Expanded</code> on load.</td></tr><tr><td><strong>Open first group by default</strong></td><td>If checked, the first filter group expands on page load.</td></tr><tr><td><strong>Group heading size</strong></td><td>Choose heading font size (Small, Medium, Large).</td></tr><tr><td><strong>Show results count</strong></td><td>Show how many results match the filters.<br><br><img src="/files/M66OV9cJkWsLr6NBs3SS" alt=""></td></tr><tr><td><strong>Filter color type</strong></td><td>Choose between <code>Inline</code> color swatches or <code>List</code> view.</td></tr></tbody></table>

{% tabs %}
{% tab title="Inline" %}

<figure><img src="/files/83Covi4urYAM0HoEucpD" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="List" %}

<figure><img src="/files/g5N8lmzjz5DaIF8XRW8x" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

<details>

<summary>How to create visual filters</summary>

Filter values can include visual elements such as colors, patterns, or more creative imagery.&#x20;

For example, a *Fabric color* filter can display a small color swatch for each filter value.

To create visuals with your filter values, set up custom data for your store with [metafields](https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions/creating-custom-metafield-definitions) and [metaobjects](https://help.shopify.com/en/manual/custom-data/metaobjects/using-metaobjects). You also need to meet the [requirements](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#visual-filters).

{% hint style="info" %}
Product variant filters will link to more relevant variants on search results and collection pages.
{% endhint %}

#### Now we will start from scratch by defining the [metaobjects](https://help.shopify.com/en/manual/custom-data/metaobjects/using-metaobjects):

1. Go to **Settings** > **Custom data** > Find the **Metaobject definitions** field > Click **Add definition.**

<figure><img src="/files/hzjgnXWMBMTebpFCJg8E" alt=""><figcaption></figcaption></figure>

2. In the **Add metaobject definition** page, give this metaobject a **Name** (Color) and 3 **Fields:**
   * **Single line text** - For the color name (Name).
   * **Color** - For the hex code of the actual color (Hexcode).
   * **File** - For the image of this color (Image).

<figure><img src="/files/8hCoQLKBpfrNGDj4Cra2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
A metaobject definition for a color swatch should have both a color and an image field.&#x20;

You don't need to provide a value for both, but this will give you the option of using either field in the future.
{% endhint %}

3. Click **Save**.

#### Next step, we will create the colors list:

1. In the Shopify admin sidebar, go to the **Content** > **Metaobjects** > In the **Metaobjects** page, select **Color**.

<figure><img src="/files/irw4xEe9a8afhDYc4rLH" alt=""><figcaption></figcaption></figure>

2. Click the **Add entry** button to add a new color. Give the color entry the Name, Color, and Image.&#x20;

<figure><img src="/files/A8LdxB0HBuVLEzS56neM" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note**: You can add many color entries and assign these colors to the products.
{% endhint %}

<figure><img src="/files/769pSntJ1DAdOQ0Uloe6" alt=""><figcaption></figcaption></figure>

3. Click **Save**.&#x20;

#### After that, we are going to create color [metafields](https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions/creating-custom-metafield-definitions) for the products to link to these [metaobjects](https://help.shopify.com/en/manual/custom-data/metaobjects/using-metaobjects) that we've just created above:

1. Go to **Settings** > **Custom data** > In the **Metafield definitions** field, select **Products** > Click **Add definition.**

<figure><img src="/files/vugnlZeA0ECqb9FwKJRD" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/qH7UBpV6yn2sRc5xsvb3" alt=""><figcaption></figcaption></figure>

2. We will define this metafield as **Name**: "Color filter swatch" and **Type**: "Metaobject". In the **Reference** field, select the metaobject you want or you've just created (Color).

{% hint style="info" %}
If your products/ variants have multiple colors you could filter on, set your metafield definition to allow a **List of entries**.&#x20;

This lets you assign multiple metaobject entries to a single item and each one will display as a filter value on your store.
{% endhint %}

<figure><img src="/files/5a95QACsbSBEjk7eAw5f" alt=""><figcaption></figcaption></figure>

3. Click **Save.**

#### Then, we will connect the products to colors:

1. In the Shopify admin sidebar, go to the **Products** > Select the product you want to connect color metafield.
2. In the **Metafields** field, click on the "Color filter swatch" metafield that you've just created above > You will be able to select multiple colors from your list of colors that you defined using metaobjects.

<figure><img src="/files/3Ta6QQbIUeCQFNwgCatO" alt=""><figcaption></figcaption></figure>

3. Click **Save**.

#### After you have assigned your metafield to products or variants in your store, you can set up the filter for your online store:

1. In the  [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app, go to **Filters**.
2. Click **Add filter** or click an existing filter.
3. Click the **Source** field, and then select a metafield filter with a metaobject reference - "Color filter swatch".
4. Click **Display options**.
5. Set the **Label** field for filter values by selecting a metafield.
6. Check **Include visual** and select a visual style:
   * Choose **Swatch** for small color swatches or patterns. Set the swatch content by selecting:
     * A color field for the **Swatch color**.
     * An image field for the **Swatch pattern**.

<figure><img src="/files/5mX1epbULQgdMsMgDBOH" alt=""><figcaption></figcaption></figure>

* Choose **Image** for icons, logos, or other graphics that shouldn't be cropped. Set the content by selecting an image field for the **Image**.

<figure><img src="/files/NZWaiItpg2ZRRSyKkHE1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Tip**

Themes will often prioritize displaying a swatch's image over its color. For swatch displays, if you selected fields for both **Swatch pattern** and **Swatch color**, then the color is typically only displayed when there isn't an available pattern image for the filter value.
{% endhint %}

7. Click **Save**.

</details>

<details>

<summary>How to customize filters</summary>

{% hint style="info" %}
Customizing the filters in your store requires the [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app.&#x20;

The app also allows you to customize search results and product recommendations to give you more control over how customers discover your products.&#x20;

Learn how to [customize filters with the app](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters).
{% endhint %}

1. Go to **Apps** > **Search & Discovery** > **Filters** > **Add filter**

<figure><img src="/files/rj6AjIt36brBD1Vs89Ra" alt=""><figcaption></figcaption></figure>

2. Add or remove filters to show/hide from the storefront filters > **Save** the settings.
3. In the theme editor (**Customize**), open the template selector > Select **Collections** > **Default collection.**
4. On the left-sidebar, locate **Product gird** > Select **Enable filtering** checkbox
5. **Save.**

</details>

### 🔁 Pagination

<figure><img src="/files/eEE89yCpQCA66Paj7y1x" alt=""><figcaption></figcaption></figure>

Enable pagination in 3 ways:

{% tabs %}
{% tab title="Paging by numbers" %}

<figure><img src="/files/IOZ6ifIWnOTYHsUPGWla" alt="Collection page: Paging by numbers example"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Load more button" %}

<figure><img src="/files/4cHatqNqcIdZhzYrLgXm" alt="Collection page: Load more button example"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Infinite scroll" %}

<figure><img src="/files/GdXEqmP4hq3liN8f5SHt" alt="Collection page: Infinite scroll example"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}


---

# Agent Instructions: 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:

```
GET https://docs.foxecom.com/zest-theme/collections-and-products/collection-page/collection-sections/product-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.