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.

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