Product grid

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.

#General and layout

Set the number of Products per page (8-36 products) and the Number of columns on desktop (1-6 products);

Provide the Product grid with an appealing and appropriate Grid layout:

• Standard
• Grid mix

StandardGrid mix

Moreover, you can also enable Pagination in 3 ways:

Pagination by numberLoad more buttonInfinite

#Filtering and 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. The collection can be sorted by:

• Featured
• Best selling
• Alphabetically, A-Z
• Alphabetically, Z-A
• Price, low to high
• Price, high to low
• Date, old to new
• Date, new to old

There are 2 types of Desktop filter layouts: Vertical and Drawer (Default mobile layout)

VerticalDrawer

If you want the color filter to display as color swatches instead of text swatches, simply Enable color swatches for the filters.

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 Online store > Navigation
2. Click Add and install the Shopify Search & Discovery app for your store

3. Go to Apps > 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 (Customize), open the template selector > Select Collections > Default collection.
6. On the left-sidebar, locate Product listing > Select Enable filtering checkbox
7. Save

#Mobile Layout

You can adjust the Number of columns on mobile to 1 column or 2 columns.