> Section label: this is the section name, you should not change it.

General settings

  • Section margin: insert values in rem unit to set the margin for the whole section following the order: Top Right Bottom Left (Eg: 1rem 0.5rem 0.2rem 0.5rem); add a comma "," to set it for Tablet, Mobile devices (Eg: 1rem 0.5rem 0.2rem 0.5rem, 2.125rem 0 0 00.345rem 0 0 0)  Desktop, Tablet, Mobile respectively 
  • Section paddingdo the same format as section margin until it fits as you expected 
  • Style: Slider/ Grid (Slider option is specifically designed for Mobile interface, in Desktop it is just displayed 3 items)

Heading Section

To custom style. Please add block 'Heading Style'

> Heading: add text to the box 

> Background color: use the color picker to adjust 

Layout Content

  • Max number of items per row: decide how many items are displayed in a row by entering the numbers into the box (after a comma "," is another interface settings Eg: 4,2,1 - Desktop,Tablet,Mobile respectively)
  • Spacing between items: add values to set the item spaces in order of Top Right Bottom Left. Eg: 10px


There are 3 blocks for you to add: Collection, [+] Content wrapper, [+] Heading & Subheading. Clicking on Add block to have more blocks in this section

1. Collection

  • Collection: Select a collection you want to display on this block by clicking on the Select Collection button, choosing an existing one, and press the Select button under. 
  • Image: Click on the Select Image button to choose an existing one from the library or upload your own one from your desktop 

Add texts to these ones:

  • Text 1
  • Text 2
  • Button

2. [+] Heading & Subheading

Drag it under a collection block you want to edit its heading separately or you can drag this block under all the collection blocks to edit all their heading at once. 

Text 1, Text 2

  • Font size: enter a value in rem unit to set the font size for the heading of the text
  • Color: use the color picker to adjust 
  • Font weight: drag to change how bold it gets (0 is auto)
  • Margin: insert values in pixel unit following the order Top Right Bottom Left (Eg: 20px 0 20px 0)
  • Line height: insert a value in pixel unit

3. Heading style

Margin:  insert values in rem unit following the order Top Right Bottom Left (Eg: 20px 0 20px 0)

Alignment: select a option to decide where to place the heading (Left/Right/Center)

Heading settings

  • Text color: use the color picker to adjust
  • Font size: enter values in rem unit to change the font size for the heading
  • Font weight: drag to adjust how bold it is
  • Line height: enter values in pixel unit for the line-height, you will see how it works clearer if it has more lines