A grid of named icon or image tiles, placed right in the page and scrolling along with it. Shoppers see what the store sells without opening a menu. Works on both phones and desktops.
Before you start: Navi+ is installed and you have turned on Store Connector in your theme.
1Choose a menu type
In Navi+ click Add menu, then choose the Icon Menu card.
2Two ways to start
Build from your store's links
Click Create from your website > Build it step by step. Tick the links you want as tiles in the Pick a menu list column (existing menus, collections, products), choose 3, 4 or 5 tiles under How many items per row?, choose a tile style, then click Generate menu.
From a template or from scratch
Click Create from a template > Browse templates. Choose a template and Use this template (with Quick test to try it first), or choose the Blank card for an empty menu and then Add item yourself.
3Fine-tune by hand
Whether you build from links or from a template, you still fine-tune in Build Menu: drag tiles to reorder, click a tile to rename it, change its icon or image, its badge such as New or -30%, and its link. Go to Design to change colors and font size.
Limit: an Icon Menu has only one layer of tiles. Each tile is one item and has no sub-items. For shoppers to pick a subcategory, use a Mobile Mega Menu or a Mobile Menu.
4Typical item patterns
Click + ITEM to open the Add item popup, then choose a pattern. These are the most used patterns in a grid.
Icon and image tiles: the patterns that make up the grid
In Links & icons, choose Icon grid (icons with a name below) or Image grid (category images with a name). Each tile is one item: click it to rename it, swap the icon for an image, add a badge or change its link. For a wider or narrower tile, set Width layout on that tile, for example 3/12 or 2/10. The narrower the tile, the more fit in one row.
Banners and Cards
In Cards & banners: large images with text and a button, placed next to the tiles to promote a new campaign or collection.
Automatic product blocks
In Live sections: New arrivals, Best sellers or Custom rule. Products are pulled from a collection and refresh automatically, up to 20 per block. Shopify only.
Campaign spot
A slot reserved for a campaign: assign it and it shows a Tag (HOT, SALE), a countdown or a scheduled banner, and removes itself when it expires.
HTML block
In Media & code: paste HTML code (an embedded video, sign-up form, widget) into the middle of the grid. Paste only code you trust.
Shopify menu (embedding a whole Shopify menu), Sticky line and Menu reference are only in a Mobile Menu, not in an Icon Menu: Mobile Menu.
5Publish: place the grid on the page
Open Publish, choose where to place it, then click Turn on. The Icon Menu sits inside the page, so it needs a placement spot. Navi+ has already found the spot right under the header on your theme.
Add below your header
The tile grid sits right under the header, above the page content. The theme's navigation menu stays intact. Best when you want a way into categories at the top of the home page.
Below another Icon Menu
Stack it under an Icon Menu already placed. Choose the Icon Menu above, set the spacing and a divider line between the two grids. Good when you want two grids side by side, for example main categories followed by featured collections.
Need another spot, for example before or after any element? Choose Somewhere else and use a CSS selector. To show it on phones, desktops or both, choose under Configure. To choose which pages it appears on, see Choose pages, devices and who sees the menu.
Number of tiles per row on desktop
One menu for both devices: wide screens fit more tiles. Set Desktop/mobile display ratio from 1x to 5x. For example, 4 tiles on a phone with 2x becomes 8 tiles on a desktop.
See how to adjust itOther platforms
The steps above are for Shopify — the default way.
On Wix, Add menu opens the template picker directly instead of the builder above; choose Icon Menu and a template, then edit it in the menu editor. Wix has no “Menu in Section” app block, so it can only be placed with a CSS selector. The Live sections block is only on Shopify.
On WordPress and other websites, Add menu opens the template picker directly instead of the builder above; choose Icon Menu and a template, then edit it in the menu editor. There is no “Menu in Section” app block, so it can only be placed with a CSS selector. The Live sections and Shopify menu blocks are only on Shopify.