How to set up the Simple menu style?

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.

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.

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