Submenu settings
There are 3 types of Submenu: Flyout (tree) menu, Mega menu & Tab menu.
Click the pencil button to edit a parent item and choose among the 3 types.
When selecting Flyout Submenu type, your menu will be displayed as a normal drop-down menu.
If your flyout menu has more than 1 level, it will show the next submenu level on left or right.
You can change the direction of submenu level in Flyout submenu direction
You can also add background image in the submenu of Flyout.
You can read the Background image settings to learn more about this feature.
Although background adding feature still appears in Flyout submenu type, for better display, we don't recommend using this feature. If you still want to add image into menu, remember to check your dropdown bar size carefully.
Mega Menu exposes all submenu levels of it:
To change the wideness of Mega menu, click on the pencil icon to edit the top menu → scroll down and find the Submenu width & position
Full width (recommend): the width of menu box will be equal to the width of your top menu bar (which is based on your old menu's width)
Center: menu box will be aligned center to the width of the parent item. You can adjust the width by setting a number in "Width" option below
Left/Right edge of Menu Bar: menu will be aligned left/right to the top menu bar. You can adjust the width by setting a number in "Width" option under Mega submenu position.
Left/Right edge of parent item: menu will be aligned left/right to the parent item. You can adjust the width by setting a number in "Width" option under Mega submenu position.
NOTE: Position will not work with vertical menu.
Min height: Adjust your menu box's height by inputting the new number of height.
Masonry-like: Auto arrange columns in any available space.
Read this article to learn more about Masonry option.
You can also add a background image into Tabs menu.
Read the Background image settings to learn more about this feature.
You can also change submenu position in Tab submenu position:
Full width (recommend): the submenu's width will be equal to the menu bar's width (which is based on your old menu's width).
Center: the submenu will be aligned center to the width of its parent item. You can adjust the width by setting a number in Width option under Tab submenu position.
Left/Right edge of Menu Bar: the submenu will be aligned left/right to the top menu bar. You can adjust the width by setting a number in Width option under Tab submenu position.
Left/Right edge of parent item: the submenu will be aligned left/right to its parent item. You can adjust the width by setting a number in Width option under Tab submenu position.
NOTE: Position will not work with vertical menu.
To change Tab control position: click "Edit" the top menu > Tab position.
To change Tab control width: click "Edit" the top menu > Tab control width
Adjust your menu box's height with Min height by inputting the new number of height.
Masonry-like: Auto arrange columns in any available space.
Read this article to learn more about Masonry option.
You can also add a background image into Tabs menu.
Read the Background image settings to learn more about this feature.
There are 2 ways to insert your image:
Upload directly (only available in Premium plan)
Click on " Browse" button → Select image in your computer → 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 ( Contents / Files / Upload file)
Once the image is uploaded, you will get a URL alongside its entry → Copy the image's link and paste into "Background image" field.
Background repeat: in case the background image does not cover 100% area of the bar
Repeat: image is repeated horizontally and vertically (best for pattern background)
Repeat X: image is repeated only horizontally
Repeat Y: image is repeated only vertically
No repeat: image is not repeated and leaves empty space in the rest portion
Background position: align the image compared to the menu container
Background size:
Auto: image is displayed in its original size
Contain: 100% image is always on the menu, doesn’t matter what’s the width of your screen / which device you are on. (The preference is to show 100% image – the remaining area of the menu may have white space)
Cover: image covers 100% area of the menu and the rest portion will not be displayed. (Will cover the width & height – both; of the row. This means – some portion of the image can go off)
Click the pencil button to edit a parent item and choose among the 3 types.
Flyout menu settings
When selecting Flyout Submenu type, your menu will be displayed as a normal drop-down menu.
If your flyout menu has more than 1 level, it will show the next submenu level on left or right.
You can change the direction of submenu level in Flyout submenu direction
You can also add background image in the submenu of Flyout.
You can read the Background image settings to learn more about this feature.
Although background adding feature still appears in Flyout submenu type, for better display, we don't recommend using this feature. If you still want to add image into menu, remember to check your dropdown bar size carefully.
Mega Submenu settings
Mega Menu exposes all submenu levels of it:
To change the wideness of Mega menu, click on the pencil icon to edit the top menu → scroll down and find the Submenu width & position
Full width (recommend): the width of menu box will be equal to the width of your top menu bar (which is based on your old menu's width)
Center: menu box will be aligned center to the width of the parent item. You can adjust the width by setting a number in "Width" option below
Left/Right edge of Menu Bar: menu will be aligned left/right to the top menu bar. You can adjust the width by setting a number in "Width" option under Mega submenu position.
Left/Right edge of parent item: menu will be aligned left/right to the parent item. You can adjust the width by setting a number in "Width" option under Mega submenu position.
NOTE: Position will not work with vertical menu.
Min height: Adjust your menu box's height by inputting the new number of height.
Masonry-like: Auto arrange columns in any available space.
Read this article to learn more about Masonry option.
You can also add a background image into Tabs menu.
Read the Background image settings to learn more about this feature.
Tabs Submenu - Submenu settings
You can also change submenu position in Tab submenu position:
Full width (recommend): the submenu's width will be equal to the menu bar's width (which is based on your old menu's width).
Center: the submenu will be aligned center to the width of its parent item. You can adjust the width by setting a number in Width option under Tab submenu position.
Left/Right edge of Menu Bar: the submenu will be aligned left/right to the top menu bar. You can adjust the width by setting a number in Width option under Tab submenu position.
Left/Right edge of parent item: the submenu will be aligned left/right to its parent item. You can adjust the width by setting a number in Width option under Tab submenu position.
NOTE: Position will not work with vertical menu.
To change Tab control position: click "Edit" the top menu > Tab position.
To change Tab control width: click "Edit" the top menu > Tab control width
Adjust your menu box's height with Min height by inputting the new number of height.
Masonry-like: Auto arrange columns in any available space.
Read this article to learn more about Masonry option.
You can also add a background image into Tabs menu.
Read the Background image settings to learn more about this feature.
Background image settings
There are 2 ways to insert your image:
Upload directly (only available in Premium plan)
Click on " Browse" button → Select image in your computer → 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 ( Contents / Files / Upload file)
Once the image is uploaded, you will get a URL alongside its entry → Copy the image's link and paste into "Background image" field.
Background repeat: in case the background image does not cover 100% area of the bar
Repeat: image is repeated horizontally and vertically (best for pattern background)
Repeat X: image is repeated only horizontally
Repeat Y: image is repeated only vertically
No repeat: image is not repeated and leaves empty space in the rest portion
Background position: align the image compared to the menu container
Background size:
Auto: image is displayed in its original size
Contain: 100% image is always on the menu, doesn’t matter what’s the width of your screen / which device you are on. (The preference is to show 100% image – the remaining area of the menu may have white space)
Cover: image covers 100% area of the menu and the rest portion will not be displayed. (Will cover the width & height – both; of the row. This means – some portion of the image can go off)
Updated on: 26/02/2025
Thank you!