How to make the header sticky in Shopify
A sticky header keeps your menu, search, and cart reachable while shoppers scroll. Dawn and most current themes have it built in.
1. Turn on the sticky header setting
- Go to Online Store > Themes > Customize and click the Header section.
- Find Sticky header. In Dawn the options are none, on scroll up, always, and always with a smaller header.
- On scroll up is a good default: the header gets out of the way while reading and comes back as soon as the shopper scrolls up.
2. If your theme has no setting
- In your Shopify admin, go to Online Store > Themes. On your theme, click the ... menu and choose Duplicate, so you have a backup. Then on the theme you're editing, open the ... menu and choose Edit code.
- Find the element that wraps the header section and give it position: sticky with top: 0 and a z-index above page content.
- Check that drop-down menus, the cart drawer, and the announcement bar still behave on mobile.
3. Or ask Liquify in one sentence
Liquify is an AI theme editor for Shopify. Type the change in plain words and it edits your theme for you, on a draft copy, with a live preview. Nothing changes on your store until you publish.
“Make the header stick to the top when scrolling”
Try it free on a sample store
Free plan, no credit card. Connect a real store whenever you're ready.
Questions
Is a sticky header good for conversions?
It usually helps navigation on long pages. On small phones, a header that hides while scrolling down and returns on scroll up takes less space.