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.