In the Design step, when you open the Main menu or Sub menu card, you’ll see two blocks: Icon/Small-image Style and Image style. This is where you set the shared look of the image parts of a menu item: built-in icons, small images used as icons, and large images.
To add an icon or upload an image to a single menu item, see Icons, images and badges. This page helps you look up the shared fields that apply to the whole menu.
These fields are the same on Shopify, Wix and other websites.
Adjust icons and images at the main menu (level 1)
Open the Main menu card › Main menu item, then scroll to Icon/Small-image Style and Image style. All 6 menu types have these two blocks.
Icon/Small-image Style block
| Field in the app | What it does | Default (new menu) |
|---|---|---|
| Font icon color | Changes the color of the built-in icons from the Navi+ library. Images you upload keep their original colors. | #000000 |
| Gap: Text ↔ Icon (px) | The space between the text and the icon. | 2 |
| Icon/Small-image size (px) | The shared size for both icons and small images. Click the field to see sample sizes from 16 to 56. | 22 |
Image style block
| Field in the app | What it does | Default (new menu) |
|---|---|---|
| Image curve (px) | Rounds the corners of every image in the menu item, both large images and small images used as icons. Click the field to choose a sample: 0 is square corners, 500 is a full circle. |
0 (new Icon Menu: 8) |
| Image ratio (auto-crop) | Crops the image frame to a ratio with CSS, without uploading the image again. Works on images already uploaded. Choose one of 4 frames: Unchanged to keep the original, or 3:2, 2:3, 1:1. | Unchanged |
| Small-image size (px) | A separate size for small images used as icons. Enter one number for all screens, or two numbers separated by a vertical bar such as 42 | 60 to show 42px on phones and 60px on computers. If empty, the image uses the size from the Icon/Small-image size field. | 42 (phone), 60 (computer) |
Image ratio only crops large images (Big image) and banner items; it doesn't affect icons or small images. Small-image size is only available in the Icon Menu.
When to adjust these fields:
- Icons look too small or too big next to the text: adjust Icon/Small-image size (px).
- Text sits too close to the icon: increase the number in Gap: Text ↔ Icon (px).
- Images have uneven heights across menu items: pick a ratio in Image ratio (auto-crop) so every image fits the same frame.
- You want softer rounded image corners: increase the number in Image curve (px).
Adjust icons and images at the submenu (level 2–3)
Open the Sub menu card › Sub menu item, then scroll to Icon/Small-image Style and Image style. This card is available in the Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. The Icon Menu doesn’t have a Sub menu card.
The fields here are the same as for level 1, except there is no Small-image size field. Any field you leave empty makes the submenu take its value from the main menu.
| Field in the app | Default (new menu) |
|---|---|
| Font icon color | #434343 |
| Gap: Text ↔ Icon (px) | Empty: Inherit (main menu) — follows the main menu |
| Icon/Small-image size (px) | Empty: Inherit (main menu) — follows the main menu |
| Image curve (px) | Empty: Inherit (main menu) — follows the main menu |
| Image ratio (auto-crop) | Inherit — adds an option to follow level 1, alongside Unchanged, 3:2, 2:3, 1:1 |
When to adjust: when you want icons in the submenu smaller than in the main menu, or want images in the submenu cropped to a different ratio. If you want them to match level 1, just leave the fields empty.
Details for each field at the main menu (level 1)
Each entry below matches one field in the Main menu tab. The path: Design step (number 2 on the left step bar) › Main menu tab › scroll to the block that holds the field.
Font icon color
Where: Design › Main menu › Icon/Small-image Style, the first field. It changes the color of the built-in icons of level 1 items.
- Value: one color (type a
#RRGGBBcode or click the color box). Default#000000. - Applies to: all 6 menu types; level 1 only (level 2–3 has its own field, see below). No plan needed, and it doesn’t depend on other fields.
- What shoppers see: the text-style icons from the Navi+ library change to the color you choose. Images you upload keep their original color. On the Mobile Menu, the close button (×) also changes to this color.
Gap: Text ↔ Icon (px)
Where: Design › Main menu › Icon/Small-image Style, the field to the right of the color box. It increases or decreases the space between the icon (or small image) and the text of a level 1 item.
- Value: a number, in px. Default for a new menu:
0on the Tab Bar; empty on other types (shown as 2px). Negative numbers pull the text closer to the icon. - Applies to: all 6 menu types, level 1, items with an icon or small image. Doesn’t apply to Card, Big image, Group title and Banner items.
- What shoppers see: the larger the number, the further the text sits from the icon. On the Mobile Menu specifically: if you enter
0, the store still shows a 12px gap (Navi+ treats0as “not chosen” for this menu type); to get a tighter gap, enter a different small number, such as 2.
Icon/Small-image size (px)
Where: Design › Main menu › Icon/Small-image Style, the bottom field. It changes the size of icons and small images at level 1. Click the field to see sample sizes from 16 to 56.
- Value: a number, in px. Default
22. - Applies to: all 6 menu types. This field is also the default size for level 2–3: if the Icon/Small-image size field in Sub menu is empty, the submenu uses this size.
- What shoppers see: icons and small images get bigger or smaller depending on the number you enter. Items where you’ve set a separate size in Edit item keep that size and don’t follow this field.
Image curve (px)
Where: Design › Main menu › Image style block, the first field. It rounds image corners. Click the field to choose a sample: 0 is square corners, 500 is a full circle.
- Value: a number, in px. Default
0; a new Icon Menu is8. - Applies to: all 6 menu types. It rounds every image in the menu (small images used as icons, large images, banners) and the background of Card items. Level 2–3 also follows this field when Image curve in Sub menu is empty.
- What shoppers see: image corners become softer as the number increases. The grey placeholder shown while an image loads is rounded by the same number.
Image ratio (auto-crop)
Where: Design › Main menu › Image style block, below the Image curve field. It forces large images in the row into the same frame, so you don’t have to crop them by hand.
- Options: 4 shapes to click — Unchanged (keep as is), 3:2 (landscape), 2:3 (portrait), 1:1 (square). Default Unchanged, so older menus don’t change.
- Applies to: all 6 menu types, but only for Big image and Image Banner items. It doesn’t affect icons, small images or Card items (a Card covers its background image automatically).
- What shoppers see: the image is cropped to the chosen ratio and fills the frame across its width. The original image isn’t changed, so it works on images uploaded earlier too, and switching back to Unchanged restores it. The placeholder frame shown while an image loads also uses this ratio.
Small-image size (px)
Where: Design › Main menu › Image style block, only in the Icon Menu. It sets a separate size for small images used as icons.
- Value: one number for all screens, or two numbers separated by a vertical bar, for example
42 | 60= 42px on phones and 60px on computers. Default for a new Icon Menu:42 | 60. If empty, the image follows the Icon/Small-image size. - Applies to: Icon Menu, level 1, every platform.
- What shoppers see: the images in each Icon Menu tile change height according to this number. From a screen width of about 769px up, the store uses the second number. Items with their own size set in Edit item keep that size.
Details for each field at the submenu (level 2–3)
The path: Design step › Sub menu tab › scroll to the Icon/Small-image Style or Image style block. This tab is available in 5 menu types, not the Icon Menu. Any field left empty makes the submenu follow level 1, so to match the main menu, just leave the fields empty.
Font icon color
Where: Design › Sub menu › Icon/Small-image Style. It changes the color of the built-in icons of level 2–3 items.
- Value: one color. Default
#434343. - Applies to: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu.
- What shoppers see: icons in the submenu change color, separate from the main menu’s icon color. Uploaded images don’t change.
Gap: Text ↔ Icon (px)
Where: Design › Sub menu › Icon/Small-image Style. It adjusts the space between the icon (or small image) and the text at level 2–3.
- Value: a number, in px. Default empty (Inherit (main menu)).
- Applies to: the 5 menu types above, level 2–3 items.
- What shoppers see: the icon-to-text space in the submenu changes with the number. For items with the icon above and the text below (Tab Bar, Floating Button and the 2 mega types), the number you enter is added to the roughly 4px already there (empty or
0gives 4px,2gives 6px,-3gives 1px).
Icon/Small-image size (px)
Where: Design › Sub menu › Icon/Small-image Style. It sets the size of icons and small images at level 2–3.
- Value: a number, in px. Default empty, which follows level 1.
- Applies to: the 5 menu types above.
- What shoppers see: icons and small images in the submenu get bigger or smaller according to this number, independent of the main menu. To make the submenu more compact, enter a number smaller than level 1.
Image curve (px)
Where: Design › Sub menu › Image style block. It rounds image corners at level 2–3.
- Value: a number, in px. Default empty: rounds with the level 1 Image curve. A new Desktop Mega Menu has
8preset. - Applies to: the 5 menu types above; includes small images, large images, banners and the background of Card items at level 2–3.
- What shoppers see: image corners in the submenu are rounded by this number, no longer following the main menu.
Image ratio (auto-crop)
Where: Design › Sub menu › Image style block, below the Image curve field. It crops big images and banners at level 2–3.
- Options: Inherit (follows level 1), Unchanged, 3:2, 2:3, 1:1. Default Inherit.
- Applies to: the 5 menu types above; only Big image and Image Banner items at level 2–3. Doesn’t apply to icons, small images or Card items.
- What shoppers see: images in the submenu are cropped to the chosen ratio and fill the frame. Choose Inherit to crop the same way as the main menu.
Default values table
| Field | Level 1 | Level 2–3 | Menu types |
|---|---|---|---|
| Font icon color | #000000 |
#434343 |
all |
| Gap: Text ↔ Icon (px) | 2 | follows level 1 | all |
| Icon/Small-image size (px) | 22 | follows level 1 | all |
| Image curve (px) | 0 | follows level 1 | all |
| Image ratio (auto-crop) | Unchanged | Inherit | all |
| Small-image size (px) | 42 / 60 | not available | Icon Menu only |
If you created the menu from a ready-made template, these fields may already be set to values other than the defaults above.