Appearance
Menu drawer
This guide describes the Menu drawer section.
Use the section to provide visitors with a side menu for navigating the pages in your store. The section always displays on mobile devices, even when it's not displayed on desktop devices.
For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.
Configure the Menu drawer section
To configure your Menu drawer section:
In Theme editor, at the top of the page, use the theme templates dropdown to select the home page.
Note
The section is accessible from all pages, excluding Checkout, Password, and Gift card pages.
From the side menu, select Menu drawer.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Menu | Use the Menu picker to set up a (main) menu to display inside the section. Refer to Set up a menu for the Menu drawer. |
| Secondary menu | Use the Secondary menu picker to set up a secondary menu to display inside the section. A secondary navigation menu shows nested child and grandchild links that expand as lists, allowing customers to navigate deeper categories or pages directly. Refer to Set up a menu for the Menu drawer. |
| Font | Use the Font option to set the section's text to use the same font as Body or Heading text. |
| Text size | Use the Text size setting to set the section's text to use the same text size as Body, Standard heading, Feature heading, or Secondary heading text. The size you select applies only to first-level links. |
| Show borders on main menu | Use the Show borders on main menu option to show or hide borders or separators around main menu items inside the section. Adding visible borders or separators around the main menu and sidebar navigation can make menu sections and items more distinctly separated for customers. |
| Show search bar | Use the Show search bar option to show or hide the icon or search field inside the section. |
| Show social media | Use the Show social media option to show or hide links to your store's social media inside the section. |
| Language selector > Language settings (link) | Follow the Language settings link to open the Languages area of your store's Shopify admin page. Use the page's settings to add languages to your store. Refer to Shopify help: Managing languages. |
| Language selector > Show language selector | For stores that support multiple languages, use the Show language selector option to show or hide a language selector inside the section. The language selector allows visitors to switch between different language versions of your store. |
| Country/region selector > Payment settings (link) | Follow the Payment settings link to open the Payments area of your store's Shopify admin page. Use the page's settings to add a country, region, or currency to your store. Refer to Shopify help: Payments. |
| Country/region selector > Show country/region selector | For stores that support multiple countries or regions, use the Show country/region selector option to show or hide a region selector inside the section. The region selector allows visitors to switch between your store's supported regions and currencies. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
Note
To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.
To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.
Set up a menu for the Menu drawer
To select a menu to display inside the Menu drawer section, apply the following section settings in Menu drawer > (main) Menu or Secondary menu.
If the section has no menu, to select a menu, choose Select menu. Enter the name of a menu into the Search box, or pick a menu from the list.
To edit the current menu, select the Menu picker and then choose the Edit link. The link opens the Menus editor in your store's Shopify admin. Use the editor to modify the menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.
To create a new menu, select the Menu picker:
- If you have an existing menu, follow the Edit link.
- If no menu is present, follow the Create menu link.
The link opens the Menus editor in your store's Shopify admin. Use the menu editor to create a new menu, and then select the new menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.
To replace the current menu, select the Menu picker and then choose Replace. Enter the name of the replacement menu into the Search box, or pick a replacement menu from the list.
To delete the current menu, select the Menu picker and then choose Remove menu.