User Guide

Search limit to:






Mobile navigation

by Admin on May 03, 2024

1. What is mobile navigation?

Mobile navigation refers to the menu system specifically designed and optimized for display on mobile devices. Usually, the mobile menu is a responsive version of the desktop menu, which includes buttons, icons, and menus. In the case of Eurus theme, it offers the flexibility to create a separate menu compared to the desktop menu, tailored to enhance user experience and navigation efficiency on mobile platforms.

2. How to create menu items on mobile?

To create menu items on mobile, please follow these step:

In the Header section group, add the "Mobile Navigation" section.

a) Approach 1: 

In section settings, select the menu and display up to a maximum of 3 levels as default. To show a 4-level menu, leave this field blank.


b) Approach 2: 

Add menu blocks, enter the menu name, and select the menu (or enter menu link). Shopify menus support only up to 3 levels. However, with this setting of Eurus theme, you can set up to a maximum of 4 levels.

Note: If at least one menu block is added, the menu selection within the section settings will not take effect.

3. How to show cart and account icons on mobile?

  • To display the cart and account icons on mobile: Add the "Cart" and "Account and log in" blocks to the desired section. No customizable settings available for those blocks.

  • To configure the language and currency selectors and apply styling:

Enable "Show language selector" and "Show currency selector" options in the theme settings.

Customize the appearance of the selectors using the available styling options such as color, configurations in theme settings, custom CSS.

  • Additionally, you can show other content such as custom text, or images by adding corresponding blocks.

Block image for mobile navigation:

Block text for mobile navigation:

4. How to show collection images on the mobile menu?

You can now show the collection images even on the mobile menu, just with some simple steps:

Step 1: Go to the Theme Editor by clicking on Online store > Themes > Customize 

Step 2: Select the Mobile Navigation section under the Header area.

Step 3: 

  • Click on the specific menu block to set up the images. For example, the KIDS block.
  • If you don’t have a menu block yet, add one by clicking on Add block, and then choosing Menu.

Step 4: Check the corresponding box:

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

→ The Tab items section is for the first-level menu items

→ The Submenu items section is for the second-level menu items

Step 5: (Optional) Change the Image size, you can choose between Small and Large (the default setting is Large)

Step 6: Click Save to finish.


📌 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 Mobile navigation > tap on a menu block > scroll to Auto-fill collection images with metafield on the newly appeared panel.
        • 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.

      5. How to show promotion images on the mobile menu?

      In the Theme Editor, go to Mobile navigation > Menu Block > Scroll down and find the Promotions section on the newly appeared panel.

      You can:

        • Add a promotion image for the menu
        • Tick on Enable text overlay to make the text appear on the promotion image.
        • Change the Overlay opacity.
        • Add/change the content of a promotion block.
        • Add a button for the promotion image.

      6. How 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 Mobile navigation > Add new 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: Enable swipe on mobile, 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.