User Guide

Search limit to:






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.

     

    📌 To add Quick access blocks to the menu:

    ✍️ Why would you need to use Quick access blocks?

    Quick access blocks are ideal for menus with numerous items or when you want to highlight specific products or categories. These blocks display submenus as buttons, instantly capturing your customer's attention and guiding them to their desired destination.

     

    ✍️ How to add Quick access blocks to the menu?

    In the Theme Editor, go to Header Product menu Block > Scroll down and find the Quick access blocks section on the new right panel. From here, you need to:

    Step 1: 

    Turn on the toggle that says “Enable quick access blocks”.

    Step 2: 

    Customize the look of all the blocks: Change their positions on the desktop, corner radius, size of icon and font, colors of text, background, etc.

    Step 3: 

    Scroll down to the Block 1 group to:

    • (optional) Add an icon from the list or enter the SVG code. 
    • Enter the Block title.
    • Assign a Block link for it.

    Step 4: 

    (optional) Repeat the process of Step 3 for Block 2, Block 3, and Block 4 if you want to add more quick links.

    Step 5:

    Click Save when done.