User Guide

Search limit to:





How to set up the Simple 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: 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.