> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/nimbus-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/nimbus-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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FD1dRF3Ee69FJnYAlFGDP%2Fgrid.jpg?alt=media&amp;token=6248de2b-7e77-4469-9853-7dfd6a9f3441" 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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FaHqeCIluOawMcTOILAcb%2Fgrid-1.jpg?alt=media&amp;token=42d351b3-eced-4b54-bbc2-c514c7b626aa" alt=""><figcaption></figcaption></figure> <figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FEINl2RPEeF4uwKJMQZcZ%2Fgrid-2.jpg?alt=media&amp;token=19d637b4-8f51-49ac-b8b7-8b8001923a6b" alt=""><figcaption></figcaption></figure></div>

* **Width** - With of this section 3 options : Container / Stretched / Full width
* **Products per page** - Set the number of Products per page
* **Products per row (desktop)** - the number of Products per row
* **Column gap**  - None / Small / Medium / Large
* **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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FP40Xmm69sio1tIuRkgTH%2Fver.jpg?alt=media&amp;token=a3b39848-e15d-48d0-a370-86a25aec36ba" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drawer" %}

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F787BtKYa6v3mmBZPKGMJ%2Fdr.jpg?alt=media&amp;token=c3aaf076-66ff-4a01-a876-c4aac75a7fdc" 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
* **Collapsible state** -  Expanded / Collapsed
* **Show color swatches** - You can config  [color swatches](/nimbus-theme/theme-settings/color-swatch.md)
* **Filter color type** - Inline / List

### Mobile Layout

* Products per row (mobile)&#x20;

### Section padding

* Top padding
* Bottom padding