Skip to content
Menu drawer
Section overview
The Theme Menu section provides a fully customizable slide-out navigation menu for your Shopify store, accessible from both mobile and desktop devices. It supports nested menu items, featured collections, promotional content, and localization options.
Common use cases
- Primary navigation for your store with multi-level menu hierarchy
- Showcasing featured collections within nested menu dropdowns
- Displaying promotional content or announcements to shoppers
- Providing language and region selection options for international stores
Usage tips
- Configure both a mobile-specific and desktop menu in your theme settings for optimal user experience
- Limit the number of top-level menu items to prevent overwhelming users
- Add visual elements like collection products or images to enhance nested menu items
- Ensure all menu links have clear, descriptive labels for better navigation
- Test the menu on various device sizes to ensure proper display and functionality on mobile devices
Section settings
| Setting | Description |
|---|---|
| Color scheme (top bar) | Sets the background and text color for the top bar area of the menu. |
| Color border (top bar) | Controls the border style for the top bar area - can be subtle, strong, or none. |
| Color scheme (main) | Sets the background and text color for the main menu area. |
| Color border (main) | Controls the border style between menu items - can be subtle, strong, or none. |
| Font family | Selects the font style for menu items - standard, heading, or navigation. |
| Show search button | Enables or disables the search input field at the top of the menu. |
| Show chevrons | Toggles the display of chevron icons for menu items with nested menus. |
| Color scheme (bottom) | Sets the background and text color for the bottom section of the menu. |
| Color border (bottom) | Controls the border style for the bottom section - can be subtle, strong, or none. |
Block settings
Content
A promotional content block that can be added to the menu to highlight important information or promotions.
- Block limit: 1
| Setting | Description |
|---|---|
| Heading | The title text for the promotional block. |
| Content | Rich text content for the promotional message. |
| Button label | Text to display on the call-to-action button. |
| URL | The destination page when the button is clicked. |
| Image | An optional image to display with the content. |
| Show image as background | Toggle to use the image as a background instead of inline. |
| Video | An optional video to display with the content. |
| Enable autoplay | Automatically plays the video when visible. |
| Enable mute toggle | Shows a button to toggle video sound on/off. |
| Enable loop | Continuously loops the video playback. |
| Minimum height | Sets the minimum height for the content block in pixels. |
| Enable padding | Adds interior padding to the content block. |
| Color scheme | Background and text color for the content block. |
| Color border | Border style for the content block. |
| Text color | Forces text to be light, dark, or default based on background. |
| Button color | Style and color of the call-to-action button. |
| Enable gradient | Applies a gradient overlay to the background. |
| Text position | Places text above or below the image/video. |
| Vertical alignment | Positions content at the top, middle, or bottom. |
| Horizontal alignment | Aligns content to the left, center, justify, or right. |
Collection
Displays products from a selected collection within a nested menu.
- Block limit: 8
| Setting | Description |
|---|---|
| Linked menu | The menu item handle this collection should be linked to. |
| Collection | The product collection to display in the nested menu. |
Image
Displays a featured image within a nested menu.
- Block limit: 8
| Setting | Description |
|---|---|
| Linked menu | The menu item handle this image should be linked to. |
| Image | The image to display in the nested menu. |
Announcement
Displays a promotional announcement at the top of the menu.
- Block limit: 1
| Setting | Description |
|---|---|
| Content | Rich text content for the announcement message. |
| Color scheme | Background and text color for the announcement. |
| Horizontal alignment | Aligns announcement text to the left, center, or right. |