How to change logo on scroll in Dawn theme

I'm a Shopify Expert with 9+ years in this (I don't mean this in an arrogant way). People ask me all the time how to swap the Dawn logo when you scroll, usually because they have a white logo on a hero and need a dark one once the sticky header kicks in.

You don't need an app for this. Dawn already adds a class called scrolled-past-header when you scroll past the header. You add a tiny section, pick the second logo in Customize, and the logo swaps. Last tested on Dawn in 2026.

I built it this way because the apps that do the same job usually inject extra JS and charge you forever. This one is copy/paste. Dawn can already shrink the logo on scroll. That's not the same thing. This tutorial swaps in a different image.

Works on Dawn, Sense, Craft, Spotlight, Taste, Refresh and the other free OS 2.0 themes. Sticky header has to be on (Always or On scroll up). If sticky is set to None, Dawn never adds that class, so the logo never changes. Download a backup of the theme first. If something breaks, you can roll back in about 10 seconds.

What this actually does

This is not a Shopify setting you turn on. Your normal logo still comes from Theme settings / Header, the same way it always did. The section you add only watches for Dawn's scrolled-past-header class and replaces the image with CSS.

If your two logos are different sizes, the header will jump when it swaps. I would crop them to the same size first. Transparent PNG is the usual format if the header background changes.

If the current logo is sitting in a huge empty box, fix that first: How to fix empty space around any Shopify theme's logo. Same if you still need to set the default header logo: How to change the header logo on your Shopify theme.

How to add the section

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the 3 dots > Edit code.
3. Open the sections folder and click Add a new section. Name it exactly scroll-logo-swap. The file name has to match, otherwise Shopify won't load it.

   

4. Delete whatever Shopify put in the new file. Paste this code, then save. This is the whole section, schema included:

   

If you prefer reading Shopify's own editor docs, they cover Edit code here: Edit your theme code.

How to add it in Customize

Dawn's header is a section group. That's why you can click Header and then Add section. Add it there, not on the homepage template. If you only drop it on the homepage, the swap only runs on that page.

The section itself has no visible content. It only outputs a style tag. If it looks like a blank block in the editor, that's normal.

1. In the left toolbar of the code editor, click the Shopify bag icon, then click Customize theme. There is no 3-dots menu on that screen anymore.

   

2. Click Header in the left sidebar (the group, not only the Header section).

   

3. In the Header settings, set Sticky header to Always (or On scroll up if that's what you want). None will not fire the swap.
4. Click Add section and choose Scroll logo swap.

   

5. Click the new Scroll logo swap section. Upload the logo you want after scrolling under Logo shown after scrolling.

   

6. Click Save. Then preview the live storefront, not only the editor. Scroll down and the logo should swap.

If the logo doesn't swap

Check the section file name. It has to be exactly scroll-logo-swap.

Check that Scroll logo swap is inside the Header group, not sitting on a page template.

Check that you actually uploaded the second image. If the picker is empty, the CSS never prints.

Check sticky header. None means Dawn never adds scrolled-past-header.

Hard refresh the storefront. Theme editor save is required before the live page updates.

If you're on a paid theme, the class names are probably different. This selector is Dawn's. Tell me which theme you're on and I can look at the right class.

If the header jumps when it swaps, the two logos are different sizes. Crop them so the width and height match.

If you get stuck, tell me which theme you're on and whether sticky header is set to Always, On scroll up or None. That usually solves it.