The Menu Drawer is the slide-out navigation panel that opens when customers click the menu icon. It is mainly used on mobile and tablet, and can also be used with header layouts that rely on a drawer-style menu.
This guide explains how to set up the Menu Drawer using the Header section and Shopify menus.
STEPS:
1. Understanding the Menu Drawer
The Menu Drawer displays navigation links from the menu selected in the Header section.
It can include:
- Main navigation links
- Nested menu links
- Mobile-specific menu
- Customer account link
- Language selector
- Country/region selector
- Social media icons
- Optional promotion card
- Optional mobile product showcase for supported menu items
The Menu Drawer uses the Mobile menu setting if one is selected. If no Mobile menu is selected, it uses the regular Menu setting.
2. Create or Edit a Shopify Menu
First, prepare the menu that will be used in the Menu Drawer.
- From Shopify admin, go to Content > Menus.
- Open an existing menu or create a new menu.
- Add the menu items you want to display.
- Add nested menu items if you want dropdown-style navigation inside the drawer.
- Link each menu item to the correct destination.
- Click Save.
Menu items can link to:
- Collections
- Products
- Pages
- Blogs
- Policies
- Search
- External URLs
Nested menu example:
Shop
- New Arrivals
- Best Sellers
- Dresses
- Accessories
3. Select the Menu in the Header Section
After creating the menu, assign it in the Header section.
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the Header section.
- Find the Menu setting.
- Select the main menu for your store.
- Click Save.
The Menu setting is used for the main header navigation and can also be used by the Menu Drawer.
4. Set a Separate Mobile Menu
Be Yours also supports a separate Mobile menu setting.
This is useful when you want the Menu Drawer to show different links from the desktop header menu.
To set a separate mobile menu:
- Open the Header section.
- Find the Mobile menu setting.
- Select the menu you want to use in the Menu Drawer.
- Click Save.
Behavior:
| Mobile menu setting | Result |
|---|---|
| A menu is selected | The Menu Drawer uses the selected Mobile menu. |
| No menu is selected | The Menu Drawer uses the regular Header Menu. |
Use a separate Mobile menu when you want a simpler or more mobile-friendly navigation structure.
5. Configure Mobile Logo Position
The Header section includes a Mobile logo position setting.
Available options:
| Option | Behavior |
|---|---|
| Center | Displays the logo in the center on mobile. |
| Left | Displays the logo on the left on mobile. |
To configure it:
- Open the Header section.
- Find Mobile logo position.
- Choose Center or Left.
- Click Save.
This setting controls the mobile header layout beside the menu icon.
6. Add a Menu Drawer Promotion
This feature is available since the version 9.2.0 of Be Yours theme and later.
The Menu Drawer can display an optional promotion card near the bottom of the drawer.
Promotion settings:
| Setting | Description |
|---|---|
| Image | Adds a promotion image. |
| Heading | Adds promotion text. |
| Link | Makes the promotion card clickable. |
To add a promotion:
- Open the Header section.
- Find the Menu drawer promotion settings.
- Add an image, heading, or link.
- Click Save.
The promotion card displays only when an image or heading is added.
7. Enable Account, Language, and Country Selectors
The Menu Drawer can show account and localization tools.
| Feature | Where to configure |
|---|---|
| Customer account link | Shopify customer account settings and Header settings |
| Customer account menu | Header > Customer account menu |
| Language selector | Header > Enable language selector |
| Country/region selector | Header > Enable country/region selector |
Important:
- The customer account link appears only when customer accounts are enabled in Shopify.
- The language selector appears only when multiple languages are available.
- The country/region selector appears only when multiple countries or regions are available.
- Social media icons can appear when social links are added in Theme settings.
8. Use Mega Menu Product Showcase in the Mobile Menu
This feature is available since the version 9.2.0 of Be Yours theme and later.
If you use Mega menu — product showcase, it can also appear inside the Menu Drawer.
To show it in the mobile menu:
- Open the Header section.
- Open the Mega menu — product showcase block.
- Enable Show in mobile menu.
- Make sure the menu item name matches the menu item in the mobile menu.
- Click Save.
Important:
If you use a separate Mobile menu, the matching menu item must also exist in that Mobile menu.
For example:
| Product showcase Menu item | Mobile menu item needed |
|---|---|
| Shop | Shop |
| Women | Women |
| Collections | Collections |
You can check this aritcle, it shows you more detail about the feature.
9. Highlight Menu Labels
The Header section can highlight specific menu labels.
When using highlight settings, please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
To configure highlight behavior:
- Open the Header section.
- Enable the highlight setting.
- Add the labels you want to highlight.
- Choose the highlight style.
- Click Save.
Use this only for important menu labels, such as sale, new arrivals, or limited-time campaigns.
10. Notes and Limitations
Please note the following behavior:
- The Menu Drawer is controlled from the Header section.
- The drawer uses Mobile menu first if one is selected.
- If Mobile menu is empty, the drawer uses the regular Menu.
- Nested menu links are supported.
- Customer account links require customer accounts to be enabled in Shopify.
- Language selector requires multiple store languages.
- Country/region selector requires multiple countries or regions.
- Social icons require social media links in Theme settings.
- Menu drawer promotion displays only when an image or heading is added.
- Mobile product showcase appears only when Show in mobile menu is enabled.
- If a separate Mobile menu is used, the showcase menu item must exist in that menu too.
Troubleshooting
If the Menu Drawer does not display correctly, please check the following:
- Make sure a menu is selected in the Header section.
- If using a separate mobile menu, make sure Mobile menu is selected.
- Make sure the menu has menu items.
- Make sure menu items are linked correctly in Content > Menus.
- If nested links do not appear, check the menu structure in Shopify admin.
- If the account link does not appear, check whether customer accounts are enabled.
- If language or country selectors do not appear, check Shopify language and market settings.
- If social icons do not appear, add social links in Theme settings.
- If the promotion card does not appear, add a promotion image or heading.
- If mobile product showcase does not appear, enable Show in mobile menu and check that the menu item names match.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
How to Added a Manual Product List to Featured Collection sections
Understanding Swatch Sources in Be Yours