Modify the Product Grid

Firstly, you need to create a new block by clicking the Add content button > Product Grid then start adjusting your content.

You can choose Product Grid v2 for more flexible customization.

TABLE OF CONTENTS

• 1 - Layout Settings
• 2 - Content Settings
  • Section titles
  • Display items
  • Special item

1 - Layout Settings

Tick off the boxes to activate/enable the features below:

• Boxed layout: Add a padding around whole section
• Padding items: Add a padding around a product
• Border for the main price
• Carousel layout (slider)

Special settings for your Carousel

• Carousel - 2 rows layout: A slider with 02 rows display. Only works when the Carousel option above is on
• Center mode: Unique effect for the center item
• Auto play mode: Auto switching items one by one
• Enable loop
• Show Next & Prev arrows: Left & right arrows
• Dots: Small dots which represent the number of available pages
• Smooth auto play mode: This option does not work when the Center mode is activated

2 - Content Settings

Section titles

Including

• Heading
• Subheading
• Countdown clock: Insert the value in order of MM/DD/YYYY
• Tick off the check box to show View All button at the top right corner of the current section

Display items

• Section's main content will be taken from the chosen collection.
• To set the items per row for different types of devices, please insert the values in order of desktop - tablet - mobile and separate them using commas.
• Total items number is the maximum quantity of products in the whole section.

Special item

Big product & Big image: Choose an item which you want to catch more attention with a bigger display

• Position: First/ last or middle (not for carousel layout)
• Image width on desktop and mobile can be adjusted using the related fields and they only work with Row layout
• Image height: Auto - normal, Fill  - cropped to fit the space