Main collection

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.

#Layout

• Products per page: Set how many products are displayed on each page.
• Pagination type: Select one of three pagination styles:

NumberTab 2Untitled

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

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

1. Go to the Shopify admin dashboard.
2. Click Apps and install the Shopify Search & Discovery app for your store

3. After the app is installed, open 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 (Edit theme), open the template selector > Select Collections > Default collection.
6. On the left sidebar, locate Product listing > Select Enable filtering checkbox
7. Save

#How to set up an image categories filter like the Pebble demo

If you want to create a Categories filter like in our demo, follow the steps below:

#Step 1: Create a Metaobject (Categories)

1. Go to Settings > Metafields and metaobjects.
2. Create a new Metaobject.
3. Name it: Categories (or any name you prefer).
4. Add fields:

• Label → Single line text
• Image → Image (File)

5. Click Add entry at the top.
6. For each entry:
   • Enter the Label of the category
   • Upload the Image you want to display in the filter
7. Click Save.

#Step 2: Create a Metafield

1. Create a new Metafield.
2. Name it: Categories (or any name you want).
3. Type: Select the Metaobject you've created and choose List type instead of One entry.
4. In Category assignments, assign categories to the Categories filter you want.
5. Click Save.

#Step 3: Assign Categories to Products

1. Go to Products > Select a product
2. Scroll to Metafields and find your Categories metafield
3. Add values (T-Shirts, Dress, etc.), then click Save.

👉 Do this for products you want included in the filter.

#Step 4: Add Filter in Search & Discovery App

1. Go to Apps > Search & Discovery.
2. Open Filters, then click Add filter.
3. Select your Categories metafield.
4. Display settings:

• In Manage Values, change “Swatch” > “Image” (Adjust “Include visual”)
• Click Save.