Product grid

How to edit the product listing in 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, add Product grid.

4. Make necessary changes > Save.

General settings

• Width - With of this section 3 options : Container / Stretched / Full width

• Products per page - Set the number of Products per page

• Products per row (desktop) - the number of Products per row

• Column gap - None / Small / Medium / Large

• Pagination type - Page numbers / Loadmore button / Infinite scroll

Filtering and sorting

• Filter type - Vertical / Drawer ( Drawer is the default mobile layout. )

Vertical

Drawer

• Enable filtering - When enabled, it will display the configured filter options, allowing you to filter products. Customize filters with the Search & Discovery app. Learn more

• Enable sorting - When enabled, it will display sorting options for arranging products

• Show filter values count - Display the quantity in filter

• Show product count - Display the quantity of products when filtering

• Collapsible state - Expanded / Collapsed

• Show color swatches - You can config color swatches

• Filter color type - Inline / List

Mobile Layout

• Products per row (mobile)

Section padding

• Top padding

• Bottom padding