Skip to content
Menu drawer
Section overview
The Menu section powers both the desktop sidebar menu and mobile drawer menu in your Shopify store. It provides a customizable navigation experience with support for multiple menu blocks, content areas, and special features like newsletter signup.
Common use cases
- Creating a primary navigation menu for your store
- Adding promotional content within the menu structure
- Collecting newsletter subscribers via a menu-integrated signup form
- Displaying important announcements within the menu
Usage tips
- For best results, create a dedicated navigation menu in Shopify's Navigation settings before configuring this section
- Ensure your menu has a logical structure with main categories and subcategories
- Keep mobile users in mind - avoid creating overly complex nested menu structures
- Consider the color scheme of your menu relative to your overall store design for visual consistency
- Test the responsiveness of your menu across various device sizes to ensure proper display
Section settings
| Setting | Description |
|---|---|
| Enable sidebar | Enables or disables the desktop sidebar menu. |
| Logo default | Upload a logo to display in the menu. |
| Desktop logo height | Set the height of the desktop logo in pixels. |
| Mobile logo height | Set the height of the mobile logo in pixels. |
| Enable logo | Show or hide the logo in the menu. |
| Top color scheme | Select the color scheme for the top section of the menu. |
| Top color border | Select the border color style for the top section. |
| Main color scheme | Select the color scheme for the main section of the menu. |
| Main color border | Select the border color style for the main section. |
| Bottom links | Select a menu to use for the bottom section links. |
| Bottom color scheme | Select the color scheme for the bottom section of the menu. |
| Bottom color border | Select the border color style for the bottom section. |
Block settings
Content
The Content block allows you to add custom content, including text, images, and videos within the menu.
Block limit: 5
| Setting | Description |
|---|---|
| Heading | Add a heading for your content block. |
| Content | Add rich text content to display. |
| Button label | Set the text for the content block's button. |
| Url | Set the destination URL when the button is clicked. |
| Image | Upload an image to display in the content block. |
| Image background | Upload a background image for the content block. |
| Video | Upload a video to display in the content block. |
| Enable autoplay | Automatically play the video when visible. |
| Enable mute toggle | Show a button to toggle video sound on/off. |
| Enable loop | Loop the video continuously. |
| Minimum height | Set the minimum height of the content block in pixels. |
| Enable padding | Add padding around the content block. |
| Color scheme | Select the color scheme for the content block. |
| Color text | Select the text color style. |
| Color border | Select the border color style. |
| Color button | Select the button color style. |
| Enable gradient | Enable a gradient background effect. |
| Y alignment | Select the vertical alignment of content. |
| X alignment | Select the horizontal alignment of content. |
| Text position | Position text above or below the image/video. |
Menu
The Menu block allows you to add navigation menus to your sidebar or drawer menu.
Block limit: 5
| Setting | Description |
|---|---|
| Menu | Select a navigation menu to display. |
Announcement
The Announcement block allows you to highlight important information at the top of your menu.
Block limit: 1
| Setting | Description |
|---|---|
| Content | Add rich text content for your announcement. |
| Color scheme | Select the color scheme for the announcement. |
| X alignment | Select the horizontal alignment of the announcement text. |
Newsletter
The Newsletter block adds a newsletter signup form to your menu.
Block limit: 1
| Setting | Description |
|---|---|
| Content | Add rich text content to explain your newsletter. |
| Button label | Set the text for the signup button. |
| Disclaimer | Add a disclaimer or privacy policy note for subscribers. |
| Success | Add a success message shown after subscription. |
| Color button | Select the button color style for the signup form. |
Form
The Form block adds a customizable form to your menu.
Block limit: 1
| Setting | Description |
|---|---|
| Content | Add rich text content to explain your form. |
| Color button | Select the button color style for the form. |