TABLE OF CONTENTS

• 1. Menu Trigger 
• 2. Menu
• 3. Group Content
• 4. Spacing
• 5. Product
• 6. Banner
• 7. Collection
• 8. Banner + Content
• 9. Promotion

Modify the Mega Menu

1. Menu Trigger 

- Mega trigger title: give this menu item a name (Eg: Pages)

- Boxed layout: tick to enable

- Min height (in px): add only the number to set the heigh for this menu item (eg: 500)

- Number of item per row: set how many items will be displayed in a row (eg: 1,1,5 - Mobile, Tablet, Desktop respectively). This section is set automatically (when you don't set the width for each item of this menu) and it will be separated equally. Therefore, if you want to separate each item column as you want, you need to modify the width at its own block.

Using color picker to modify

- Background color

- Text color

>>> You can view this clip to know clearer

NOTE: if you want to add the content/ items (Product, Collection, Banner, Icon,...) to a specific menu item, you first need to add the Menu Trigger and then leave those blocks under it. 

2. Menu

- Block label: you can give this menu a name to easily identify it later

- Select a menu: select a menu from the available menus or you can create a new one from the Navigation

- Tick to Hide its title

-  Block width: set the width for this block in pixel or % (eg: 100% 50% 90%) (one value is set for all devices. But when you set 3 values or 4, it will be separated for Mobile, Tablet, Desktop respectively) 

>>> View clip to see the details

Note: if the main menu has 4 or 5 menu items, you need to add 4-5 menu blocks and leave it under the Menu trigger.The important thing is you must give each block the exact name as it is in the menu 

For example: the recent menu in the Admin has 8 menu items, you need to add the corresponding blocks and give them the same names with the menu in the admin (only the menu items that have more levels). (Shop, Pages,...)

3. Group Content

- Heading: give the icon a name (Eg: Fruit)

- Icon type: choose a type to display the item (SVG/Image)

- SVG code: paste the SVG code into the box if you choose this type to display 

- Image: If you choose image to display, you need to select the one from the library or upload your own one

- Image max width: if you choose image to display, you can set the width for the image 

Block settings

- Content alignment: type the text (left/ center/ right) to align the content

- Block width: set the width for this block in pixel or %

>>> View the demo clip to know better

4. Spacing

If you want to display 2 or more sections in a menu item, you can add the spacing block to separate the sections for easily viewing

- Border color: using the color picker to adjust

- Margin top: set the margin at top in pixel (Eg: 10px, 20px, 50px - Mobile, Tablet, Desktop respectively)

- Margin bottom

Block settings

- Block width: add the value to the box in pixel or % (Eg: 0, 0, 100% - Mobile, Tablet, Desktop respectively)

>>> View clip to see the details

5. Product

- Select a product: select an available product to display 

BANNER STYLES

- Select a banner: if you want to change the image of the product, you can select or upload your own one

- Select height styles: choose an option to set the ratio for the image

- Manually height: or you can set the height manually if there's no option match your wish

- Crop position: type the text (right/ center/ left) to adjust the background position of the image. For example

- Text color

- Use Heading tag for product title: change the heading style by picking an option

- Add cart button style: choose an option for the cart button (see how to modify the cart button (At the 1. Default button section) for your own in case you don't satisfy with the available ones)

- Block width: set the width for this block in pixel or % (Eg: 100%, 20%, 40% - Mobile, Tablet, Desktop)

>>> View the clip to know the details

6. Banner

- Select a banner: Choose an image from the library or upload your own one to set the banner for the menu item

- Block width

7. Collection

- Select a collection: choose an collection to display

- Sort by: select an option to sort the order of the product displaying in the menu

- Tick to Hide the title

- Limit: to can increase or decrease the number of items displayed 

- Block width

>>> This clip will show you the details

8. Banner + Content

- Select a banner: select or upload an image to set the banner

- Select height styles: select an ratio fo the banner

- Manually height: you can manually set the height for the banner by insert the number in pixel 

- Crop position: this is for you to adjust the position of the background image (reference)

- Text color: use the color picker to adjust 

- Write your content here: insert the text to the box to create the content for the banner

- Adjust font size: add the value in pixel unit to modify the text font size

- Button label: add text to the box to display the button into the banner

- Link: attach a link to the button by paste it into the box

- Button style: select an option to display your favorite button style

-Blok width

>>> See the demo

9. Promotion

- Heading: Insert the text to set the heading for this promotion

- Adjust font size: add value in pixel to adjust

- Text color: change the text color by using the color picker

- Adjust font weight: drag to the right the increase the font weight

PROMOTION

- Discount percent: add only the number to show 

- Adjust font size: for the the discount percent

- Adjust font weight

- Promo content: paste the text with the Liquid format. You can learn how to create the Liquid text here

- Adjust font size: for the Promo content

- Adjust font weight: drag to adjust

- Promo text color

BUTTON

- Button label: add text to display the button

- Link: paste a external link or search it from the available source

- Button style: adjust to choose the button style

- Block width

>>>View the demo