Shopify fix guide
Fix Missing focus indicator on Shopify
Do not remove outlines without replacing them.
This page ties the generic issue to how it usually shows up in Shopify markup and tooling, then walks you through a fix and verification loop.
Verify on a live URL
Scan, fix, deploy, then rescan the same address to compare reports.
Main issue guide: Missing focus indicator →
At a glance
Instructional
No visible focus style
Focus visible
If you remove the default outline, replace it with a custom ring that meets contrast.
Where this comes from on Shopify
Theme Liquid, JSON templates, and app embeds. Coordinate with the theme or app vendor when markup is not yours.
What this issue means
Fixes
Use `:focus-visible` styles with sufficient contrast. Avoid `outline: none` unless you supply a custom ring.
How to fix on Shopify
In Shopify, prioritize theme Liquid and section JSON: product cards, cart drawers, and app embeds. Some issues need a theme developer or app vendor; capture the public report link when you open a ticket.
How to fix
Use :focus-visible with a high-contrast ring or offset box.
Never remove outlines unless you replace them with an equally clear indicator.
Common mistakes on Shopify
- Editing checkout (limited) vs theme—know which surface you can change.
- Forgetting to test accelerated/mobile themes.
How to verify the fix
- Preview the theme or use a development theme URL the scanner can reach.
- Test cart and collection templates if that is where the issue appeared.
- Rerun the scan after theme deploy; keep before/after report URLs.
Related: 2.4.7 Focus Visible.
Same issue on other platforms
Related issues
Guides
Next steps
- Run a scan on staging or production.
- Re-read the main issue page for context and WCAG notes.
- Shopify accessibility hub for more platform resources.
TestAccessibility · Shopify fix · localhost:3001