Product Grid Customization

To create a new Product Grid, click Add Section > find Product Grid > Click Add button.

TABLE OF CONTENTS

• 1 - Layout
• 2 - Collection settings
• 3 - Slider settings
• 4 - Section heading

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.

How to insert values for your theme.