Main collection

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 Main collection.

4. Make necessary changes > Save.

Layout

Number

Infinite

Load more

• Products per page: Set how many products are displayed on each page.

• Pagination type: Select one of three pagination styles:

Number

Tab 2

Untitled

• Horizontal gap / Vertical gap: Adjust the spacing between product cards in the grid layout.

Filtering & 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

You can also Enable sorting on the collection.

If you want to switch the grid layout more easily, turn on Grid layout control.

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

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 the Shopify admin dashboard.

2. Click Apps and install the Shopify Search & Discovery app for your store

1. After the app is installed, open Search & Discovery > Filters > Edit filters

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

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

3. On the left-sidebar, locate Product listing > Select Enable filtering checkbox

4. Save

Mobile layout

Horizontal gap and Vertical gap allow you to adjust the spacing between product cards, specifically for mobile view.