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: The level 3 menu items you set up in Shopify admin won’t appear on the storefront if you use the Simple 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 > Simple 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 Simple menu.
Step 4: On the newly appeared panel, click on Select menu → Find and choose the menu you created → Tap Select.
Step 5: Save your changes.
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 Simple menu
📌 To attach a link for the main menu:
In Theme Editor > Header > Simple 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 add a See More button under the menu
In Theme Editor > Header > Simple 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 show images for menu items:
- In the Theme Editor, go to Header > Simple menu Block.
- On the right panel, you can:
For menu items linking to a COLLECTION:
- Check "Show collection images" to display featured images (see this guide from Shopify for adding/changing collection images).
- Check "Auto-fill collection images with first product image" to use the first product image instead. (⚠️ This only works if 'Show collection images' is enabled.)
For menu items linking to a PRODUCT:
- Check "Show product images" to display the product image on the menu.
Note: Ensure you select the correct level (first or second) for menu items and check the box in the right section. |
📌 To show collection images on the menu using metafield:
✍️ Why would you need to use metafield for collection images?
- You want to show a designed image for the collection on the menu, without changing the featured images of that collection.
- You want to show higher-resolution images on the menu.
✍️ How to do it?
- Create a collection metafield:
- In Shopify admin, go to Settings> Custom data > Collection > Add definition.
- Give your metafield a name.
- Choose type as File.
- Click Save.
- Assign a value for the collection metafield:
- Go back to Shopify admin, and click on the Products > Collection tab.
- Choose a collection.
- Scroll down to Metafields.
- Upload an image in the newly created collection metafield.
- Click Save.
- Set up in Theme Editor:
- In Theme Editor (Visit it by clicking on Online store > Themes > Customize)
- Click on Header > Simple menu > scroll to Auto-fill collection images with metafield.
- Copy the text after “custom.” of the metafield’s Namespace and key. → Paste to this “Auto-fill collection images with metafield” field. (See the image below)
- Click Save.
📌 To add a label on the menu:
In the Theme Editor, go to Header > Simple menu Block > Scroll down and find the 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 promotion images on the menu:
In the Theme Editor, go to Header > Simple menu Block > Scroll down and find the Promotions section on the new right panel.
You can: |
By changing this setting: |
Move the promotion section to the left or right side |
|
Change promotion layout to vertical or horizontal |
|
Add promotion images (Up to 3 images) |
|
Adjust the height of the promotion images. |
|
Make the text appear on the promotion images (text overlay). |
|
Change the overlay opacity of promotion images. |
|
Add/change the content of a single promotion block. |