Configure / Header and footer

Make navigation clear at the top and complete at the bottom.

The header handles discovery and account access. The service footer closes the page with navigation, reassurance, policies, localization, and optional newsletter content.

ReferenceMerchant facing
Applies toVersion 1.2.0
StatusPreview

Header

Connect a Shopify navigation menu.

  1. Create the menu in Shopify admin under Navigation.
  2. Open the Header section in the theme editor.
  3. Select the menu and upload the correct logo.
  4. Choose logo left, logo left with menu below, or logo centered with menu below.
  5. Enable the sticky header only when it helps browsing.

Nested menu links become dropdown navigation. Use short labels and a shallow hierarchy. Every parent item must remain usable on touch, keyboard, and pointer input.

Mega menu

Use structure, not decoration, to guide the customer.

Add a mega menu block for the matching top-level menu item. Connect only relevant collection or editorial content. Check that opening a new menu closes the previous one, Escape closes the active menu, and focus returns to the trigger.

Service footer

Compose the footer from merchant-controlled blocks.

  • Service items for delivery, returns, or support expectations.
  • A newsletter block with accurate consent copy.
  • Menu blocks linked to Shopify navigation.
  • Text blocks for concise contact or brand information.
  • Logo and tagline, when they add useful context.
  • Country, region, and language selectors for configured markets.
  • Follow on Shop, policy links, payment icons, and trust badges.

Mobile verification

Test navigation as a complete journey.

Verify the menu open and close controls, nested items, search, account, cart, localization, footer links, focus visibility, and body-scroll lock on a narrow viewport. No control should remain in an active visual state after its panel closes.

Next guideConfigure products and variants