Modify the Product Grid

Modified on Thu, 18 Feb 2021 at 03:18 PM

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.


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


  • 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

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article