Product Grid V2 & V3 Customization

Modified on Tue, 29 Dec 2020 at 11:51 AM

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
II. Product Grid V2
- Special item
III. Product Grid V3
- 1 - Banner
- 2 - Banner with product

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

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

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.