To create a new Product Grid V2/ V3 section, click Add Section > find Product Grid V2/ V3 > Click Add button.


Compared with the original Product Grid, these two have more unique arrangements.

For the Product Grid V2, you can get a special item to become eye-catching by bringing it to a larger position. With the V3, you can add a special image.


TABLE OF CONTENTS


I. Settings

Except the differences, they have pretty similar settings.


1 - Layout

To modify the section's layout.

  • Boxed layout: Add padding around the main wrapper.
  • Section Padding: Insert values in order of clockwise motion starting from Top padding. 


2 - Layout content

To modify the content layout's arrangement.

  • Column Grid layout:  To divide the position for the contents, insert the values in order of the 1st area - the 2nd area.
  • Column Grid spacing: Add a space between 02 contents.


3 - Collection Settings

To modify the main content of the section.

  • Firstly, insert the Collection to add contents for the product grid.
  • Enable catalog mode: To turn off the Add to cart button.
  • Show low inventory quantity (<30): Inform whether the item is low in stock.
  • Total items: The product quantity in the product grid.
  • Max number of content per row


4 - Section heading

To modify the section heading & subheading.

  • You can add a Heading & Subheading for the Blog Post section or leave it blank.
  • Modify the text Alignment: Auto/ Left/ Right/ Center.
  • Choose Heading & Subheading colors with the color picker.


II. Product Grid V2

Set the special item for the section.


Special item

The elements can be set are:

  • Heading
  • Insert Product item
  • Border color
  • Label display


III. Product Grid V3

Add a banner as a special content


1 - Banner

Banner

  • Insert the Banner image by choosing from the library or upload a new one.
  • Image crop: With an image that is bigger than the section, you can adjust the displaying part.
  • Modify the picture height: Both percent and pixel unit are accepted.


  • Position: Bring your banner to the left/ right.
  • Insert a Heading for the banner.
  • Create a button by inputting the Button label and link it to another page with Button URL.
  • Pick a Button style from preset styles.
  • Sub content
  • You can have SVG icons and texts displayed by filling these fields.


Content wrapper settings

This is used to modify the text block. The elements which can be set are:

  • Text block position
  • Alignment
  • Padding


Heading settings

This is used to modify the heading. The elements which can be set are:

  • Font size & font weight
  • Color
  • Margin
  • Line height


Button settings

This is used to modify the button. The elements which can be set are:

  • Font size & font weight
  • Padding
  • Margin
  • Text & background color


Sub content settings

This is used to modify the Sub content. The elements which can be set are:

  • Font size & font size
  • Color
  • Margin
  • Line height


2 - Banner with product

Banner

  • Insert the Banner image by choosing from the library or upload a new one.
  • Image crop: With an image that is bigger than the section, you can adjust the displaying part.
  • Modify the picture height: Both percent and pixel unit are accepted.
  • Position: Bring your banner to the left/ right.


  • Insert a Heading for the banner.
  • Create a button by inputting the Button label and link it to another page with Button URL.
  • Pick a Button style from preset styles.
  • Product to sell: Add an item to the banner.


Content wrapper settings

This is used to modify the text block. The elements which can be set are:

  • Text block position
  • Alignment
  • Padding


Heading settings

This is used to modify the heading. The elements which can be set are:

  • Font size & font weight
  • Color
  • Margin
  • Line height


Button settings

This is used to modify the button. The elements which can be set are:

  • Font size & font weight
  • Padding
  • Margin
  • Text & background color


Product settings

This is used to modify the price 1 & price 2. The elements which can be set are:

  • Color
  • Font size & font weight
  • Margin
  • Line height



How to insert values for your theme.