1. What is Menu drawer?
Menu drawer allows you to create a responsive version of the desktop menu. Instead of displaying the full navigation bar, the menu is collapsed into a drawer that slides in when users tap the menu icon (☰).
This helps keep the header clean and uncluttered while still giving customers quick access to all navigation links, collections, and important pages.
2. Section Components
| Section | Menu drawer | Used to create a responsive version of the desktop menu. |
|---|---|---|
| Available blocks | Accordion menu | Used to show a menu with expanded/collapsed submenus inline on the same screen. |
| Carousel menu | Used to show a menu that displayed as horizontal sliders (like a carousel). | |
|
Tab menu |
Used to show a simple menu with each submenu opening a new screen. | |
| Cart | Used to show a quick link to the customer's cart. | |
| Account and log in | Used to show a button for customers to quickly log in to their accounts. | |
| Social icons | Used to show quick links to other social media platforms of your store. | |
| Text | Used to show a simple text on the menu drawer. | |
| Image | Used to show an image with a link on the menu drawer. | |
| Button | Used to show a CTA button on the menu drawer. |
3. Location & Setup
To add & set up the Menu drawer:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Navigate to the Header section on the left-hand side.
- Click on the Header section.
- Toggle Enable drawer menu ON.
- If it is hidden, click the eye button to unhide.
4. Two main ways to build your Menu drawer
4.1. ✅ Quick & Simple: Just set up in the Menu drawer section
🤔 If you:
- Just want to show a basic dropdown menu you set in the Shopify admin.
- Just need up to 3 levels for your menu.
- Don’t need a different layout or visual styling for each menu item.
✍️ Then do this:
STEP 1: Go to Theme Editor > Header > Menu drawer section.
STEP 2: In the Menu dropdown, select your existing menu that you have set in the Shopify admin (Content > Menus).
⚠️ Note: If you add any Accordion menu, Carousel menu, or Tab menu blocks, the menu selected in this Menu setting will be ignored. In this case, follow the steps in 4.2. 🧩 Fully Custom to set up your menu using blocks.
STEP 3:
- (Optional) Enable language and currency selectors
- (Optional) Customize background, text, and divider colors for both light and dark mode if needed.
STEP 4: Hit Save.
4.2. 🧩 Fully Custom: Use blocks to design your own menu drawer
🤔 If you:
- Want to have a 4-level menu drawer.
- Want to present each of your menu items in a more diverse way (with carousel, accordion, etc).
✍️ Then do this:
STEP 1: Go to Theme Editor > Header > Menu drawer section.
STEP 2: Click “Add block” under the section and choose the block type you want to present your menu: Accordion menu, Carousel menu, or Tab menu blocks.
STEP 3: Depending on the block type you use, read the corresponding case below:
🤔 How to set up the Accordion menu block?
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: (Optional) Add a link to the menu item for navigation
To direct customers to a specific page when they click the menu item name:
- Paste a link in Menu item link.
- (Optional) Toggle “Open this link in a new window” to navigate customers to a new window.
STEP 4: 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 5: 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 6: Choose the Image style to be Square or Rounded.
STEP 7: Click “Save” when done.
🤔 How to set up the Carousel menu block?
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.
🤔 How to set up the Tab menu block?
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 Tab 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: (Optional) Add a link to the menu item for navigation
To direct customers to a specific page when they click the menu item name:
- Paste a link in Menu item link.
- (Optional) Toggle “Open this link in a new window” to navigate customers to a new window.
STEP 4: 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 5: 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 6: Choose the Image style to be Square or Rounded.
STEP 7: Click “Save” when done.
STEP 4: Click "Save" when you finish.
If you want to add some interesting elements such as Label, Sparkle effect (Menu highlight), and more, read the next part.
5. Advanced customizations.
🤔 How to show cart and account icons, or social icons on menu drawer?
STEP 1: Go to Theme Editor > Header > Menu drawer 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 show collection images on the menu using a 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?
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 Menu drawer > 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.
STEP 4: Click "Save".
🤔 How to add Quick access blocks to the menu?
✍️Why would you need to use Quick access blocks?
- 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 add Quick access blocks to the menu?
STEP 1:
In the Theme editor, go to Menu drawer > Add one of the 3 Menu Block types (Accordion menu, Carousel menu, or Tab 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 carousel on desktop, corner radius, size of font, colors of text, button, 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".
🤔 How to show promotion images on the menu drawer?
There are two ways to add a promotional image to your menu drawer:
- Method 1: Add the image inside a menu block. (This makes the image shown only if the customers open those menu items).
- Method 2: Add the image to the Menu drawer section. (This makes the image shown right outside when the customers view the menu drawer).
✍️ Method 1: To show the image inside a menu item:
STEP 1:
In the Theme Editor, go to Menu drawer > Add one of the 3 Menu Block types (Accordion menu, Carousel menu, or Tab 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 menu drawer:
STEP 1:
In the Theme Editor, go to Menu drawer > 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.
🤔 How to show a label on the FIRST-LEVEL menu items of the menu drawer?
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 Menu drawer > Add one of the 3 Menu Block types (Accordion menu, Carousel menu, or Tab 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".
🤔 How to show a label on the Submenu items of the menu drawer?
With Carousel menu, Accordion menu, and Tab menu blocks, you can add a label to submenus at any level.
STEP 1: Open the settings
Under the Menu drawer, click on Carousel menu/Accordion menu/Tab menu block to open its settings panel, then scroll down to Submenu label settings group.
STEP 2: Choose submenus to label
At Labeled submenus, enter the dropdown submenu names (menu level) that you want to add labels to. Some rules to notice are:
- Submenu names MUST MATCH EXACTLY, including case and spacing.
- Enter one submenu name per line.
- Include translations for multilingual stores.
⚠️ Note: Don’t add extra space before or after submenu names.
STEP 3: Enter label text
Enter the Submenu label you want to display on the submenu.
STEP 4: Adjust label’s look
Choose colors for the label and label text. You can also add an Icon to the label.
STEP 5: Click "Save".
🤔 How to add a special highlight effect to the menus?
Eurus lets you draw attention to any menu/menu level using stylish effects like sparkles, circles, or underlines.
STEP 1:
In the Theme Editor, go to Header > click on Menu drawer section > Menu highlight settings group.
STEP 2:
Toggle on the Enable menu highlight setting.
STEP 3:
Enter the 1st-level or sub-level menu names that you want to add highlight effects into the Highlight menus.
Some rules to notice are:
- Menu names/menu level names MUST MATCH EXACTLY, including case and spacing.
- Enter one menu name/menu level name per line.
- Include translations for multilingual stores.
For example, if the menu level 2’s name is "Make up," you must enter Make up, exactly as it appears in your menu.
⚠️ Note: Don’t add extra space before or after, e.g., "Make up" (with a trailing space), as it won't work.
STEP 4:
Choose the highlight Style you want & change the color.
STEP 5: Click "Save".
6. Support Information
Need help? Contact our support team at Omni Themes Support.
