Product Grid + Slide

Modified on Tue, 22 Feb 2022 at 04:32 PM


Modify the Product Grid + Slide

I. General Settings

Go to "Add section" to add the Product Grid + Slide section to Homepage


- Heading: Add text to have the Heading for the whole section

- Heading text alignment: type the position (center/ left/ right) to align the text 

- Margin: set the margin for this whole section following the order: Top Right Bottom Left (Eg: 20px 30px 50px 30px). As always, if you want to set the different section margins for Desktop, Mobile, and Tablet, you just need to add a comma between values. For example, 20px 30px 50px 30px10px 30px 50px 20px20px 40px 30px 40px - MobileTabletDesktop (After a comma, the margin will be set for another device)

Adjust font size: add the number to adjust the font size 

- Heading color


Tick to enable 

  • Boxed layout
  • Show border between collections

- Section margin

- Section padding


- Spacing: add values in pixel to adjust spacing between items (Eg: 20px, 40px - Mobile, Desktop respectively)

- Currency format: choose currency style

- Hover effect: choose a style when you hover over items

- Limit card title line: choose an option to decide how many line displaying on the title

- Image ratio

- Tick to enable the Image cropped 

- Cart button position: choose a position to display the cart button

- Cart button style: type the number into the box or you can use the "up & down" button to 

- Tick to Show Product weight

- Product Review app: choose an option to display review on each product (you need to instal the review app -> you can take the reference at the App integration)

- Enable product qty: Show quick quantity button when added to cart

- Show Sale with percent: this will show the discount percent on the SALE label

>>> Demo clip for general settings

II. Collection block

- Select a collection: select a collection to display on this section. You need to click on the arrow right next to the collection title to edit it. (How to create a new collection, you can view this clip as a reference)

- Sort by: you can set the order of displaying the products based on the option you choose

- Collection title: If you dissatisfy with the original collection name, you can change it by typing another one into the box to replace (Blank to show the original name) 

- Show collection count: this will show a number of items on the collection next to the title
- Max number of item per row: set how many items will be displayed in a row (eg: 1,5 - Mobile, Desktop respectively)

- Limit: type a number to limit the items displayed on this collection

Tick to enable

  • Loop
  • Show next/prev arrows
  • Show dots

- Auto play slide (in second): you can type the number or use up&down button to decide how many second that the slide will switch to the others


- Promotion content: you can add content to the promotion

- Link to: paste an external link or search the available one to attach it to the promotion

>>> Demo clip

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