# Product grid

{% embed url="<https://youtu.be/aAQRA3FuerM/>" %}

This article guides you on how to customize and show a list of products based on a category in a grid view on your collection page.

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

{% 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 %}

<figure><img src="/files/6RW1JWuKNf9ovVFLkLXc" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

## General and layout

Set the number of **Products per page** (8-36 products) and the **Number of columns on desktop** (1-6 products);

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

{% tabs %}
{% tab title="Pagination by number" %}

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

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

<figure><img src="/files/4M37ksRKy8UtPV2UuAsu" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Infinite" %}

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

## Filtering and Sorting

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

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

This section allows you to **Enable filtering** for the collection.&#x20;

[You can customize filters with the **Search & Discovery** app. ](#how-to-customize-filters)

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

You can also **Enable sorting** on the collection. The collection can be sorted by:

* Featured
* Best selling
* Alphabetically, A-Z
* Alphabetically, Z-A
* Price, low to high
* Price, high to low
* Date, old to new
* Date, new to old

{% hint style="info" %}
Change the **default sorting** of the collection in Shopify admin > **Collections**.

![](/files/NG6K9AU0mTAGBbJwecVs)
{% endhint %}

There are 2 types of **Desktop filter layout**s: Vertical and Drawer (Default mobile layout)<br>

<figure><img src="/files/2sjeVoU5SDu5hvR6zBFj" alt=""><figcaption></figcaption></figure>

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

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

{% tab title="Drawer" %}

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

If you want the filter groups to open/expand automatically when accessing the collection page, you can insert the group filter name into the **Expand filter groups** field, and each group filter is separated by a comma. Exam: Price, Color, Size

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

### How to customize filters

{% 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).

Learn about [Filters considerations](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#considerations).
{% endhint %}

1. Go to **Apps > Search & Discovery.**

{% hint style="info" %}
Make sure you install the [**Shopify Search & Discovery**](https://apps.shopify.com/search-and-discovery) app for your store
{% endhint %}

2. Select **Filters.**

<figure><img src="/files/yxSmjDT2QJUv9Y4Ow3xC" 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 listing** > Select **Enable filtering** checkbox
5. **Save**

## Mobile Layout

You can adjust the **Number of columns on mobile** to **1 column** or **2 columns.**

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

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

## Add an Image card to your Product grid

An image card between your product grid is perfect for calling out promos or collections visually.

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

### Image settings

* **Image position**: Defines which spot the image card appears in (e.g. `1` shows it before the first product).

{% hint style="info" %}
Make sure the number is **less than or equal** to the total number of products displayed per page.

Change the **Products per page** in **Product grid** section settings.

![](/files/aZr8ohVGiOShBVVgIEEG)
{% endhint %}

* **Image**: Add your promotional banner or styled image.
* **Image ratio**: Choose how your image scales (e.g. Adapt to image or Fixed aspect ratio).
* **Image overlay opacity**: Add a dark overlay (0–100%) for better text readability.

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

### Content settings

* **Content position**: Choose where the text/button appears.
* **Content alignment**: Align content left, center, or right.

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

* **Content spacing**: Adjust internal padding around content.
* **Card link**: Where users are taken when they click the image.
* **Subheading**: Optional small text above the heading.
* **Heading**: Main attention-grabbing text.
* **Text**: Add a short description.
* **Button label**: Custom CTA (e.g. “Shop Now”).
* **Button link**: Where the CTA button redirects.


---

# 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/hyper-theme/collections-and-products/collection-page/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.