# Product grid

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. {% 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 %} ## General and layout Set the number of **Products per page** (8-36 products) and the **Number of columns on desktop** (1-6 products);

Provide the Product grid with an appealing and appropriate **Grid layout**: * Standard * Grid mix

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

{% endtab %} {% tab title="Grid mix" %}

{% endtab %} {% endtabs %} Moreover, you can also enable **Pagination** in 3 ways: {% tabs %} {% tab title="Pagination by number" %}

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

{% endtab %} {% tab title="Infinite" %}

{% endtab %} {% endtabs %} ## Filtering and Sorting Allow your customers to filter collections and search results by product availability, price, color, and more.

This section allows you to **Enable filtering** for the collection. You can customize filters with the **Search & Discovery** app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/filters)

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

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

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

{% endtab %} {% tab title="Drawer" %}

{% endtab %} {% endtabs %} If you want the color filter to display as color swatches instead of text swatches, simply **Enable color swatches** for the filters.

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

### 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. The app also allows you to customize search results and product recommendations to give you more control over how customers discover your products. Learn how to [customize filters with the app](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters). {% endhint %} 1. Go to **Online store > Navigation** 2. Click **Add** and install the [**Shopify Search & Discovery**](https://apps.shopify.com/search-and-discovery) app for your store

3. Go to **Apps** > **Search & Discovery** > **Filters** > **Edit filters**

4. Add or remove filters to show/hide from the storefront filters > **Save** the settings. 5. In the theme editor (**Customize**), open the template selector > Select **Collections** > **Default collection.** 6. On the left-sidebar, locate **Product listing** > Select **Enable filtering** checkbox 7. **Save** ## Mobile Layout You can adjust the **Number of columns on mobile** to **1 column** or **2 columns.**

***