When you want a list of products with photos, names, and prices in the menu without typing each one, use an automatic product block. To embed a video, a sign-up form, or a custom widget, insert an HTML block.
Before you start
- Open your menu in the Navi+ app, at the Build Menu step. The item tree is in the Menu items panel on the left.
- Automatic product blocks can go only inside level 2–3 submenus and in an Icon Menu. You can’t place this block at the top level of a Tab Bar or Floating Button, or at the column level of a Desktop Mega Menu. If you place it in the wrong spot, the app asks you to move the block into a submenu.
- Neither an automatic product block nor an HTML block can have sub-items below it.
Show products automatically from a collection
The Auto content: sync by rule item fills the menu with products based on the conditions you set. You don’t need to edit each product line. When a product’s details or price change in your store, the list in the menu updates to match.
-
In a submenu or an Icon Menu, click Add item where you want the product block to go.
Menu itemsShop#2AutoContactpages/contactAutoITEMClick Add item -
At the Type step, choose a template from the Auto content group, such as Products, image left or Products, image on top. You can also go to Links & icons and turn on Auto: products by rules.
Add itemLive sections2Links & icons2Basics4Columns2Image + text3Social & support1Live sectionsProductsChoose ProductsShopify menuLinks & iconsLinks & iconsIconsBasicsDividerGroup headingSticky lineTop headerColumnsMulti-columnTabsImage + textImagesBannerCardsSocial & supportSocialCancel - Set the conditions for the products. The preview panel beside it shows the real products that match your choices right away:
- From: pull from one or more collections, or choose All products to pull from the whole store.
- Sort by: sort by Newest, Best selling, price low to high, price high to low, or alphabetically A–Z.
- Filter further by Tag, Vendor, or Product type if needed.
- Skip first: skip a number of the first products. Each block shows up to 20 products. To hide a row you don’t want, click the × to remove it, and the block fills in the next product automatically.
Add item1 Type2 Style & content3 CustomizePreview3Real products show right awayOptionsProductsFrom a collection (live)NewestBest sellersPick manuallyCollectionChoose a collection1Choose collectionHow many468How many6Skip the first02Skip first productsBackCancel＋ Add 1 -
Click Next: choose style to pick the display style, and the details shown on each row, such as the regular price, the sale price, labels from tags, and how to handle sold-out products.
-
Click Add products block, then click Save at the top to save the menu.
STOREHomeShopCollectionsAboutContactTopsT-shirtsJacketsPantsJeansChinosAuto productsProduct column filled automaticallyOne column in a Desktop Mega Menu fills itself with products from a collection
In the Type step, you can also choose the Live sections group, which has ready-made blocks: New arrivals, Best sellers, and Shop by category. Each block comes with several layouts, such as a grid, a vertical list, or a horizontal scrolling strip.
How the product list updates on your store
The product list is saved as a snapshot alongside the menu. You have two ways to refresh this snapshot:
- Turn on the Auto-update on storefront switch. Your store then picks up new products, prices, and stock without you reopening Navi+. The Starter plan updates every 1 hour. The Business plan or higher lets you choose a frequency, down to every 5 minutes.
- Click Refresh now, then click Save, whenever you want to update the list immediately.
If no products match your filters, this block hides itself on your store. When the snapshot is more than 7 days old, the app reminds you to refresh it.
Insert a custom HTML block into the menu
To add a video embed, a sign-up form, a social media feed, or another service’s widget to the menu, use an HTML block.
-
Click Add item, go to the Media & code group, then choose the HTML block group.
-
Paste your code into the Paste HTML code field.
-
Adjust the width, position, and height of the frame if needed. If you leave the height empty, the block resizes to fit the content, using Fit content mode.
-
Click Add, then click Save.
The HTML block works in Desktop Mega Menu, Mobile Mega Menu, Mobile Menu, and Icon Menu, but not in Tab Bar or Floating Button. For this block, you can adjust only the outer frame, such as width, spacing, class, and display rules. Icon, image, description, and link fields are hidden, because the content comes entirely from your HTML code.
Keep the menu fast and safe when you use HTML
- Speed: the HTML code doesn’t run as soon as the page opens. Its content loads only when a shopper opens the menu, so a heavy video or embed won’t slow down your page.
- Safety: only paste code you wrote yourself, or code from a reputable service. Don’t paste unfamiliar
scriptcode from an unknown source, because code running on your store can collect shoppers’ information. - To keep the menu tidy, use HTML for just a few small content blocks, rather than building the whole menu with HTML.
Other platforms
The steps above are for Shopify — the default way.
The same as a regular website: there’s no automatic product list, so you pick products by hand. The HTML block works as usual.
Automatic products are available only on Shopify, because they need Shopify’s product and collection lists. On other websites, there’s no automatic block. Add product links by hand (From website or Other).
The HTML block works on every platform, and the steps are exactly the same.