Try Zest freeContact support

Product grid

How to edit your product listing section of the collection template

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

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.

How to create visual filters

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 and metaobjects. You also need to meet the requirements.

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:

  1. Go to Settings > Custom data > Find the Metaobject definitions field > Click Add definition.

  1. 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.

  1. 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.

  1. 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.

  1. Click Save.

After that, we are going to create color metafields for the products to link to these metaobjects that we've just created above:

  1. Go to Settings > Custom data > In the Metafield definitions field, select Products > Click Add definition.

  1. 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.

  1. 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.

  1. 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 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.

  1. Click Save.

How to customize filters

Customizing the filters in your store requires the Shopify Search & 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.

  1. Go to Apps > Search & Discovery > Filters > Add filter

  1. Add or remove filters to show/hide from the storefront filters > Save the settings.

  2. In the theme editor (Customize), open the template selector > Select Collections > Default collection.

  1. On the left-sidebar, locate Product gird > Select Enable filtering checkbox

  2. Save.

🔁 Pagination

Enable pagination in 3 ways:

Collection page: Paging by numbers example

Last updated

Was this helpful?