1. What is the Product Menu?
The Product Menu is a mega menu layout that displays menu items with a focus on the products, showing each product as a compact card with its image, title, and price.
The Product menu can show up to 4 menu levels: the menu title you set in the block, plus up to 3 levels from your Shopify admin menu.
2. When to use the Product Menu?
-
You want customers to browse and shop without leaving the menu.
-
Your product catalog has clear subcategories (e.g., accessories, gear types).
-
You want to highlight popular or seasonal products right in your navigation
3. How to set it up?
To make a Product menu fully yours, there are 3 processes to go through:
Process 1. 🤔 Organize menu items in the Shopify admin.
|
STEP 1: In your Shopify admin, go to Content > Menus.
STEP 2: From here, you can:
- Click on the title of the menu you want to edit
-
Or click “Add menu” to build a new one from scratch.
STEP 3: Fill in the Name box to give your menu a name (This title won’t show up on the site)
STEP 4: Structure your menu:
-
To add a menu item, click “Add menu” item, enter its name, and assign a link to the collections.
-
To create a nested menu, click “Add menu” item again, then drag it under another item by holding the dot icon. (⚠️ Note: Only the menu items linked to a Product are shown as product cards - see "🔖 How your menu levels appear on the site" below. 🚨)
STEP 5: Click “Save” when done.
🔖 How your menu levels appear on the site:
Your Product menu counts the menu title from the block as Level 1, then adds up to 3 levels from your Shopify admin menu:
|
Level on the site
|
Where it comes from
|
How it shows
|
|
Level 1
|
The Menu Item field in the Product menu block
|
The menu title on the header navigation bar.
|
|
Level 2
|
The 1st-level items of your admin menu
|
A list on the left side of the mega menu. Hover over an item to open its contents.
|
|
Level 3
|
The 2nd-level items of your admin menu
|
Either product cards or group titles - see the 2 cases below.
|
|
Level 4
|
The 3rd-level items of your admin menu
|
Product cards, shown under each group title.
|
What appears at Level 3 depends on whether products are nested one level deeper:
✅ Case 1 - Products directly under a Level 2 item (no products at Level 4):
-
Level 3 shows only the items linked to a product, as product cards.
- Items linked to anything else (a collection, page, URL…) are hidden.
- No group titles and no Level 4 are shown.
✅ Case 2 - Products nested under Level 3 items (products at Level 4):
-
Level 3 shows all items as group titles - including titles with nothing under them. Each title becomes a column heading.
-
Level 4 shows only the items linked to a product, as product cards (image, title, price) listed under their title. Other items at Level 4 are hidden.
- Level 3 items linked to a product also show as titles only - not as product cards.
|
Process 2. 🤔 Assign the created menu to the Product Menu block
|
STEP 1: Go to Online Store > Themes > “Customize”.
STEP 2: In the Theme Editor, under Header, find the Header section.
STEP 3: Click “Add block”, then tap on the Product menu.
STEP 4: 📌 Important step: Give the main menu a title:
Enter the menu title in the Menu Item field. This title is the 1st level of your Product menu.
⚠️Note: You must enter this field for your menu to appear on the site.
STEP 5: Still in the Product menu block, find the Menu setting, click “Select”, then find and choose the menu you created as guided in process 1.
STEP 6: Click “Save” when done.
|
Process 3. 🤔 Customize the Product menu
You’ve finished with the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action:
|
📌 3.1. To attach a link for the main menu:
|
|
In Theme Editor > Header section > Product menu block > Click to choose or enter a link in the Menu item link field.
(Optional) Turn on the setting to open the link in a new tab.
|
|
📌 3.2. To add a label to the menu:
|
|
In the Theme Editor, go to Header section > Product menu block > Scroll down and find the Menu Label section on the right panel. From here, you can:
STEP 1: Enter the text you want to show on the label into the Label field.
STEP 2: Change the text & label color.
STEP 3: Add an icon to the label, choosing one of the 3 ways:
-
Method 1: Choose from the Icon drop-down list.
-
Method 2: Find an icon from the Icon library, copy and enter its name into the Use another icon field.
- Method 3: Upload a custom icon image.
STEP 4: Save when done.
⚠️ Note: Leave everything blank to remove the label.
|
|
📌 3.3. To add a "View all" link:
|
|
The "View all" link appears next to the menu title inside the mega menu, letting customers jump to a full listing page.
In the Theme Editor, go to Header section > Product menu block:
-
Choose or enter the destination in the "View all" link field. (Optional) Once a link is added, turn on Open this link in a new tab.
-
Change the text shown to customers in the "View all" link title field (default: View all).
|
|
4. Change Logs
🚩 Version 2.2.0: The Product menu now shows up to 3 levels from your Shopify admin menu. Together with the Menu Item title, it can display up to 4 menu levels. Products can be shown at Level 3 or Level 4, depending on your menu structure, and now display in a more compact card layout.
Need help? Contact our support team at Omni Themes Support.
