Add a skip link to your Shopify theme

Paste your layout file above, or start from the snippet below. It points at #MainContent, the main id in Dawn and most themes built on it.

<style>
  .sr-skip-link {
    position: absolute;
    top: -200px;
    left: 1rem;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: #ffffff;
    color: #000000;
    border: 0.2rem solid currentColor;
    border-radius: 0.4rem;
  }
  .sr-skip-link:focus {
    top: 1rem;
  }
</style>
<a href="#MainContent" class="sr-skip-link button">Skip to content</a>

It goes right after the opening body tag in layout/theme.liquid, so it is the first thing a keyboard reaches. Change MainContentto the id on your theme’s main element if it uses another.

Someone using a keyboard moves through a page with Tab, one link at a time. On a store, that means the announcement bar, the logo, every menu item, search, account and cart before reaching the product, on every page they open.

A skip link is the first stop. It stays hidden until it gets focus, then takes the shopper straight to the main content. WCAG 2.1 asks for a way to bypass blocks that repeat on every page (2.4.1), and a skip link is the one keyboard users look for first.

To see one, press Tab once on this page.

It runs the same function SiteRemora uses for this fix. If the file already links to the main content or has a skip link, it leaves the file alone. Otherwise it points the link at the main element’s id; when the main element has none, it adds id="MainContent" in the same change.

Dawn and the free themes built on it ship with a skip link, so most of them come back unchanged. Older and custom themes are where it goes missing.

In SiteRemora, a missing skip link is found on the rendered page and fixed with this same change, which autopilot can apply on its own and the fix history can revert. More free checks are on the free tools page.