To create a new Product Grid, click Add Section > find Product Grid > Click Add button.
TABLE OF CONTENTS
1 - Layout
- Boxed layout: Add a padding around the main wrapper.
- Section padding: Insert values in order of clockwise motion starting from Top padding.
- Mobile layout: Modify layout for mobile view
- Boxed
- Wide
- Only full right: We recommend using this when the slider option is active.
For this section, you are allowed to make changes on background. It can be filled with a mono color or an image.
- Background color: Choose a color from the color picker to set it as background.
- Background image: Insert an image to set it as background.
After that, you can customize the image as your preference:
- Background image fit:
- Auto
- Cover: Widen the image to cover the section.
- Contain: Widen the image width to fit the section width.
- Background image repeat:
- No repeat
- Repeat: Auto fill the images until they cover all the section's space.
- Repeat X: Repeat the image horizontally.
- Repeat Y: Repeat the image vertically.
- Background image position: With bigger image, you can choose a part of it for background display.
For example: If you want the top left side to be shown up, then pick the "Left Top" option from the drop-down box.
2 - Collection settings
Main content of Product Grid is the collection.
- Get your Collection displayed then you can customize as your preference.
- We have 02 available Layout Style for you to choose.
04 elements' option:
- Enable catalog mode: Turn on to hide the Add to cart button.
- Show Sale percent instead of label
- Show Low inventory quantity (<30)
- Show Short description
Arrange the content's organization:
- Total items: Number of products will show up on the section.
- Max number of content per row: The item quantity on one row.
- Countdown clock: Insert the date in format MM/DD/YYYY and the system will countdown to that date.
3 - Slider settings
There are 04 elements can be set for the slider:
- Enable slider
- Enable loop: Switch slides in a loop.
- Show arrow
- Show dots
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.