Product Grid

In the below screenshot, the product grid section is shown on a store’s Collection page. Inside the section, the checkbox options are set to Enable filtering and Enable sorting.

With these options enable visitors can select a range of products within a collection by using filtering criteria like availability, size, and price.

Settings
Description

Products per page

"Products per page" is to specify how many products to show in this page. You can show a minimum of “8” and a maximum of “24” products.

Number of columns on desktop

"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “2” and a maximum of “4” products.

Show default color

Product card Enable checkbox for show Show default color in Product card.

Custom color

This feature works when "Show default color" is false. Quick view background color You can modify the background color for the Quick view.

Quick view foreground color You can modify the text color of the quick view.

Spacing around quick view on desktop

"Spacing around quick view" is to specify how many space around quick view on desktop. You can set a minimum of “0px” and a maximum of “10px” spacing.

Filtering and sorting

Enable filtering By enabling this checkbox you can display the “Product filter”.

Desktop filter layout

Product filter layout customizations in a page are as follows:

  • Horizontal

  • Vertical

  • Drawer

Enable sorting By enabling this checkbox you can display the “sorting select box”.

Offer banner

Show offer banner By enabling this checkbox you can display the “offer banne”. Banner image Use "Banner Image" to add the image to the section. Subheading Enter the text you would like to display as a subtitle above the title.

Heading Enter text to display as a title in the section. Button label

Use "Button label" to add a label to the Button in the section. Button link Use "Button link" to add a link to the Button in the section.

Button style

Customization of the "Button style" in this is as follows:

  • Link

  • Outline button

  • Solid button

Show container When "Show container" is enabled, the content container box will be visible.

Color scheme

In this section, you can change the background and foreground colo

  • Accent 1

  • Accent 2

  • Accent 3

  • Background 1

  • Background 2

Mobile layout

Number of columns on mobile

"Number of columns on mobile" is used for the customization of product columns in Mobile devices.

  • 1 Column

  • 2 Columns

Product-list description

By enabling this checkbox you can display the “Product-list description”.

Last updated