TABLE OF CONTENTS


Modify the Product Grid + Slide


I. General Settings

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


SECTION HEADING

- 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 30px, 10px 30px 50px 20px, 20px 40px 30px 40px - Mobile, Tablet, Desktop (After a comma, the margin will be set for another device)

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

- Heading color


SECTION STYLES

Tick to enable 

  • Boxed layout
  • Show border between collections

- Section margin

- Section padding


THEME SETTINGS

- 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

- 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