Have you ever wanted to show your Dawn theme's banner image below a transparent header? Or maybe simply keep your sticky header permanently sticky, even after scrolling down?

If so, this is the right tutorial for you. I'll be guiding you on how to add a beautiful, performative and thoroughly tested “permanently sticky” header for the Dawn theme, one that also works on other pages without adding weird margins. All it takes is pasting one single piece of code.

Here is a live preview of how the final result will look like.

Note: this tutorial is compatible with older versions of the Dawn and Shopify's free themes (6 and earlier). In the most recent versions, you can make the header sticky within the Header section on the customization page.

Making a backup of your theme

Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.

Adding the code to the theme

1. In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
2. Search for this file:
   
   header.liquid
   
3. press CTRL + F (or CMD + F on Mac) and search for exactly this:
   
   {% schema
   
   
4. Now, delete everything below the {% schema %} line, including the {% schema %}.
   
   
   
   5. Copy all of the following code and paste it at the very bottom of the file and save.
   
   

Customizing the sticky header options

1. Still on the page that you are, at the top, click on “customize theme”.
2. On the left, inside the Header section, you'll find new options to customize your header.
   
   You can change the colors, spacing and a few other settings as you please!