Menu settings

Change the layout, elements, animation, spacing and other settings that apply to the whole menu.

Reference All plans 5 min read

The Settings tab controls where the menu appears and how every item in it looks and behaves. To style a single item instead, use its own settings — see Edit a menu item.

Open the settings

Open the Settings tab

In Menu manager, open the menu, then click the gear icon in the editor’s left sidebar. The preview updates as you edit.

The gear icon opens the menu settings.
Save and publish

Click Save, then Publish.

Defaults below are the values a new menu usually starts with; some depend on your theme.

Settings

Position

Automatically replace: The app finds your theme’s main menu and replaces it.
Replace existing menu: You pick the theme menus to replace in Select your main menu and Select your mobile menu.
Show menu on this CSS selector: You enter the area’s selector in CSS selector of your main menu and CSS selector of your mobile menu. Use it only if the options above don’t work on your theme.

Each option is explained step by step in Publish a menu to your theme.

Layout and elements

OrientationDefault: Horizontal: Horizontal shows the top-level items in a row. Vertical stacks them in a column, like a sidebar menu.
AlignDefault: Left: Aligns the top-level items Left, Right or Center in the menu bar.
Menu max widthDefault: Empty: Maximum menu width in px, for example 1200. Empty uses the full available width.
Show search boxDefault: On: Adds a product search field to the menu.
Show divider on desktopDefault: On: A separator line between top-level items on desktop. Color: Colors > Separator color.
Show divider on mobileDefault: On: Separator lines between items in the mobile menu.
Show indicators (arrow down)Default: On: A small arrow next to items that have a submenu.

Submenu

Show borderDefault: On: A border around submenus. Color: Colors > Submenu > Border color.
Enable scrollbar on desktopDefault: On: Shoppers can scroll inside a submenu taller than the screen instead of it being cut off.
Enable scrollbar on mobileDefault: On: The same, for the mobile menu.
Submenu max widthDefault: Empty: Maximum submenu width in px. Empty uses the default width.
Open style on mobileDefault: Dropdown: Dropdown expands the submenu below its parent. Slide opens it as a new panel, with a way back to the previous level.

Open style on mobile, then the Menu animation section of the Settings tab — The Menu animation section, under Open style on mobile

Trigger - DesktopDefault: Hover: How submenus open on desktop: Hover, Click or Click toggle.
Trigger - MobileDefault: Click toggle: How submenus open in the mobile menu, with the same three options.
EffectDefault: Fade: The opening animation: Fade or Shift up.
Transition speedDefault: 300: Animation length in ms, up to 1500.
Transition delayDefault: 150: Wait before a submenu opens or closes, in ms, up to 1500. With Hover, it stops submenus flashing open as the mouse passes over.

The triggers:

Hover — the submenu opens when the mouse moves over the item.
Click — the first click or tap opens the submenu; clicking the item again goes to its link.
Click toggle — each click opens or closes the submenu; the parent item never goes to its link.

Account links

Customer account shortcuts that switch with the shopper’s login state. All are off by default. Turning one on shows fields for its icon and title (for example Login icon and Login title, to rename “Login” to “Sign in”).

Show login linkDefault: Off: Shown when the shopper is not logged in.
Show register linkDefault: Off: A link to create an account. Shown when the shopper is not logged in.
Show account linkDefault: Off: A link to the customer’s account page. Shown when the shopper is logged in.
Show logout linkDefault: Off: Shown when the shopper is logged in.

Spacing

Drag the slider or type a value in px.

Main menu paddingDefault: 20: Horizontal space on each side of every top-level item.
Main menu line heightDefault: 50: Height of the top-level menu bar.
Dropdown line heightDefault: 50: Height of each row in a dropdown submenu.
Tab line heightDefault: 50: Height of each tab in a tabbed menu.
Link list line heightDefault: 30: Height of each link in a link list block.

Carousel

Applies to blocks that slide, such as product carousels and the image slider.

Auto playDefault: On: Slides move on their own.
Infinity loopDefault: On: After the last slide, the carousel starts again from the first.

Advanced

Mobile menu when width less thanDefault: 768: Screen width in px below which the mobile menu is used. Wider screens get the desktop menu.
Hide submenu of linklist blockDefault: Off: Only mobile. Collapses the links under each link list heading; shoppers tap the heading’s arrow to expand them.
Show add to cart buttonDefault: Off: An add-to-cart button on products in the menu’s product blocks. Colors: Colors > Add to cart button.
Enable lazyload imageDefault: On: Loads menu images only when needed, which helps page speed. We recommend keeping it on.

Troubleshooting

Tapping a parent item on mobile doesn't open its page

With Trigger - Mobile set to Click toggle, tapping a parent item only opens its submenu. Change it to Click, or add the parent page as the first link inside the submenu. See A menu item doesn’t redirect on mobile.

The mobile menu doesn't appear on a tablet or small laptop

The desktop menu is used on any screen wider than Mobile menu when width less than. Raise that value.

Was this helpful?

Report an issue