Main menu

Featured links

1. Company XYZ documentation on the main menu block
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on banner colors settings
4. Company XYZ documentation on visibility settings
5. Company XYZ documentation on using video
6. Company XYZ documentation on icons

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to show a standard navigation menu with automatic dropdowns when your selected menu includes nested links. You can also add an optional banner and features bar, which makes this block useful for combining navigation with lightweight promotion or brand messaging. See Company XYZ documentation on the Main menu block.

For a broader theme-structure overview, see Shopify documentation on sections and blocks

On mobile, all Menu and Mega menu blocks are combined into a single navigation interface. Review them together so the mobile menu stays clear and easy to use.

Core settings

Start by choosing the menu this block should display. Then decide whether the optional banner or features bar adds useful context, such as a promotion, seasonal announcement, or a few short service highlights.

Use these extras carefully. Navigation should still feel like navigation first, so avoid adding so much supporting content that link discovery becomes harder.

Alignment settings

These settings fine-tune where the menu sits within the block on desktop. They usually matter most when the block is filling extra space or using a wider desktop layout.

If alignment changes seem subtle, check your layout choices first. Layout usually has the biggest effect, while alignment acts more like a finishing adjustment.

Layout settings

Use these settings to control how much horizontal space the menu uses on desktop and how it is positioned across the row. Left, center, and right layouts suit more traditional header setups, while a full-width layout can make the navigation feel more balanced in wider headers.

Fill available space is useful when the block should stretch into remaining room instead of staying compact. Because this only applies on desktop, always preview the result at larger screen sizes.

Tip

If the header feels uneven, try adjusting layout before changing alignment. A wider layout often solves spacing issues more cleanly.

Banner background

These settings control the media behind the optional banner. You can use an image or video background, and you can set separate mobile media when the desktop asset does not crop well on smaller screens.

Choose background media that supports the message without overpowering it. Simple imagery and short, low-distraction video usually work best in navigation areas.

Caution

Busy or high-contrast background media can make menu-related content harder to scan. If readability drops, simplify the media or strengthen the overlay and text contrast.

For video setup guidance, see best practices for video files.

Banner foreground

These settings control the content layered over the banner background. Empty fields stay hidden, so you can keep the banner minimal or build a more complete promotional message.

Use the icon, caption, heading, and subheading to create a clear content hierarchy. The icon fields accept emoji or named icons, which can be helpful for emphasis when used sparingly and consistently. For icon formatting tips, see the theme’s icon guidance.

Button settings let you add a direct action and control its style, icon placement, and mobile width. If you enable a full-block link style, links inside subheading text are removed, so that option works best when the entire banner should send visitors to one destination.

Pick one primary interaction pattern for the banner. If the whole banner is clickable, avoid layering in extra competing links or overly complex messaging.

Banner foreground media

Add a foreground image when the banner needs a logo, badge, product visual, or other graphic that should sit above the background. This works especially well when the background is more atmospheric and the foreground image carries the real focus.

Use the image width setting to keep the graphic in proportion to the text. Full-width image treatment can work for bold artwork, but smaller widths are usually better for logos and supporting visuals.

If you make the foreground media clickable, keep that destination consistent with the rest of the banner to avoid a confusing mix of link targets.

Banner colors

These settings override broader banner color choices for this block only. Use them when this banner needs different contrast, stronger branding, or more control over how text sits on top of media. See Company XYZ documentation on banner colors

Overlay controls are especially useful for readability. Increase the overlay only as much as needed to support the text, since heavy overlays can make the banner feel flat or dense.

Standard block settings

Visibility settings

Use visibility controls to show or hide this block by device size. This is helpful when you want a different navigation arrangement on desktop and mobile. See Company XYZ documentation on visibility settings

Because mobile navigation combines menu-based blocks into one interface, always check the full mobile result after changing visibility.

Editor settings

Use the editor title to rename the block in the editor sidebar. This is handy when you have more than one menu-related block and want clearer labels while editing.

Usage notes

1. Keep top-level links focused. Use concise menu labels and only add dropdown levels that genuinely help visitors find content faster.
2. Review mobile as a whole. Since menu-based blocks combine on mobile, judge the final mobile navigation experience instead of this block alone.
3. Use the banner with restraint. Add promotional content only when it supports discovery without competing with the main navigation.
4. Prioritize readability. When using image or video backgrounds, adjust colors and overlays until text and actions remain easy to scan.
5. Match layout to header space. Use wider or fill-based layouts when the menu should balance a broad header, and more compact layouts when other header elements need priority.
6. Check both breakpoints. Desktop and mobile controls can affect layout, alignment, and media visibility differently, so preview both sizes before publishing.
7. Use media overrides intentionally. Keep desktop and mobile background choices aligned with the content and crop behavior you want, and expect separate media to feel more independent from the rest of the header.