Menu editor

Find your way around the menu editor, where you build, style and publish a menu.

Reference All plans 2 min read

Open the editor by clicking Customize on a menu in Menu manager. It opens in full screen.

Editor areas

(1) Top bar: Menu name and status (Draft or Active). Publish opens the Publish dialog, Disable unpublishes an active menu (greyed out for drafts), X closes the editor. Save and Discard appear when you have unsaved changes.
(2) Sidebar tabs: Icons in the left bar that switch the panel next to them. See Sidebar tabs.
(3) Live preview: Your menu as customers see it. Hover over an item for Duplicate Item, Edit Item and Delete Item; click + at the end of the menu bar to add a top-level item.
(4) Bottom toolbar: The screen icons switch the preview between desktop and mobile. Edit is the normal mode; Translate lets you translate items in the preview.

From top to bottom:

Elements: The structure: top-level items, submenus and blocks. Click Add submenu under an item or Add items inside a block; click an item to edit it. See Add a menu item.
Settings: Position on your theme, layout, submenu animation, account links, spacing and mobile behavior. See Menu settings.
Fonts: Typography for each part of the menu. See Fonts.
Colors: Colors for the main menu, submenus, tabs, labels and buttons. See Colors.
Advanced (</>): Market availability and Stylesheet / CSS. See Show menus by market and Custom CSS.
Version historyPro: Go back to an earlier saved version. See Version history.

Build the structure

In Elements, add your items and their submenus. The preview updates as you go.

Add items at the bottom of the Elements tree.
Style it

Adjust Settings, Fonts and Colors. Switch the preview to mobile to check the mobile menu.

The gear icon opens the menu settings.
Save

Click Save in the top bar to store your changes in the app.
Publish

Click Publish, choose the theme and click Publish again. See Publish a menu.

Was this helpful?