Item layout

Text link

By default, the Item layout of all menu items is set as Text link (text only) when first created.
Click "Edit" button (pencil icon) on the menu item to modify it.


Title: enter a title for the menu item. This title will be displayed in the menu.
Disable link: enable this option if you don't want to attach any link to this menu item.
Link: select a link type or enter a website address for an external website (similar to Shopify navigation). To create an email link, use the format mailto:youremail@example.com
Open link in new tab: enable this option to open your menu link in a new tab.
Display as heading menu item: make the menu item bolder and have an underline below.
Item content alignment: align text within column width.
Column width: set the fraction of menu's space this submenu item will take up to
- Automatic: auto equally distributed on the total of 12 columns
- Full-width: width will be equal to the width of menu box, other columns will be dropped to the second line.
- For further instruction of width adjustment, please refer to this article: Column width.
Add badge: add a badge/label on the top-right corner of this menu item.
(This option is available in Premium plan only)
Hide on desktop: enable to hide this item on desktop menu and only show in mobile menu (also hide all submenus of this item)
Hide on mobile: enable to hide this item on mobile menu and only show in desktop menu (also hide all submenus of this item)

You can change font and color of menu item in Style & Advanced settings. This style will apply globally to all menu items.
If you want to customize the style of an individual item, please read this instruction.

If you want to customize this menu item only and not to affect other items, you can use Custom HTML instead of Text only.

Text & Icon

You can add an icon to the left of menu title by choosing Item layout as Text & Icon.
Click "Edit" button on the menu item you want to modify > Select Text & Icon layout
This is almost similar to Text link layout, but you can add an icon on the left of the menu title.

You can only select the icon from our list. We don't support adding custom icons. If you want to use your own icon, please convert it to an image and use Item Layout as Image instead.

Product

You can add a Product as a menu item in your menu.
It will show the product thumbnail, title, and price.
Click "Edit" button on the menu item you want to modify > select Product layout

Product: you can type the product name to search for it. You should type the exact product name (including uppercase and space) to have the best result.
Product layout: set the product image on top or on left of the product title.

Product can't have submenu items inside it.

Collection

Collection: Type the collection's full name to search for it.
Collection layout: the collection image is taken from the collection settings on Shopify. You can change the image's position (Left/Right/Above/Under)

If you want to change the title or the image, you should use "Image" layout.

Image

You can add an image as a menu item by choosing Item layout as "Image".
Click "Edit" button on the menu item you want to modify > select "Image"

There are 2 ways to insert your image:
Upload directly (only available in paid plans):
Click on "Browse" button > Select image in your device > Wait a few seconds for it to upload
Once the image is uploaded, you will see it under the upload field.
Paste image's URL: insert the image's link
You can upload an image to your Shopify (Content => Files => Upload file).
After the image is uploaded, you can copy its link and add to our app.

Image position: select the image position compared to the title. If you don't want to show the title, choose "No text, image only" option.
Image width: set the image's size in pixel. The image's width can't exceed the item's column width.

Block items

Block is a container of items, you can add multiple blocks in a row, giving you more controls to arrange items in mega menu.
You can add a block then add items inside this block.

On mobile, the submenu items will ignore the Block and take the closest heading item as parent.
For example:

If you enable "Edit on preview", you'll see a dot border around a block, and a black editor to edit this block:

Image Swap

This feature is available for Premium Plan. Let's read our plan comparison

Image Swap helps customers can see more detail about the product when they hover over the image.
To make the image can be swapped, you need to add two different images in the setting.
The Default Image will show first, and when you hover over it, it will change to the Hover Image

You can change the Effect for changing images: Fade, or Slide rom Top/Bottom/Left/Right.
The option Show shadow on hover will make a shadow effect around the image when you hover over it.

Custom HTML

This option is available in Premium plan only

If you are familiar with HTML code, you can add a custom HTML as a menu item by choosing "Custom HTML" layout.
Click "Edit" button on the menu item you want to modify > select "Custom HTML" layout.
If you don't have much experience in HTML, you can use some tools to generate HTML, for example: Word to HTML online converter.

You should not add script snippet to our HTML item. Our app data is saved in the app owned metafield of Shopify, so adding the script snippet will break the menu data and make it show incorrectly on your storefront.

Contact Form

This option is available in Premium plan only

You can add a contact form by choosing "Contact Form" layout.

Title: enter a title for the contact form. This title will be displayed with form in your menu.
By default, this title is set as <h5> tag and how it display depends on your theme's style for <h5>.
The form only supports 3 fields: Name, Email, Message. You can change the default labels.
This contact form sends all submissions to the Sender email address of your store. You can change the Sender email address in your Shopify Settings > Notifications*.
In some cases, the spam filter of your email may block the submission emails, so we suggest you should check the spam/trunk box of your email as well.

Google Maps

This option is available in Premium plan only

You can add a google map by choosing "Google Maps" layout.

To find the map iframe, please go to Google Maps > search for the location you want to show > click Share button

A popup will show up.
Here you need to select Embed a map and copy HTML

Then paste the code into Google maps iframe box in our app to show the map

Updated on: 26/02/2025