Header, navigation and mega menus

Add your logo and connect the menu#

Open in the editor Header → Logo and Navigation

Make shared navigation recognizably yours.

1. Enter Text logo or select a Logo image.
2. Set Logo width (desktop) and Logo width (mobile) separately.
3. Choose Main menu, then preview its destinations.

What to look for The header uses your brand and the menu links lead to real pages.

Brand and layout#

1. Open the shared Header section.
2. Choose a Logo image or enter a Text logo. With neither set, the existing header uses your store name.
3. Set desktop and mobile logo widths separately. Choose the logo position and menu alignment.
4. Choose the Main menu. Create and organize its links in Shopify’s menu administration.
5. Choose whether search, account, cart, sticky behavior, and hide-on-scroll behavior should appear.

Configure a mega menu#

1. Add a Mega menu block inside Header.
2. Enter the Main menu item title to match the top-level menu item you want to enhance.
3. Enable the block and choose Menu if you want a different menu for the panel.
4. Optionally select up to two promotional images, headings, and links.
5. Preview with a mouse and keyboard, then test the mobile menu. Check that every parent item and child link has a useful destination.

Menu badges#

Add a Menu badge block, enter the matching menu item title, and choose badge text and color. Keep text short enough for narrow navigation layouts.

Customer account menu#

The header uses Shopify’s account component. Account availability, account type, sign-in behavior, and menu contents depend on Shopify’s customer account configuration. Choosing an icon or showing the component does not create an account experience or verify a Shop sign-in flow.

Common issues#