Embedded items — HTML, auto products, Shopify menu, mega menu

These four item types don’t draw their own content. Instead, they pull content from somewhere else and place it in the menu: HTML code you paste, the products in your store, a menu on Shopify, or an existing Desktop Mega Menu. This page is a reference for each of their fields. For step-by-step instructions, read Show products and custom HTML and Embed your Shopify menu.

To open the fields: in the Build Menu step on the left step bar, click the embedded item in the Menu items tree. The panel changes to Edit item (with a ‹ Back button at the top), and the fields are right in this panel.

Custom HTML

The item type for your own HTML code (an embedded video, a sign-up form, a third-party widget). Available in the Mobile Menu, Desktop Mega Menu, Mobile Mega Menu and Icon Menu; not in the Tab Bar and Floating Button.

HTML

• Where: in Edit item of a Custom HTML item, the multi-line field labeled HTML (with the placeholder “HTML code”).
• What it’s for: paste any block of code. The content of this item is entirely your code, so the item’s icon, image, description and link fields are usually hidden.
• Value: free text, empty by default.
• Applies to: Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu; every level; only the Custom HTML item type. Every plan. Available on all three platforms (Shopify, Wix, other websites).
• What shoppers see: the code is kept in a “sleeping” state when the page first loads, and is only built when the shopper opens the menu. So a heavy video or embed frame doesn’t slow down the home page. The block is as wide as the column holding it. If you leave Height (px) empty, it stretches to fit the content. If you enter a number, the block is exactly that tall and any extra content is cut off.
• Note: only paste code you wrote yourself or from a trusted service. Don’t paste unknown script blocks.

Auto products

A block that fills itself with products (or collections, or pages) according to a rule you set. Shopify only. You can place it in level 2–3 submenus and in the Icon Menu, but not on the level 1 bar or in the columns of a Desktop Mega Menu.

In Edit item of the block, you see a Content & style card (summary: source, rules, display style) with an Edit block button and a Style only → link. Below it are the Auto-update on storefront line and a Refresh now button. The list of products itself can’t be edited line by line.

yourshop.com

STOREHomeShopCollectionsAboutContact

TopsT-shirtsJacketsPantsJeansChinosAuto productsAuto-filled product column

Edit block

• Where: the Content & style card in Edit item of the block, the Edit block button. It reopens the window for choosing the source and rules, just as when you first added the block. If the block is empty, the yellow warning line “Nothing matches these rules” also has this Edit block button.
• What it’s for: decides which items the block shows.
• Rule options:
  • Source: Products, Collections or Pages.
  • From: one or more collections, or All products.
  • Sort by: Newest, Best selling, Price: low to high, Price: high to low, Name A–Z, Collection order.
  • Quantity: up to 20 items per block.
  • Skip first: skip a number of the first items (0 to 100).
  • An optional setting to hide sold-out items so they don’t appear in the block.
  • Optional extra filters by Tag, Vendor, Product type.
• Applies to: every menu type, but only in level 2–3 submenus or the Icon Menu; Shopify only; every plan.
• What shoppers see: changing the rules changes the list of items shown, after you click Save. If no item matches, the block automatically hides on the store.
• Default values for a new block: set by the Add item window when you add the block. There is no separate field in Edit item to “reset” them.

Content & style

• Where: the same Content & style card, but click the Style only → link (instead of Edit block). The window opens straight at the style step and keeps the rules unchanged.
• What it’s for: changes how each row of products looks (display style, number of tiles per row, block title, the “View more” link, price information, how sold-out items are handled) without changing which items are picked.
• Value: according to the template you chose when you added the block. The summary line in the card shows the current style and the number of tiles per row.
• Applies to: the same as Edit block above.
• What shoppers see: only the look changes; the list of items stays the same.

Auto-update on storefront

• Where: a separate card under Content & style: the Auto-update on storefront switch and a row of buttons for the time interval.
• What it’s for: when on, the store refreshes the list (products, prices, stock) on a schedule, so you don’t have to open Navi+ and click Refresh now.
• Options: 5 · 10 · 20 · 30 · 45 minutes or 1 hour. Intervals under 1 hour show a lock icon and the word Business if you’re on a lower plan.
• Default: new blocks are created with it on, every 1 hour. Older blocks (created before this feature existed) stay off until you turn it on. Older blocks that were set to a long interval (6, 12 hours, 1 day, 3 days) keep running on that schedule until you change it.
• Plan needed: intervals under 1 hour need the Business plan or higher. The Starter plan is fixed at every 1 hour.
• Applies to: Shopify only.
• What shoppers see: the list on the store updates itself when products or prices change, with a delay of at most the interval you chose. Turn the switch off and the list stays at the last snapshot; when that snapshot is more than 7 days old, the app shows a warning reminding you to refresh it.

Refresh now

• Where: the same card as the Auto-update switch. The Refresh now button sits next to the “Snapshot…” line (the time of the latest snapshot).
• What it’s for: gets the latest list from the store right away, when you don’t want to wait for the automatic interval (for example, right after changing a price or adding new stock).
• Important: the button only refreshes the snapshot inside the app. You must click Save to publish it to the store. The message “Updated. Save the menu to publish the new list.” reminds you of this.
• Applies to: the same as the Edit block field; Shopify only. It is an action button, not a setting that is saved as a value.

Shopify menu

Embeds a whole menu you built in Online Store > Navigation on Shopify into a Mobile Menu. Shopify only, Mobile Menu only, and only at level 1.

9:41•••

yourshop.com

STORE

STORE

HomeShopBlog

Shopify menu tree shown in the drawer

Shopify menu

• Where: Edit item of the Shopify menu item, the Shopify menu selector (default “— Choose a Shopify menu —”).
• What it’s for: chooses which Shopify menu to pull in (for example main-menu).
• What shoppers see: the Shopify menu line disappears and is replaced in place by the whole menu tree from Shopify, keeping its levels and order. Items that link to a collection show its image and description too.
• Applies to: Mobile Menu, level 1, Shopify only; every plan.
• Note: Navi+ keeps a snapshot of the Shopify menu from the moment you select it or click Sync now. If you edit the menu on Shopify, you must sync again (see the next field).

Sync now

• Where: right below the menu selector. Next to the button is a status line (it shows Synced with the number of links).
• What it’s for: pulls the latest menu tree from Shopify after you edit it in Online Store > Navigation.
• Process: edit and save in Shopify → come back to Navi+, open the Shopify menu item → Sync now → Save. Until you click Save, the store keeps showing the old version.
• Applies to: the same as the Shopify menu field. It is an action button, not a setting that is saved as a value. If the button can’t be clicked, open the main page of the Navi+ app once to grant permission to read menus.

Level 1 style

• Where: in Edit item of the Shopify menu item, the Level 1 style heading block has five groups: Text (Text Color, Font Size), Icon / small image (Icon Color, Icon Size), Media container (Padding, Curve), Container (outer) (Background Color, Background Image), Inner box (Padding). Click the pencil icon on each group to open it.
• What it’s for: adjusts the text style, colors and padding of level 1 items that come from the Shopify menu. These items are “virtual” and aren’t separate rows in the tree, so you can’t open Edit item for each one. A style set once here applies to the whole group.
• Default: empty, showing Inherit = follows the menu’s general style.
• Applies to: Mobile Menu, the Shopify menu item; Shopify only; every plan.

Level 2-3 style

• Where: right below Level 1 style, with the same five groups; a hint line says “Leave empty to follow Level 1”.
• What it’s for: sets a separate style for level 2–3 items of the Shopify menu.
• Default: empty = the same as level 1.
• Applies to: the same as Level 1 style.

Menu reference — embed a Desktop Mega Menu into a Mobile Menu

The Menu reference item type shows the items of a Desktop Mega Menu inside a Mobile Menu, laid out for phones. Available only in the Mobile Menu (every platform), and it is a live reference: when you edit the mega menu, the Mobile Menu updates too, without copying anything again.

Desktop Mega menu to embed

• Where: Edit item of the Menu reference item, the Desktop Mega menu to embed selector (default “— Choose a Desktop mega menu —”). The list shows the names of the store’s Desktop Mega Menus, with their embed codes.
• What it’s for: choose the source mega menu, once.
• What shoppers see: the level 1 items of the mega menu turn into a vertical list in the Mobile Menu drawer. Its columns are removed and rearranged to fit a narrow screen (product grids always keep at least 2 tiles per row). If the mega menu points to another Menu reference, it is skipped, to avoid a loop.
• To remove one item of the mega menu from the phone version: open that mega menu, edit the item, go to Visibility and turn on Exclude when embedded. The Open this mega menu button below the selector opens the mega menu directly in a new tab.
• Applies to: Mobile Menu, level 1, every platform; every plan.

Choose icons for level 1 items

• Where: in Edit item of the Menu reference item, the Choose icons for level 1 items group, a list of “icon box + item name”. If no mega menu is chosen yet, it shows “Choose a Desktop mega menu above to set icons.”
• What it’s for: gives each level 1 item of the mega menu its own icon when it appears in this Mobile Menu.
• Value: one icon per item, or empty (uses the mega menu’s original icon). It only applies to this Mobile Menu; the original mega menu doesn’t change.
• What shoppers see: an item with its own icon shows that icon in place of the mega menu’s icon or image; a text-only item becomes an item with an icon. If the mega menu later adds or removes items, extra or missing icons don’t cause an error.
• Applies to: Mobile Menu, the Menu reference item; every platform; every plan.

Tabs on mobile

• Where: in Edit item of the Menu reference item, the Tabs on mobile group. This group only appears when the chosen mega menu has Tab items (or when settings were saved before).
• What it’s for: adjusts how the mega menu’s tab strip appears on phones. On phones, the tabs are always a horizontal bar at the top that scrolls sideways, even when the mega menu uses left-side tabs.
• Three options:
  • Style: Same as mega menu (default) · Underline · Pill · Segmented · Outline.
  • Alignment: Same as mega menu (default) · Left · Spread out (the tabs spread evenly across the bar).
  • When tabs don’t fit: Swipe (default) · Swipe with snap + faded edges (scrolls and snaps, both edges fade) · Faded edges + arrows (faded edges with arrows).
• What shoppers see: if you leave all three fields empty, the tabs look exactly like the mega menu. Choosing a value only changes the tab strip in this Mobile Menu.
• Applies to: Mobile Menu, the Menu reference item; every platform; every plan.

Other platforms

Shopify Wix Other website

The steps above are for Shopify — the default way.