Besides the item name, you can add to each menu item an icon, a small image, a badge dot on the corner of the icon, or a sub-line of text right below the name.
Open the settings for each item
- Open the menu in the Navi+ app, go to the Build Menu step, then click an item’s name to open the Edit item panel.
- The settings in this guide apply only to the item you have open. To change the color or size for the whole menu, go to the Design step and see Style the main menu.
Use an icon or upload your own image?
Each menu item uses just one picture: choose an icon from the library, or upload your own image. The two fields sit side by side, separated by the word OR. When you pick one, the other is replaced automatically.
- Icon: a line-drawn icon, sharp at any size, with no image file needed.
- Uploaded image: a good fit when you want a logo, a real product photo, or your store’s own icon set.
- To remove the picture in use, click the trash icon just above the picker.
Choose an icon from the library
-
In the menu tree, click the name of the item you want to edit to open the Edit item panel.
Menu itemsHome/AutoShopcollections/allAuto1Click the item nameSearchsearchAutoWishlistpages/wishlistAutoCartcartAutoITEM -
Click the Icon field, type an English keyword such as
home,cart, orphone, then click the icon you like. The icon appears on the menu item right away.‹ BackEdit item2Choose an iconORUpload small image (as icon)jpg, png, svg, webp…Basic infoTextLanguage CartLink to Auto-clean URLLanguage cartAdd dividerAdd badgeSub text (optional)Language E.g. Free shipping over $50LayoutDisplay layoutAUTOICON + TEXTTEXT ▸IMAGETEXT ONLYWidth layoutAutomaticStyleFollows the menu's styleCustomizeVisibilityShowing under all conditionsEdit rulesSubmenuAdvanced -
Click Save.
The icon picker has two tabs:
- Remix: the RemixIcon set, available on every plan.
- Google: the Material Symbols set, in BETA, with more than 4,000 icons. You can adjust the stroke weight. It’s available on the Business plan or higher.
Upload your own image to a menu item
-
In the Edit item panel, scroll to Media and click Upload Small-image (as icon).
‹ BackEdit itemORUpload small image (as icon)jpg, png, svg, webp…1Upload an imageBasic infoTextLanguage CartLink to Auto-clean URLLanguage cartAdd dividerAdd badgeSub text (optional)Language E.g. Free shipping over $50LayoutDisplay layoutAUTOICON + TEXTTEXT ▸IMAGETEXT ONLYWidth layoutAutomaticStyleFollows the menu's styleCustomizeVisibilityShowing under all conditionsEdit rulesSubmenuAdvanced -
Choose an image file from your computer. The app accepts
jpg,png,gif,webp,svg, andaviffiles. -
Wait for the image to appear on the menu item, then click Save.
For menu items that show a large image, such as Big image or Image banner, this button is renamed Upload image, but it stays in the same place.
Recommended image sizes
| Image type | Recommended size | How Navi+ handles uploads |
|---|---|---|
| Icon, or a small image that replaces an icon | Square 1:1 image, with a transparent background if it’s a logo. An svg file is best |
Uploads up to 1 MB. The app resizes to about 280×90 px on the Business plan, or 320×96 px on the Elite plan |
| Large images, such as Big image, banners, or background images | Landscape image at least 800 px wide. A few hundred KB is about right | Uploads up to 15 MB. The app resizes to a maximum width of 800 px on the Business plan, or 1600 px on the Elite plan |
svgfiles are kept as they are and aren’t compressed.- The heavier the image, the longer shoppers wait for the menu to load on their phones. Lightly compress your images before you upload them.
Keep the original image quality
By default, Navi+ compresses images so the menu loads light. If a key product image needs its original sharpness, upload it directly to Shopify’s file library, then paste its link into Navi+. This method is available on the Elite plan.
-
Compress the image to a few hundred KB, and give the file a clear name, such as
mens-tshirt.jpg. -
In the Shopify admin, open Content > Files, then drag the image in from your computer.
-
Find the file you just uploaded, then click the link icon beside it to copy the image’s URL.
-
Go back to Navi+, open the Upload image window, and paste the copied URL into the URL field.
Set a background image for a menu item
Some item types use an image as a background, such as cards and banners. For a card, the image you upload sits behind the text, which is placed on top of it.
For regular menu items, if you want a picture behind the whole item, upload the image to the Background Image field in that item’s style settings.
Add a badge dot or cart count to an icon
When you tick the Add badge box, a small round dot appears at the top of the icon. This is an indicator dot, not a field where you type text.
After you tick it, two more options appear for the cart item:
- Show badge (+n) when items are in the cart: the badge dot shows only when the shopper’s cart has products in it.
- Show cart count: shows the actual number of products in the cart, instead of a plain dot.
These two cart options are available only on the Business plan or higher.
The badge color is set in one place for the whole menu. Go to the Design step, open the Main menu section, then choose a color in the Badge color field. Every badge dot on the menu changes to this color.
Badges here are only a colored dot, or a number showing the cart count, at the corner of an icon. They aren't text labels like "Sale" or "New". To add a label like that, type it into the item name, or write it in the small text line below. Badge dots show most clearly on a Tab Bar, because every item there has an icon. Open the preview to check on the menu type you're building.
Add a small line of text under an item name
The Sub text (Optional) field adds a small line of text right under the menu item’s name. It’s a good place for a hotline number, opening hours, or a short note such as “Call 8am–9pm”.
This sub-text appears only when the menu item layout you choose has room for two lines of text. If you choose a layout that shows only the icon, or only one line of the name, the sub-text is hidden automatically.
Icon and image questions
Why does the icon on my store look different from the one I chose?
The Icon field only decides the shape of the icon. The icon’s color and size are set in the Design step, under Main menu, or under Sub menu for level 2–3 items. Check whether the icon color matches the menu’s background color, and whether you clicked the right picture in the Icon field.
Why does my uploaded image look as small as the icon?
For a regular menu item, the uploaded image sits where the icon would be, so it stays the size of that slot. To show a large image, create a new item of type Big image or Image banner, or use a card. Choose the item type when you click to add the new item, because you can’t change the type once the Edit item panel is open.
Why does my icon or image look blurry?
A blurry image usually means the original file is too small, so it gets stretched on a phone screen. Switch to an svg file, or use a square png at least twice the size it’s displayed in the menu.
Why can’t I tick the two cart boxes in the badge section?
The options that show the badge dot and count the cart are available only on the Business plan or higher. On the Starter plan, you can only turn on the plain round dot.
Other platforms
The steps above are for Shopify — the default way.
Icons, images, and badges work exactly like on Shopify. The only difference is in “Keep the original image quality”: instead of Shopify Files, use wherever you store images, such as the Wix media library, and paste that image’s URL.
Icons, images, and badges work exactly like on Shopify. The only difference is in “Keep the original image quality”: instead of Shopify Files, use wherever you store images on your website, and paste that image’s URL.