# Product grid

This section improves product discoverability and enhances the shopping experience by offering customization for desktop and mobile layouts.

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

### 1. Section settings:

* **Products per page**: Controls the number of products displayed per page. Options: **8 to 48 products per page**.
* **Number of columns on desktop**: Determines how many products appear in a row on desktop: **2, 3, or 4 columns**.
* **Show product total**: Displays the total number of products in the collection. If **unchecked**, the product count is hidden.
* **Filtering and sorting settings:**
  * **Enable sorting**: Allows customers to **sort** products by options such as: Best selling; Alphabetically, A-Z; Alphabetically, Z-A; Price, low to high; Price, high to low; Date, old to new; Date, new to old.
  * **Enable filters**: Displays filtering options to help customers refine their search.
  * **Open filters by default**: If **enabled**, filter options are expanded by default.
  * **Filters layout**:

{% tabs %}
{% tab title="Sidebar" %}
Filters appear next to the product grid.
{% endtab %}

{% tab title="Drawer" %}
Filters appear in a hidden panel that expands when clicked.
{% endtab %}
{% endtabs %}

* **Product card settings:**
  * **Image ratio:** Adjusts the shape of product images for consistency: *Adapt to image (original size); Portrait; Square.*
  * **Show product rating**: Displays customer star ratings if reviews are enabled.
  * **Show color swatches**: Enables **color swatches** to indicate available product variations.
  * **Enable quick add button**: Allows customers to preview and add items to their cart without leaving the page.
* **Mobile layout:**
  * **Number of columns on mobile**: Select how many products display in a row: 1 product or 2 products.

<details>

<summary>How to set up filters?</summary>

In the Product grid section, customers can filter products based on:

✅ **Availability**

✅ **Price range**

✅ **Product type**

✅ **Vendor**

✅ **Variant options**

By default, the **filter drawer** includes a **price slider** and **Availability** option (screenshot).You can add more filter options with Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery). Steps:

* In the [Shopify Search & Discovery app](https://admin.shopify.com/apps/search-and-discovery), go to **Filters**, and then click **Add filter**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/d86f4875-389c-4476-936b-efb9b5a4cbab/Screenshot%202025-03-12%20at%202.57.44%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* Select a **Source** for the filter options. Sources can be variant options, tags, or metafields.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/3d3cca94-fcf0-43e3-b38f-d4e3ebbe489a/Screenshot%202025-03-12%20at%202.59.57%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* Add a **Filter label** to change the filter group name that appears when filter is opened.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/7e94cd98-b1ab-4578-ac83-11b687fb7a45/Screenshot%202025-03-12%20at%203.02.50%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* Click **Save**.

</details>

### 2. **Promotion image** block settings:

* **Image**: Select an image to promote the **collection**.
* **Position in grid**: Choose where the block appears (1–49).
* **Desktop image width**: Determines how much space the promotion image takes up relative to other product cards in the collection.: 1 column, 2 columns or Full width
* **Text settings:**
  * **Heading**: Enter a title for the promotion (e.g., “Spring Sale” or “New Arrivals”).
  * **Heading size**: Select from *Small, Medium, or Large* font sizes.
  * **Description**: Add supporting text below the heading.
  * **Content position**: Adjust content placement within the image: Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right.
* **Button settings**: Customize the button label, assign link and select button style.
* **Mobile layout:**
  * **Mobile image width**: Control how a **promotion image** appears within the product grid on mobile devices: the image spans **one column** or stretches across **two columns**, occupying the **full width** of the screen.


---

# 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://help.byinspiredlabs.com/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.