Menu drawer

This guide describes the Menu drawer section.

Use this section to provide visitors with a side menu for navigating your store. The section always displays on mobile devices, even if it is hidden on desktop devices.

​

​The previous image shows a Menu drawer section on a store's home page. The section overlays the left side of the home page. In the upper left, part of the Theme editor's section menu is displayed. The menu's Show search bar option is enabled. With this option enabled, the Search field is displayed in the section.

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:

1. In the 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.

2. From the side menu, select Menu drawer.

3. Select a setting described in the following table.

Setting name	Description
Menu	Use the Menu picker to set up the main menu to display in 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 in the section. A secondary menu can display nested child and grandchild links as expandable lists, allowing visitors to navigate to deeper categories or pages. 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 between main menu items in 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 search icon or field in the section.
Show social media	Use the Show social media option to show or hide links to your store's social media in the section.
Language selector > Language settings (link)	Follow the Language settings link to open the Languages area of your store's Shopify admin. Use the settings there 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 in 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. Use the settings there 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 country/region selector in the section. The country/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 CSS field, 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 the 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 in the section, apply the following section settings in Menu drawer > Menu or Secondary menu.

• If the section has no menu, choose Select menu. Enter the name of a menu into the Search field, 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 it 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 it to create a new menu, and then select that 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 field, or pick a replacement menu from the list.

• To delete the current menu, select the Menu picker and then choose Remove menu.