Skip to Main Content

A keyboard-revealed link that lets keyboard and screen-reader users jump past navigation to the page's main content.

Last updated

August 14, 2026

What it is

A skip-to-main link is crucial for accessibility for users who rely on their keyboard to navigate your store. This button stays visually hidden until a keyboard user tabs to it, then appears and lets them jump straight past navigation to the main content — a baseline WCAG accessibility affordance.

Place this component as the very first focusable element on the page (before Navigation) so it's the first Tab stop.
Set Scroll Section to your main content landmark — required; without it the link has nowhere to jump to.
Set the Text copy (e.g. "Skip to main content").
Style Font, Transform, Color, BG, Radius, and Padding for its visible (focused) state.
Use Preview to show the focused state on canvas while you design — it has no effect on the published site, where the link only appears on real keyboard focus.

How to use

On all your pages, ensure you have a Stack that contains your main content. On each one, set a consistently named scroll-section from the right panel (we suggest calling it "Main").
Place this component as the very first focusable element on the page with Fixed positioning; we suggest either inside your Navigation component or directly on your Page Template, so it only needs to be placed once.
Set Scroll Section to the main content scroll section you created in Step 1.
Style the button with Text, Font, Transform, Color, BG, Radius, and Padding — it only needs to look good while focused, since it stays hidden otherwise.