How to fix landmark banner is top level on Shopify

Steps for Shopify

1. Go to Online Store → Themes → click the three-dot menu beside your active theme → Edit code.
2. Open layout/theme.liquid — this is the root HTML shell for every page.
3. Locate the `<header>` element (or search for 'role="banner"'). It should appear as a direct child of `<body>`, before `{% section 'main' %}` or `{{ content_for_layout }}`.
4. If the `<header>` is inside a `<main>` or any wrapping `<div role="main">`, cut the entire header block and paste it above the opening `<main>` tag.
5. Click Save, then preview the store and verify with the axe browser extension.

What is landmark banner is top level?

Every webpage has a special "banner" landmark — the main site header that typically contains your logo, navigation, and tagline. Screen readers and assistive technologies use landmarks like banners to let users jump quickly around a page without reading everything. The rule is simple: the banner landmark must sit at the top level of the page (directly inside `<body>`), never wrapped inside another landmark region like `<main>`, `<aside>`, `<section>`, or `<article>`. When it is nested, assistive technology can't find it in the expected place, and some tools won't announce it as the banner at all.

Roughly 7 million Americans use a screen reader, and many more rely on keyboard or switch navigation. When your banner landmark is buried inside another landmark, those users lose the ability to skip directly to the header or understand the page structure — a core WCAG 2.1 requirement (Success Criterion 1.3.6 / 4.1.2). Failing WCAG landmarks is an accessibility legal risk: ADA and similar laws in the EU, UK, Canada, and Australia have led to lawsuits and settlements against e-commerce stores of all sizes. Fixing it also demonstrates technical quality to search engines that increasingly evaluate page structure as a signal of content organisation.

See the complete Landmark banner is top level guide for every platform and the full background.