Fix focus hidden under a sticky bar on Shopify

This page shows how to fix focus hidden under a sticky bar on Shopify. A sticky header can cover the link someone just tabbed to.

Steps in Shopify

Set scroll-padding-top in the Shopify theme CSS to the sticky header height.

Check

1. Tab down a long page.
2. Watch the sticky header.
3. The focused item should not be fully covered.

All platforms · Shopify · WCAG 2.4.11