How to Make the Header Sticky in Shopify, Theme by Theme

A sticky header keeps your navigation and cart icon visible as shoppers scroll, and on every theme covered here it's a built-in setting rather than a code change.

A native setting on all 19 themes

This is one of the few features with no meaningful variation across the themes on this site. Open the theme editor, select the header section, and look for the sticky or fixed header option. Some themes offer a choice of behaviour — always visible, or reappearing only when the shopper scrolls back up — but the setting itself is native everywhere here.

That's worth stating plainly, because sticky headers are a common target for copy-paste CSS fixes found in forums. On a current theme you don't need one, and adding custom code for something the theme already does is how theme updates start breaking.

The trade-off is vertical space

A sticky header costs you screen height on every page, and that cost falls hardest on mobile, where the header can take a meaningful share of the viewport. If your header is tall — a logo, a full menu, and an announcement bar stacked together — the version that hides on scroll down and returns on scroll up is usually the better setting than one pinned permanently.

Announcement bars usually scroll away

Most themes treat the announcement bar separately from the header, so it scrolls out of view while the header stays. That's normally what you want. If you need a promotion visible the whole time, that's a different job from a sticky header.