1. Set up Navigation in Shopify Admin
- In Shopify admin, go to Online Store > Navigation.
- Click on an existing menu or select Add menu to create a new one.
- Fill in the Title box to give your menu a name (This title won’t show up on site)
- To add a menu item, click Add menu item, enter its name, and assign a link (e.g., page, collection, product, or URL).
- To create a nested menu, click Add menu item again, then drag it under another item by holding the dot icon.
- Click Save.
Note:
|
If you need more detailed guidance, look back at the guide about How to organize menu items in Shopify admin.
2. Assign the menu
📌 Important step: Give the main menu a title: In Theme Editor, click on Header section > Product menu block > Enter the menu title in the Menu Item field on the right panel. ⚠️ You must enter this field for your menu to appear on site. |
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: On the newly appeared panel, click Select menu → Find and choose the menu you created → Tap Select.
Note: Now that you have changed your title, the name of the block will be changed to your new menu title. |
3. Customize the look of the Product menu
📌 To attach a link for the main menu:
In Theme Editor > Header > Product menu block > Click to choose or enter a link in the Menu item link field.
(Optional) Check the box to open the link in the new tab.
📌 To change the tab style for the product menu:
In Theme Editor > Header > Product menu block > Find the part that says Tab style, you will have 2 options to choose from:
📌 To add a label on the menu:
In the Theme Editor, go to Header > Product menu Block > Scroll down and find the Menu label section on the pop-up right panel. From here, you can:
- Enter the text you want to show on the label.
- Change the text & label color.
- Add an icon:
- Choose from the drop-down list
- Find an icon from Eurus’s icon library, copy and enter its name into Use another icon.
- enter the custom icon SVG code.
Leave everything blank to remove the label.
📌 To add a See More button under the menu
In Theme Editor > Header > Product menu block > Under the Menu item link section, you can:
- Add a link for the “See more” button.
- Tick the box “Open the link in a new window” to activate this feature.
- Enter the “See more” button title to make it appear on the menu.
- Choose the alignment for the “See more” button.