Mobile navigation

You can show up to 4 levels of your menu, all in one screen, when using this menu block type:

STEP 1: In the Accordion menu block setting panel, click “Select” in the Menu setting to assign a menu from your Shopify navigation. 

STEP 2: (Important!) Type in a name that will appear on the store for the menu in the Menu item field.

STEP 3: Set up your first-level menu items (which are shown as the 2nd-level menu items on the storefront)

Note: The Tab items section is for the first-level menu items

• 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.)
• Check "Show product images" to display product images on the menu. 

STEP 4: Set up your 2nd-level menu items (which are shown as the 3rd-level menu items on the storefront):

Note: The Submenu items section is for the second-level menu items

• 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.)
• Check "Show product images" to display product images on the menu. 
• Using the “Auto-fill collection images with metafield” to override collection images with custom ones. Please refer to the next part about “How to show collection images on the menu using metafield?” for a detailed explanation.

STEP 5: Choose the Image style to be Square or Rounded.

STEP 6: Click “Save” when done.

Only the first level of your menu will be shown when using this menu block type:

STEP 1: In the Carousel menu block setting panel, click “Select” in the Menu setting to assign a menu from your Shopify navigation. 

STEP 2: (Important!) Type in a name that will appear on the store for the menu in the Menu item field.

STEP 3: Set up to show or hide the collections/ product images:

You have several options to choose from under the Tab items section:

• 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.)
• Check "Show product images" to display product images on the menu. 
• Using the “Auto-fill collection images with metafield” to override collection images with custom ones. Please refer to the next part about “How to show collection images on the menu using metafield?” for a detailed explanation.

STEP 4: Choose the Image style to be Square or Rounded.

STEP 5: Click “Save” when done.

You can show up to 4 levels of your menu, each level is on a separate screen, when using this menu block type:

STEP 1: In the Menu block setting panel, click “Select” in the Menu setting to assign a menu from your Shopify navigation. 

STEP 2: (Important!) Type in a name that will appear on the store for the menu in the Menu item field.

STEP 3: Set up your first-level menu items (which are shown as the 2nd-level menu items on the storefront)

Note: The Tab items section is for the first-level menu items

• 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.)
• Check "Show product images" to display product images on the menu. 

STEP 4: Set up your 2nd-level menu items (which are shown as the 3rd-level menu items on the storefront):

Note: The Submenu items section is for the second-level menu items

• 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.)
• Check "Show product images" to display product images on the menu. 
• Using the “Auto-fill collection images with metafield” to override collection images with custom ones. Please refer to the next part about “How to show collection images on the menu using metafield?” for a detailed explanation.
• (Optional) Change the Image size, you can choose between Small and Large (the default setting is Large)
• (Optional) Choose the Submenu layout to be 1 or 2 columns.

STEP 5: Choose the Image style to be Square or Rounded.

STEP 6: Click “Save” when done.

STEP 1: Go to Theme Editor > Header > Mobile navigation section.

STEP 2: Click “Add block” under the section and choose the Account and log in block, the Cart block, or the Social icons block.

STEP 3: Drag and drop the block to arrange its position.

STEP 4: Click "Save" and preview.

✍️ How to do it?

STEP 1: Create a collection metafield: 

• In Shopify admin, go to Settings > Metafields and Metaobjects > Collection > Add definition.
• Give your metafield a name.
• Choose type as File.
• Click Save.

STEP 2: 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.

STEP 3: 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.
• Under the metafield's name, copy the text after “custom.”→ Paste to this “Auto-fill collection images with metafield” field. (See the image below).

STEP 4: Click "Save".

✍️ How to add Quick access blocks to the menu?

STEP 1:

In the Theme Editor, go to Mobile navigation > Add one of the 3 Menu Block types (Accordion menu, Carousel menu, or Menu) > Scroll down and find the Quick access blocks section on the new right panel.

STEP 2: 

Turn on the toggle that says “Enable quick access blocks”.

STEP 3:

Customize the look of all the blocks: Enable swipe on mobile, corner radius, size of icon and font, colors of text, background, etc.

STEP 4: 

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 5: (optional) Repeat the process of Step 3 for Block 2, Block 3, and Block 4 if you want to add more quick links.

STEP 6: Click "Save".

✍️ Method 1: To show the image inside a menu item:

STEP 1: 

In the Theme Editor, go to Mobile navigation > Add one of the 3 Menu Block types (Accordion menu, Carousel menu, or Menu) > Scroll down and find the Promotion section on the new right panel.

STEP 2: 

In the Image setting, click "Select" to assign an image.

STEP 3: 

Tick 'Enable text overlay' to make the text appear on the promotion image, and adjust the Overlay opacity and other Colors as needed.

STEP 4: Add more content:

• Add/change the content of a promotion block.
• Add a button for the promotion image.

STEP 5: Click “Save” when done.

✍️ Method 2: To show the image right outside the mobile menu:

STEP 1: 

In the Theme Editor, go to Mobile navigation > Add an Image block, drag and drop it to the position you want.

STEP 2: 

In the Image setting, click "Select" to assign an image.

STEP 3: 

Add a link for the Image or click to open this link in a new window.

STEP 4: Click “Save” when done.

Adding a small label next to the menu name is a great way to draw user attention.

To bring the label up, just do these steps:

STEP 1:

In the Theme Editor, go to Mobile navigation > Add one of the 3 Menu Block types (Accordion menu, Carousel menu, or Menu) > Scroll down and find the Menu label section on the new right panel.

STEP 2: 

Enter content into the Label field.

STEP 3:

Customize the colors of the label as you want.

STEP 4: (Optional)

Choose an existing icon from the Icon dropdown list, or if you want to use a different icon from the list, there are two options:

• In the Icon drop-down list, choose Use another icon, then copy the icon name from this theme icon list and paste it into the Use another icon field.
• In the Icon drop-down list, choose Use another icon, then paste the SVG code of your go-to icon into the Custom icon (SVG code) field.

STEP 5: Click "Save".

Eurus lets you draw attention to specific menu items using stylish effects like sparkles, circles, or underlines. 

Here’s how to set it up:

STEP 1:

In the Theme Editor, go to the Mobile navigation section under Header group > find the Menu highlight section.

STEP 2: 

Toggle on the Enable menu highlight setting.

STEP 3:

Enter the menu names into the Highlight menus. Some rules to notice are:

• Menu names MUST MATCH EXACTLY, including case and spacing. 
• Enter one menu name per line. For example, if the menu name is "NEW ARRIVALS," you must enter NEW ARRIVALS, exactly as it appears in your menu.

• Include translations for multilingual stores.

STEP 4: 

Choose the highlight Style you want & change the color.

STEP 5: Click "Save".