Menu
The header mega menu is the Menu model. Footer, USP bar, and account icons are Menu Items. The shop loads the Menu on Settings → Primary Mega Menus whose Locale matches the shopper.
Example of a mega menu:
How to configure
Open Content, then under DEFAULT VIEWS select Menu.
The list includes Menus for every tenant and storefront, so make sure you edit the Menu of the correct tenant/storefront (there is only 1 per storefront).
On the website
On wide screens, a bar item opens a panel. Below 1024px the same menu opens from the hamburger. The blocks are the same; the layout is not. On mobile they stack, and link lists that share a heading are combined into one.
Editable FIELDS in Hygraph
Tenant & Storefront
Select one tenant. You can select more than one storefront.
Locale
Create a menu for each localization relevant to that storefront, otherwise the mega menu will not show on the website for that localization.
Description
(description) is required for internal list view purposes.. The shop does not show it. Make it useful to yourself.
Menu Layout
Each direct entry under Menu Layout is one item in the menu bar. Top to bottom in Hygraph is left to right in the bar.
Title (title) — required, localized. The label in the bar.
URL (url) — optional, localized. A path on this shop. With no blocks, the item is a direct link. With blocks, the title links here, and desktop also shows that link at the bottom of the panel.
Render as dynamic grid (renderAsDynamicGrid) — off by default. Blocks then sit in five columns, filled top to bottom, then the next column. Turn it on to set Number of columns (numberOfCols) for desktop; blocks then run left to right. Mobile is always one column. Every block you add is shown.
Mega Menu Items
Add items (let's call them "blocks") within a mega menu with + Add component. Publish any product, brand, category, or blog on the same tenant and storefront as this menu.
Blog Overview Menu
Use once in a panel. It takes the whole panel: up to 6 Most Popular links and up to 6 blog tiles. Pick existing blogs. See Blog.
Category List
One category, and its children as a list (one level). Do not create the category here. See Create a Category.
Sort order (sortOrder) — Default follows commercetools. Alphabetical sorts the children by title.
Icon (icon) — optional, in front of the title. Enter the icon name only, for example stomach. See Menu Items.
Title text color (titleTextColor) and Title background color (titleBackgroundColor) — optional. They do not change the icon.
Section settings: Sections, Components & Elements.
CTA
The full CTA is shown.
Highlighted Brand
One brand tile. It links to that brand’s page. Do not create brands here.
Highlighted Product
One product tile, filled from the product. Title and Description are labels for you only. Do not create the product here. See Create a Product. Leave the product empty and the block is left out.
Info Card
Same fields as Info Card. In the menu, title, description, image, URL, icon, and button are shown. For the image, see Assets.
Link List
Same fields as Link List. Every link is shown, in the order you set. On mobile, lists with the same Text become one list. The icon uses the light style; enter the name only, for example stomach.
Divider
A full-width line between blocks. See Divider.
Product Listing
The block in the component list is Product Listing.
Title (title) — required, localized. The heading.
Product Selection Type (productSelectionType) — Custom Products, Product Listing, or Category. The heading link comes from the listing or the category. For a listing, see Product Listings.
Product render type (productRenderType) — Full, Large, Medium, Small, Tiny, or Text Only.
Should Render As Text list (shouldRenderAsText) — shows a text list.
Number of Products (numberOfProducts) — how many to show. Empty means 8.
Header changes need a build. See Page revalidation.