How to set up the Product menu style?

by Admin on Sep 24, 2024

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:

🚨 Each level 2 nested menu item must link to a Product. 🚨
The level 3 nested menu items you set up in Shopify admin won’t appear on the storefront if you use the Product menu type.

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:

Vertical:

Horizontal:

📌 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.