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.
1. 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. 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.
2. 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.
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 link of your image
You can upload an image to get its URL in your Shopify admin / Settings / Files / Upload file
Once the image is uploaded, you will get a URL alongside its entry → Copy that URL 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
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)