Menu Items

Menu Items are the links in the header and footer. The expandable category menu is a separate model: Menu. Below are screenshots of two examples of website Menu Items:

Header USP bar:

Header icon menu:

A menu item can contain other menu items. The top item (the one with no parent) chooses where the group sits. Its children are the links shoppers see. To show a Content Page in a menu, put that page’s URL on a child.

How to configure

Open Content, then under DEFAULT VIEWS select Menu Items.

The list includes every tenant and storefront. Search and filter it as on other models. See Search Bar and Menus.

Localization

Locales are in the right pane, the same way as on other models. Add a locale for each language this item should use.

FIELDS on the Menu Item model

Tenant & Storefront

Select one tenant. You can select more than one storefront.

Changing these fields moves the item. A child stays hidden on a shop that is not in its own Storefront list, even when the parent is assigned to that shop.

Title

The label shoppers see. The top item’s title is not shown. Titles on children are: footer column headings and links, USP and subfooter links, the text under a header icon on desktop, and the mobile icon label.

Url

A path on this shop, for example /customer/account. Use # when the item should not be a link.

A few paths do more than open a page, in the header icon menu and the mobile icon bar:

• /customer/account/login opens the login window.
• /customer/account, /customer/account/login, and /customer/account/logout mark the account menu. Links to protected areas are added there for logged-in customers.
• /cart and /favourites show a count. /favourites is hidden when favourites are turned off for the shop.

Icon

The icon name with dashes, for example user or shopping-cart. Do not paste a Font Awesome URL. Browse names at Font Awesome.

Shown on the header icon menu and the USP bar (solid style), and on the mobile icon bar (light style). Footer, subfooter, and HeaderMenuBar do not show it.

Visible when

Who sees this link. Set it on the children, not on the top item. Leave it empty for the same result as Always.

• Always — logged in or not.
• LoggedIn — only when the customer is logged in.
• LoggedOut — only when the customer is logged out.

Used on the footer, subfooter, header icon menu, and mobile icon bar. The USP bar and HeaderMenuBar always show their children.

Children

The links under this item. Add them with the buttons. Drag the six dots to reorder them. That order is the order on the website.

The footer shows two levels under the top item: a column, then its links. The header icon menu and the USP bar show one level, plus one dropdown under a child. Anything deeper is not shown.

Parent

The item this one sits under. Do not set Menu Location on a child.

⚠️ A menu item has only one parent. It cannot sit under two menus at the same time. For example: if a menu item Contact already lives under the footer column Service, and you add that same item under the header account menu, it will leave Service. It then shows only in the account menu. For the same link in both places, create a second menu item with the same title and URL.

The shop uses the first top item for each location. One top item per location is enough.

Menu Location

Set this only on the top item. On existing items, leave it as it is.

Header Usp Bar

Links at the very top, above the search bar, on desktop. On mobile they sit inside the hamburger menu. The USP sentences in that bar are Shop Usps on Settings, not this menu item.

Footer

The columns of links in the footer. Newsletter, logos, and payment icons are not menu items. The USP blocks there are Footer USPs on Settings.

HeaderIconMenu

Icons to the right of the search bar. On desktop the title sits under the icon.

HeaderMenuBar

Text links on a landing-page header, only when that page has no custom header.

Subfooter

The link strip at the very bottom, under the footer. The copyright sentence beside them is Copyright on Settings.

MobileIconMenu

The icons along the bottom of the mobile menu.

Display on

Which screen size shows this link. Set it on the children. Used on the USP bar, the header icon menu, and the mobile icon bar. Footer, subfooter, and HeaderMenuBar ignore it.

• Mobile and Desktop — both. This is also what happens when nothing is selected.
• Mobile — small screens only.
• Desktop — large screens only.

Header and footer changes need a build. See Page revalidation.