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.



How to insert values for your theme.