Product grid

How to customize your product listing section of 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.

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.

General and layout

  • Control the listing's container type: Fixed width/ Stretched width/ Full width;

  • Set the number of Products per page (6-50 products) and number of Products per row (2-6 products);

  • Adjust the column gap: Extra large/ Large/ Medium/ Small/ Extra small/ No gap;

  • Enable or disable product count.

Filtering and Sorting

Allow your customers to filter collections and search results by product availability, price, color, and more.

  • Enable/disable filter and sort by option;

  • Desktop filter layout: Left sidebar/ Right sidebar/ Drawer;

  • Enable/ Disable Group collapsible;

  • Default state of the Filter groups (when Group collapsible is enabled): Collapsed/ Expanded;

  • Open the first group by default (when the Default state is set as Collapsed);

  • Group heading size: Small/ Medium/ Large;

  • Show results count.

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 Online store > Navigation

  2. Add the filter options that merchants want to display.

3. Make necessary changes.

Pagination

Enable pagination in 3 ways:

Last updated