Appearance

Menu drawer ​

This guide describes setting up the Menu drawer section.

Use the section to add a drawer menu for navigating your store's pages on mobile display devices.

​The previous video shows a store's Homepage. When the Header section's Menu is selected in the upper right, a Menu drawer section overlays the page.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

Set up a Menu drawer section ​

To set up a Menu drawer section:

  1. Go to Customize theme.

    At the top of the page, use the dropdown to select the Homepage template.

    Note

    The section is accessible from all page templates, excluding the Checkout, Password and Gift card pages. Theme editor displays the section in a page's Overlay area by default.

  2. From the side menu, select Menu drawer.

    The Menu drawer section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
Show searchSelect the Show search checkbox to show/hide the search field inside the section.
Language selector > Language settings (link)To add a language to your store, follow the language settings link to the Store languages area of your store's Admin page. Refer to Shopify help: Localization and translation.
Language selector > Show language selectorFor stores that support multiple languages, use the Show language selector checkbox to show/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)To add a country, region or currency to your store, follow the payment settings link to the Payments area of your store's Admin page. Refer to Shopify help: Payments.
Country/ region selector > Show country/ region selectorFor stores that support multiple countries or regions, select the checkbox Show country/ region selector to show/hide a region selector inside the section. The region selector allows visitors to switch between your store's supported regions and currencies.
Layout > Drawer positionSelect the Drawer position radio buttons to display the section on the Right or Left side of the page.
Vertical spacing between blocksAdjust the slider Vertical spacing between blocks to resize the empty vertical space that's displayed around the blocks inside the section. The minimum slider value is 0px or pixels, and the maximum value is 2px.
Typography > Desktop font size scaleAdjust the slider Desktop font size scale to set a font size for the section's text on desktop display devices. The minimum value is -2 and the maximum is 4. Refer to Shopify help: Customize your font sizes.
Typography > Mobile font size scaleAdjust the slider Mobile font size scale to set a font size for the section's text on mobile display devices. The minimum value is -2 and the maximum is 2. Refer to Shopify help: Customize your font sizes.
Theme settingsSelect Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect 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.

Configure a block within a Menu drawer section ​

A default Menu drawer section contains 1 menu block. To configure a block inside the section:

  1. Go to Customize theme.

    At the top of the page, use the dropdown to select the Homepage template.

  2. From the side menu, expand the Menu drawer section menu.

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add block, choose a block to add, and then select the block you added.

    The Menu drawer's Add block menu in Theme editor.

    Note

    Inside the section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks.

  4. Apply a block setting described in the Table: Menu drawer block.

Table: Menu drawer blocks ​

The following table describes the blocks inside the Menu drawer section, and their corresponding settings.

The blocks indicated with an asterisk * are contained in a default Product section. To configure a block, refer to Configure a block within a Menu drawer section.

Block nameBlock descriptionBlock setting(s)
Menu *Display a navigation menu inside the section.
  • Use the Menu selector options to set up a menu inside the block. Refer to Set up a Menu drawer's menu block.
  • Select the Nested navigation style radio buttons to set a layout style for nested navigation menu items inside the block. The style options are Accordion, Contextual, and Expanded.
  • Select the Accordion icon radio buttons to set a style for the Accordion icon to Plus / minus or Caret. The icon collapses/expands the block's menu to access nested navigation items. To use the setting, set the Nested navigation style option to Accordion.
  • Select the checkbox Show cart link as last menu item to show/hide a link to your store's Cart page as the last menu item inside the block.
  • Select the checkbox Show collection products count to show/hide the number of products associated with each collection that's linked inside the block. The count is displayed beside the name of the collection.
  • Select Remove block to delete the block from the section.
Rich textDisplay an area containing formatted text inside the section.
  • In the Paragraph box, enter body text to display inside the block. Format the text and add links using the Text editor pane.
  • To display text from a dynamic source, select the Insert dynamic source icon, beside the Paragraph box, and then choose a metafield to add. Refer to Shopify help: Metafields.
  • Select the Text alignment dropdown to position text inside the block to the Left, Center, or Right.
  • Select Remove block to delete the block from the section.
ButtonDisplay a (linked) button inside the section.
  • In the Label box, enter text to display as button label text. The button is displayed inside the block when the Link box is populated.
  • In the Link box, enter a URL or select a link to store page. The link is used by the button that's displayed inside the block. To remove a link, select the X icon inside the text box. To visit the link, select the Visit link icon above the Link box.
  • To display a button link from a dynamic source, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields
  • Select Remove block to delete the block from the section.
Social mediaDisplay links to your store's social media inside the section.
  • Select the Display as radio buttons to display links to your store's social media as Icons or Text.
  • Select Remove block to delete the block from the section.

Set up a Menu drawer's menu block ​

To set up a menu inside a menu block, apply the following settings in Menu drawer > Menu (block).

  • If the block 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, and then choose Select.

  • To edit the current menu, select the Menu link. The link opens the Navigation menu editor in 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 Change > Change menu, and then follow the Create menu link. The link opens the Navigation > Add menu page in Shopify admin. Use the menu editor to create a new menu, and then the select the new menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.

    The menu modification options in Theme editor for the Menu drawer section

  • To replace the current menu, select Change > Change menu. Enter the name of the replacement menu into the Search box, or pick a replacement menu from the list, and then choose Select.

  • To delete the current menu, select Change > Remove menu.