How to fix focus not visible on Shopify

Add a clearly visible focus indicator to every interactive element so keyboard users can always see which element is currently selected.

Steps for Shopify

  1. In your Shopify Admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
  2. Open Assets → base.css (or theme.css / global.css — whichever is the main stylesheet; search for 'outline' to locate it quickly).
  3. Find any `outline: none` or `outline: 0` rules on links, buttons, or inputs and either delete them or replace them with your custom focus style.
  4. At the bottom of the file (or in a dedicated accessibility section), add the universal focus rule from the code snippet below.
  5. Click Save. Open a preview of your store and press Tab to verify a visible ring appears on every interactive element.
Official Shopify documentation ↗

What is focus not visible?

When someone navigates your store using only a keyboard (Tab, Shift+Tab, arrow keys), their browser highlights the currently focused element — a button, link, form field, etc. — so they know where they are. This is called the "focus indicator" or "focus ring." The problem occurs when a theme or custom CSS removes or hides this highlight (often via `outline: none` or `outline: 0`), making the page look cleaner but leaving keyboard users completely lost. WCAG Success Criterion 2.4.7 (Focus Visible) requires that this focus indicator always be visible.

Roughly 7% of internet users navigate primarily by keyboard — including people with motor disabilities, power users, and anyone whose mouse has stopped working. If they can't see where focus is, they literally cannot use your store: they can't tell which product they're about to add to the cart, which field they're typing in, or which button they're about to press. Beyond lost sales, hiding focus indicators is a WCAG 2.1 Level AA violation, which creates legal exposure under the ADA, the European Accessibility Act, and similar laws in many countries. Accessible stores also tend to rank better because Google uses accessibility signals as a quality indicator.

See the complete Focus not visible guide for every platform and the full background.

Not sure if your Shopify store has this?

Run a free SEOLZ scan — we’ll find focus not visible and every other issue across your whole site.

Scan my site free

Fix focus not visible on another platform