How to set up the Tabbed 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 > Tabbed 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 Tabbed 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 Tabbed menu

📌 To attach a link for the main menu:

In Theme Editor > Header > Tabbed 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 tabbed menu:

In Theme Editor > Header > Tabbed menu block > Find the part that says Tab style, you will have 2 options to choose from:

📌 To add a See More button under the menu:

In Theme Editor > Header > Tabbed 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 > Tabbed 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’s 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.

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

• In Theme Editor (Visit it by clicking on Online store > Themes > Customize)
• Click on Header > Tabbed 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.
• Click Save.

📌 To change the image ratio for menu items:

In Theme Editor > Header > Tabbed menu block > Under the Image ratio, choose the ratio you want. (This only applies to the images of submenu items)

📌 To add a label on the menu:

In the Theme Editor, go to Header > Tabbed 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 promotion images on the menu:

In the Theme Editor, go to Header > Tabbed 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.