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 : Boxed / Wide / Full

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

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

• Column gap ⇒ Spacing each column

• Row gap ⇒ Spacing each row

• 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

• Show view mode ⇒ 2 / 3 / 4 columns

• Collapsible state - Expanded / Collapsed

• Show color swatches - You can config color swatches

• Filter color type - Inline / List

• Show block style

• Matching block names ⇒ Define block name to which the block will apply styles.

• Heading size filter block

• Enable bold heading

Mobile Layout

• Products per row (mobile)

Colors

• Background

• Text

• Border

Section padding

• Top padding

• Bottom padding

Block settings

Steps:

1. Locate Product grid

2. Add Promotion

3. Make necessary changes. > Save.