A submenu is the panel that opens when a shopper clicks or hovers over a parent item in the menu. It has its own set of settings, separate from the main menu.
A submenu doesn't automatically follow the level 1 style. When you change the background or text color in the Main menu tab, the submenu panel doesn't change with it. To change how the submenu panel looks, go to the Sub menu tab, or choose a Palette to apply colors to both at the same time.
Where the submenu sits on each menu type
| Menu type | The submenu is |
|---|---|
| Desktop Mega Menu | A large multi-column panel that drops down right under the menu bar |
| Mobile Mega Menu | A panel that opens below the horizontal category bar |
| Mobile Menu | A list of submenu items inside the sliding panel, which drops down or slides sideways depending on your setting |
| Tab Bar | A panel that opens from the tab bar, shown just above the bar when the bar sits at the bottom of the screen |
| Floating Button | A small panel that pops out from the floating button |
| Icon Menu | There’s no submenu and no Sub menu tab |
Before you start
- Your menu needs a parent item that contains child items. If you haven’t created one yet, read Add, arrange and nest menu items.
- The menu you have open is not an Icon Menu.
How to style the submenu
-
In the top step bar, click Design, then choose the Sub menu tab.
DesignPaletteMain menuSub menu1Sub menu tabLevel 2-3 — The dropdown interface that expands on tap, and each item within it.Sub menu itemText styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)InheritIcon/Small-image StyleFont icon color#434343 Gap: Text ↔ Icon (px)Inherit (main menu) Icon/Small-image size (px)Inherit (main menu)Image styleImage curve (px)Inherit (main menu) Image ratio (auto-crop)InheritEach item spacingPadding (px)Inherit Margin (px)InheritSub menu containerBackground (BG)Is TransparentBG Color#FAFAFAShadowApply drop shadowOthersMin height (px)Default Curve (px)Default Divider color#EEEEEEAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
In the Sub menu item section, open Text style to change the submenu item text: the text color in Text Color, the text size in Text Size (px), the capitalization in Text Transform, the weight in Font Weight, and the font in Font Family. For the small description line below each item, use Description Color and Description Size (px). If you leave Text Size empty, submenu text uses 14px, not the size of the main menu text.
DesignPaletteMain menuSub menuLevel 2-3 — The dropdown interface that expands on tap, and each item within it.Sub menu itemText styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)Inherit 2Text styleIcon/Small-image StyleFont icon color#434343 Gap: Text ↔ Icon (px)Inherit (main menu) Icon/Small-image size (px)Inherit (main menu)Image styleImage curve (px)Inherit (main menu) Image ratio (auto-crop)InheritEach item spacingPadding (px)Inherit Margin (px)InheritSub menu containerBackground (BG)Is TransparentBG Color#FAFAFAShadowApply drop shadowOthersMin height (px)Default Curve (px)Default Divider color#EEEEEEAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Scroll down to Icon/Small-image Style to change the icon color in Font icon color, the gap between text and icon in Gap: Text – Icon, and the size of icons or small images in Icon/Small-image size (px). Next, open Image style to change the corner radius of images in Image curve (px) and the automatic crop ratio in Image ratio (auto-crop). The Image ratio box here also has an Inherit option, which uses the image ratio of the main menu.
DesignPaletteMain menuSub menuLevel 2-3 — The dropdown interface that expands on tap, and each item within it.Sub menu itemText styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)InheritIcon/Small-image StyleFont icon color#434343 Gap: Text ↔ Icon (px)Inherit (main menu) Icon/Small-image size (px)Inherit (main menu) 3Icon styleImage styleImage curve (px)Inherit (main menu) Image ratio (auto-crop)Inherit 3Image styleEach item spacingPadding (px)Inherit Margin (px)InheritSub menu containerBackground (BG)Is TransparentBG Color#FAFAFAShadowApply drop shadowOthersMin height (px)Default Curve (px)Default Divider color#EEEEEEAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
In the Each item spacing section, set the inside padding in Padding (px) and the outside margin in Margin (px) for each submenu item, in the order
top right bottom left. To set different numbers for phones and computers, enter them as8 | 16.DesignPaletteMain menuSub menuLevel 2-3 — The dropdown interface that expands on tap, and each item within it.Sub menu itemText styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)InheritIcon/Small-image StyleFont icon color#434343 Gap: Text ↔ Icon (px)Inherit (main menu) Icon/Small-image size (px)Inherit (main menu)Image styleImage curve (px)Inherit (main menu) Image ratio (auto-crop)InheritEach item spacingPadding (px)Inherit Margin (px)Inherit 4Each item spacingSub menu containerBackground (BG)Is TransparentBG Color#FAFAFAShadowApply drop shadowOthersMin height (px)Default Curve (px)Default Divider color#EEEEEEAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Scroll down to the Sub menu container section to change the frame around the whole submenu panel:
- Background (BG): choose the panel background color in BG Color. By default this box is a very light grey,
#fafafa, slightly different from the white main menu background, so the panel stands out as its own layer. Submenu panels don’t support background images. To make the background transparent, turn on Is Transparent. Mobile Menu doesn’t have this switch. - Shadow: turn on Apply drop shadow to add a shadow to the submenu panel. This option doesn’t appear on Mobile Menu because the sliding panel has no outer edge to cast a shadow.
- Others: set the minimum height in Min height (px), the panel’s corner radius in Curve (px), and the color of the dividers between submenu items in Divider color.
DesignPaletteMain menuSub menuLevel 2-3 — The dropdown interface that expands on tap, and each item within it.Sub menu itemText styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)InheritIcon/Small-image StyleFont icon color#434343 Gap: Text ↔ Icon (px)Inherit (main menu) Icon/Small-image size (px)Inherit (main menu)Image styleImage curve (px)Inherit (main menu) Image ratio (auto-crop)InheritEach item spacingPadding (px)Inherit Margin (px)InheritSub menu containerBackground (BG)Is TransparentBG Color#FAFAFAShadowApply drop shadowOthersMin height (px)Default Curve (px)Default Divider color#EEEEEE5Submenu containerAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons - Background (BG): choose the panel background color in BG Color. By default this box is a very light grey,
-
Click Save at the top to save the menu, then open your store and click a parent item to see the submenu.
Which fields follow the main menu, and which use their own value?
You don’t need to guess. Look at the faint text inside each box:
- Boxes with faint Inherit (main menu) text follow the main menu’s setting when left empty. Examples are the gap between text and icon, the icon size, and the image corner radius.
- Boxes that already have their own value, such as text color, icon color, panel background and divider color, don’t follow level 1. These only change when you edit them in the Sub menu tab or choose a Palette again.
- The Text Size box uses 14px whenever it’s empty. It never follows the main menu’s text size.
Other submenu settings
- To split the submenu into several columns, pin items, or add dividers between items, read Columns, dividers and pinned items in submenus.
- To change the thickness, dash style or length of dividers across the whole menu, go to the Configure step and open the Divider section. The Sub menu tab only lets you change the divider color.
- To change the expand arrows and the opening effect of the submenu panel, read Expand arrows, close button and opening effects.
Common questions
I changed the main menu color, but the submenu is still the same. Why?
The two parts use separate settings. Open the Sub menu tab and change Text Color, Font icon color or BG Color there. To change both at the same time, choose a Palette.
I changed the main menu background, but the submenu background is still white. Why?
The main menu background and the submenu panel background are set in different boxes. You only changed the main menu background. Go to the Sub menu tab, scroll down to Background (BG), and change the color in the BG Color box.
Why don’t I see the shadow setting in Sub menu?
You’re editing a Mobile Menu. This menu type doesn’t have a Shadow option for the submenu. Other menu types do.
How do I change the dividers to dashed or dotted lines instead of solid?
The Sub menu tab only lets you change the divider color. To change the line style and length, go to the Configure step and open the Divider section.
Why is the submenu text still 14px when I made the main menu text smaller?
When the Text Size box in the Sub menu tab is empty, submenu text always uses the default size of 14px. Type the size you want directly into this box.
Other platforms
The steps above are for Shopify — the default way.
The same on every platform.
The same on every platform.