English Tiếng Việt
See demo Get started
Menu items

Insert ready-made item templates

Instead of building each item from scratch, pick a ready-made template from the library: a link list, an icon grid, a banner, a card, products, or a group of contact buttons. When you insert it into the menu tree, the layout is already set up. You only need to replace the text and images with your own, and add your store’s links.

Where to find the template library?

The template library is inside the Add item window. You can open it in two ways:

  • Click the ITEM button at the bottom of the menu tree.
  • Hover over an existing item in the tree, then click Item below (to place the template directly below) or Sub-item (to place it inside) in the small bar that appears, or press the T key. The template you choose sits beside or inside that item.

If the menu is empty, click the + ITEM button in the panel to open the library.

Before you insert

  • Open the menu you want to edit in the Navi+ app, at the Build Menu step in the left step bar.
  • Click the item in the tree where you want the new template to sit beside, or to be nested inside. If you don’t select an item, the new template goes to the end of the menu.

How to insert a template into the menu

  1. Open the Add item window. The Insert to row at the top shows where the new template will go: Item below “item name” places it at the same level, directly below, and Sub-item of “item name” nests it as a sub-item. Click to change it if needed. The left column groups the templates: Links & icons, Basics (dividers and spacers), Tabs, Top header, and so on, then Columns, Cards & banners, Page & app actions, Social & support, Media & code, Special. The Live sections group pulls products or collections automatically, based on rules you set. Groups that aren’t supported at your current position are hidden automatically.

    If you already know the template’s name, type it straight into the search box next to the Insert to row.

  2. Choose the group you need, for example Banner. The screen moves to step 2 Style & content, showing the ready-made designs. Click the design you like.

  3. Click the add button at the bottom right, such as ＋ Add 1. The template you chose appears right away in the menu tree.

If you add a single blank item with the ＋ Add 1 button, the Edit item panel opens right away so you can type the text and add a link. The Recent row, which holds the templates you used most recently, appears only when you turn on Classic view.

Insert a template that needs content

For templates where you decide up front which link, product, or image to use, the window takes you through 3 steps: Type, Style & content, and Customize.

  1. In the Style & content step, choose the content to include. For example, with Links, tick the pages, collections, or blog posts you want to add, or click ＋ Add a custom link to type a URL yourself. With Products, pick individual products, or pull them automatically from a collection. For details, see Show products automatically.

  2. Click Next to move to the Customize step. Here you change the text, colors, height, and so on, and the preview panel beside it updates right away. If a field is highlighted red because it’s empty, fill it in, and the add button becomes clickable.

  3. Click the add button at the bottom. The window closes, and the new item appears in the menu tree.

Some templates come as a group. For example, the Tabs template inserts a whole set of tabs with their sub-items. The Top header template, which includes a logo, a search box, and an account button, should appear only once at the top of each level. If that level already has a header, Navi+ asks whether you want to replace the old one or add a new one. For more on using these, see Group items into tabs, add banners and cards.

Note

Each menu type and each item level shows a different set of templates. For example, the Top header template appears only at the top of a level, while Embed Mega menu, Sticky line, and Shopify menu can be inserted only at level 1 of a Mobile Menu. If you see the line No templates for this placement, change Insert to to Inside, or pick a different spot in the tree.

Edit an item after you insert it

After you insert a template, it’s a regular menu item, so you can edit it at any time:

  1. Hover over the item you just inserted in the tree, then click Edit, or press the E key.
  2. Change the text, link, icon, or image in the edit panel. For tips on setting links, see Link a menu item.
  3. Click Back to return to the menu tree, then click Save at the top of the screen.

To switch back to the older list-style template view, click Classic view in the Add item window.

Troubleshooting

I can’t find the template I need

The templates shown depend on the menu type and the level you’re inserting into. Try changing After to Inside, or type the template’s name into the search box. If the search shows Nothing matches, this menu type doesn’t support that template. In that case, use the Links & icons group to add any page, or choose Custom link.

Inserting a template shows the “max level reached” error

This error appears when you insert a template that creates its own sub-level, such as Tabs, at a position that’s already at the deepest level of the menu. Change the position to End of the menu, or pick an item at a higher level. See the level limits table in Add, arrange, and nest menu items.

I inserted the wrong template

Press Ctrl+Z on Windows or Cmd+Z on Mac to undo, or click Delete on the item you just inserted.

Other platforms

The steps above are for Shopify — the default way.

Related articles

Did this page help?

Need a hand? Chat with us in the app or write to [email protected] — send your store URL and the menu name.