How to fix landmark no duplicate main on Shopify
Find and remove every duplicate `<main>` element or `role="main"` attribute so that exactly one main landmark exists on each page.
Steps for Shopify
- Go to Online Store → Themes → Actions → Edit code.
- Open layout/theme.liquid — this is the master page shell. Search for '<main' and 'role="main"'. There should be exactly one; it typically wraps '{{ content_for_layout }}'.
- Open sections/ and snippets/ files (especially header.liquid, footer.liquid, sidebar snippets) and search each for '<main' or 'role="main"'. Remove or replace any extras with '<div>' or '<section>'.
- If you use a third-party app that injects a chat or overlay widget, inspect the live page DOM in DevTools after the app loads to check whether it also adds a landmark.
- Save changes and verify with the axe browser extension on your storefront.
What is landmark no duplicate main?
Every web page should have exactly one "main" landmark — the HTML `<main>` element (or any element with `role="main"`) — that wraps the primary content of that page. This landmark is part of the ARIA landmark system, which acts like a table of contents for assistive technology users. When a page has more than one `<main>` landmark, the structure is ambiguous and broken: screen readers, keyboard navigators, and other assistive tools cannot reliably identify where the page's core content begins and ends. The fix is to ensure only one `<main>` or `role="main"` exists in the entire rendered HTML of any given page.
Screen reader users — including blind shoppers and customers with motor disabilities — routinely press a single keystroke to jump directly to the main content area, skipping repeated navigation menus. If two `<main>` landmarks exist, assistive technology either stops at the first one (potentially landing on a header or widget instead of your products) or announces confusing duplicate regions, eroding trust and causing shoppers to abandon the page. WCAG 2.1 Success Criterion 1.3.6 (Identify Purpose) and wider landmark guidance require unique landmark roles; failing this check exposes your store to accessibility-compliance risk in jurisdictions with ADA, EAA, or EN 301 549 obligations. Fixing it is typically a quick template change with zero visual impact, so the risk-to-effort ratio strongly favours acting immediately.
See the complete Landmark no duplicate main guide for every platform and the full background.
Not sure if your Shopify store has this?
Run a free SEOLZ scan — we’ll find landmark no duplicate main and every other issue across your whole site.
Scan my site free