> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/edge-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://oranthemes.gitbook.io/edge-theme/collections-and-products-pages/collection-page/product-grid.md).

# Product grid

How to edit the product listing in the collection template.

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="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FGqIqq5A0oxlt8MEAxiFG%2F2025-04-05_12-50-09.jpg?alt=media&amp;token=197f95c5-c4c6-4696-8aa2-b86fb9847e4f" 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, add **Product grid.**
4. Make necessary changes > **Save.**
   {% endhint %}

## General settings

<div><figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FGlxuLgaU7ARlHZiP9kUD%2F2025-04-05_12-54-59.jpg?alt=media&amp;token=47b86db5-54c6-4406-9ca5-8870c1adbe08" alt=""><figcaption></figcaption></figure> <figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FT88AVg62dIaKE88X4Kij%2F2025-04-05_12-55-24.jpg?alt=media&amp;token=81a74342-b436-4409-9dee-1f38d5ea299c" alt=""><figcaption></figcaption></figure></div>

* **Width** - With of this section 3 options : Boxed / Wide / Full
* **Products per page** - Set the number of Products per page
* **Products per row (desktop)** - the number of Products per row
* **Column gap ⇒** Spacing each column
* **Row gap ⇒** Spacing each row
* **Pagination type** - Page numbers / Loadmore button / Infinite scroll

### Filtering and sorting

* Filter type - Vertical / Drawer ( Drawer is the default mobile layout. )

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

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FGqIqq5A0oxlt8MEAxiFG%2F2025-04-05_12-50-09.jpg?alt=media&amp;token=197f95c5-c4c6-4696-8aa2-b86fb9847e4f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drawer" %}

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FNdW9ZEVcwlHXNRmoxMMw%2F2025-04-05_12-57-02.jpg?alt=media&amp;token=8bdb565a-e57a-4c6a-9da1-3c3d18ceb747" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Enable filtering**  - When enabled, it will display the configured filter options, allowing you to filter products. Customize filters with the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/filters)
* **Enable sorting** - When enabled, it will display sorting options for arranging products
* **Show filter values count** - Display the quantity in filter&#x20;
* **Show product count** - Display the quantity of products when filtering
* **Show view mode ⇒** 2 / 3 / 4 columns
* **Collapsible state** -  Expanded / Collapsed
* **Show color swatches** - You can config  [color swatches](/edge-theme/theme-settings/color-swatch.md)
* **Filter color type** - Inline / List
* **Show block style**
* **Matching block names** ⇒ Define block name to which the block will apply styles.
* **Heading size filter block**&#x20;
* **Enable bold heading**

### Mobile Layout

* Products per row (mobile)&#x20;

### Colors

* Background
* Text
* Border

### Section padding

* Top padding
* Bottom padding

## Block settings

{% hint style="success" %}
Steps:

1. Locate **Product grid**
2. **Add Promotion**
3. Make necessary changes. > **Save.**
   {% endhint %}

<div><figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FJ3PcfLT2vHEiQ4k19jZg%2F2025-04-05_13-01-54.jpg?alt=media&amp;token=875f6ccd-d9f9-473a-aee2-e4420da00980" alt=""><figcaption></figcaption></figure> <figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FpB4dOdEUfPZlR1ZBxE9C%2F2025-04-05_13-02-17.jpg?alt=media&amp;token=0f337bf0-05be-44ef-a8a6-1e18a64ec85a" alt=""><figcaption></figcaption></figure></div>