If you already have a menu in Shopify under Online Store > Navigation, you can bring that menu straight into a Mobile Menu without rebuilding each item.
The Shopify menu item only pulls data from Shopify to display it. You still add, remove, or reorder items in Shopify as usual.
Embed or switch to Navi+ items?
| You want to | How to do it |
|---|---|
| Keep editing the menu in Shopify, with Navi+ displaying it | Embed the menu by following this guide |
| Manage the whole menu in Navi+, to add icons, images, and styles to each item | Add, arrange, and nest menu items |
When you convert an old menu, Navi+ copies all its items into separate menu items in the app. When you embed it, Navi+ doesn’t create separate items. Instead, it always reads data from the Shopify menu you selected.
Before you start
- An embedded item works only in a Mobile Menu, and it must sit at level 1, the outermost level of the menu tree.
- Navi+ needs permission to read your store’s navigation menus. If the app says permission is missing, open the Navi+ app’s main page once and approve the permission.
How to add a Shopify menu item
-
Open your Mobile Menu. In the Build Menu step, click the + ITEM button at the end of the menu tree (or Item below / Sub-item when you hover over an item) to open the Add item window.
Menu itemsHome/AutoShopcollections/all2AutoCollectionscollectionsAutoContactpages/contactAutoITEM1Click Add item -
In the Special group, choose Shopify menu. This item appears only when you add it at level 1 of the Mobile Menu.
Add itemLive sections2Links & icons2Basics4Columns2Image + text3Social & support1Live sectionsProductsShopify menu2Choose Shopify menuLinks & iconsLinks & iconsIconsBasicsDividerGroup headingSticky lineTop headerColumnsMulti-columnTabsImage + textImagesBannerCardsSocial & supportSocialCancel -
In the Shopify menu field, choose the Shopify menu you want to bring over, for example
main-menu.Add item1 Type2 Style & content3 CustomizePreviewHomeCatalog ContactOptionsShopify menu— Choose a menu —3Choose the Shopify menuBackCancel＋ Add 1 -
Click Add, then click Save at the top to save the menu.
9:41•••yourshop.comSTORESTOREHomeShopBlog4The Shopify menu shows in the Mobile Menu
On your store, the Shopify menu row is replaced by the entire menu tree from Shopify, keeping every level and the same order. If an item links to a product, the product’s price also appears next to it.
Update after you edit the menu in Shopify
Navi+ keeps a copy of the Shopify menu from the moment you select it. Because Shopify doesn’t notify the app when you edit a menu, you need to sync again every time you make a change.
-
In Shopify, go to Online Store > Navigation to edit and save the menu.
-
Go back to Navi+, and click the Shopify menu item in the menu tree.
-
Click Sync now. The status line shows Synced, along with the number of links just fetched.
-
Click Save to save the menu.
There's no automatic update yet. Every time you edit the menu in Shopify, go to Navi+, click Sync now, then click Save. If you don't, your store keeps showing the old version.
Limitations to know
- You can’t adjust individual items. Items pulled from Shopify don’t sit separately in your menu tree, so you can’t open Edit item for each row.
- You can’t add sub-items manually. You can’t create a sub-item under the Shopify menu item.
- Content is automatic, based on Shopify. Each row shows its name in the same order as in Shopify, with no icons. If a row points to a collection that already has an image and a description, the image and description show too.
- Styling applies to the whole group. When you open Edit item for the Shopify menu item, you can change the text color, font size, image frame, background, and padding in two groups, Level 1 style and Level 2-3 style. If you leave these blank, the embedded item uses the menu’s overall style. If you leave the level 2–3 style blank, it follows the level 1 style.
- To add an icon, a custom image, or a custom style to each item, add regular Navi+ menu items.
Troubleshooting
I changed the menu in Shopify, but the store still shows the old one
You edited the menu in Shopify but haven’t synced it again. Open the Shopify menu item in Navi+, click Sync now, then click Save. If the store still doesn’t change, see Menu changes not showing on your store.
The Shopify menu option doesn’t appear in Add item
This item is available only in a Mobile Menu, and it appears only when you add it at level 1. If you’re adding under a level 2 item, or editing a different menu type, you won’t see it.
The “not found in Shopify” error
The menu you selected was deleted or renamed in Shopify. Open the Shopify menu field again and choose a different menu.
I can’t click Sync now
Open the Navi+ app’s main page once to give the app permission to read menus. Then go back and click Sync now.
Other platforms
The steps above are for Shopify — the default way.
The Shopify menu item is available only on Shopify. On Wix and other websites, use Choose the menu type that fits your store to build your menu from scratch or from a template.
The Shopify menu item is available only on Shopify. On Wix and other websites, use Choose the menu type that fits your store to build your menu from scratch or from a template.