# Product grid
_Ddf9I9KQ.jpg)
The **Product grid** section powers the display of your collection’s products. It’s where shoppers browse, filter, and sort items based on their preferences — all with a layout optimized for performance, flexibility, and mobile responsiveness.
## How to navigate to the Product grid
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.**
## How to edit a Product grid
### 🔧 General and layout
| Setting | Description |
| --- | --- |
| **Products per page** | Set the total number of products shown per page (6-50 products). |
| **Products per row** | Choose how many products display in each row (2–4 recommended). |
| **Column gap / Row gap** | Adjust spacing between items. |
| **Show product count** | Display total number of products. |
### 🔍 Filtering and Sorting
Allow your customers to filter collections and search results by product availability, price, color, and more.
| Setting | Description |
| --- | --- |
| **Enable filtering** | Activate Shopify’s storefront filters.
Learn [how to customize filters](https://help.shopify.com/manual/online-store/storefront-search/search-and-discovery-filters) |
| **Enable sorting** | Allow sorting by options like price, newest, best-selling, etc. |
| **Desktop filter layout** | Choose: - Left sidebar: 
- Right sidebar:
- Drawer:  |
| **Group collapsible** | Group filters in collapsible dropdowns.
|
| **Default state** | Set filters as `Collapsed` or `Expanded` on load. |
| **Open first group by default** | If checked, the first filter group expands on page load. |
| **Group heading size** | Choose heading font size (Small, Medium, Large). |
| **Show results count** | Show how many results match the filters.
 |
| **Filter color type** | Choose between `Inline` color swatches or `List` view. |
Filter values can include visual elements such as colors, patterns, or more creative imagery.
For example, a *Fabric color* filter can display a small color swatch for each filter value.
To create visuals with your filter values, set up custom data for your store with [metafields](https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions/creating-custom-metafield-definitions) and [metaobjects](https://help.shopify.com/en/manual/custom-data/metaobjects/using-metaobjects). You also need to meet the [requirements](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#visual-filters).
Product variant filters will link to more relevant variants on search results and collection pages.
#### Now we will start from scratch by defining the [metaobjects](https://help.shopify.com/en/manual/custom-data/metaobjects/using-metaobjects):
1. Go to **Settings** > **Custom data** > Find the **Metaobject definitions** field > Click **Add definition.**
2. In the **Add metaobject definition** page, give this metaobject a **Name** (Color) and 3 **Fields:**
* **Single line text** - For the color name (Name).
* **Color** - For the hex code of the actual color (Hexcode).
* **File** - For the image of this color (Image).
A metaobject definition for a color swatch should have both a color and an image field.
You don't need to provide a value for both, but this will give you the option of using either field in the future.
3. Click **Save**.
#### Next step, we will create the colors list:
1. In the Shopify admin sidebar, go to the **Content** > **Metaobjects** > In the **Metaobjects** page, select **Color**.
2. Click the **Add entry** button to add a new color. Give the color entry the Name, Color, and Image.
**Note**: You can add many color entries and assign these colors to the products.
3. Click **Save**.
#### After that, we are going to create color [metafields](https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions/creating-custom-metafield-definitions) for the products to link to these [metaobjects](https://help.shopify.com/en/manual/custom-data/metaobjects/using-metaobjects) that we've just created above:
1. Go to **Settings** > **Custom data** > In the **Metafield definitions** field, select **Products** > Click **Add definition.**
2. We will define this metafield as **Name**: "Color filter swatch" and **Type**: "Metaobject". In the **Reference** field, select the metaobject you want or you've just created (Color).
If your products/ variants have multiple colors you could filter on, set your metafield definition to allow a **List of entries**.
This lets you assign multiple metaobject entries to a single item and each one will display as a filter value on your store.
3. Click **Save.**
#### Then, we will connect the products to colors:
1. In the Shopify admin sidebar, go to the **Products** > Select the product you want to connect color metafield.
2. In the **Metafields** field, click on the "Color filter swatch" metafield that you've just created above > You will be able to select multiple colors from your list of colors that you defined using metaobjects.
3. Click **Save**.
#### After you have assigned your metafield to products or variants in your store, you can set up the filter for your online store:
1. In the [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app, go to **Filters**.
2. Click **Add filter** or click an existing filter.
3. Click the **Source** field, and then select a metafield filter with a metaobject reference - "Color filter swatch".
4. Click **Display options**.
5. Set the **Label** field for filter values by selecting a metafield.
6. Check **Include visual** and select a visual style:
* Choose **Swatch** for small color swatches or patterns. Set the swatch content by selecting:
* A color field for the **Swatch color**.
* An image field for the **Swatch pattern**.
* Choose **Image** for icons, logos, or other graphics that shouldn't be cropped. Set the content by selecting an image field for the **Image**.
**Tip**
Themes will often prioritize displaying a swatch's image over its color. For swatch displays, if you selected fields for both **Swatch pattern** and **Swatch color**, then the color is typically only displayed when there isn't an available pattern image for the filter value.
7. Click **Save**.
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).
1. Go to **Apps** > **Search & Discovery** > **Filters** > **Add filter**
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 gird** > Select **Enable filtering** checkbox
5. **Save.**
### 🔁 Pagination
Enable pagination in 3 ways:
