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.