How to make hero image the background for header - DAWN Theme

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recommend to watch the video to follow. 

This would work even if you have sticky header. 

1. If you have not set an image banner yet. Go to your theme and customize it. Assign an image banner to your theme. 

2. Go to Admin Shopify store > Themes > Actions > Edit Code

3. In Section folder, find and open the header.liquid.


4. Please follow the video on how to use the Dev tools but instead of getting the section ID, we will need the banner ID. Find the section ID of your banner image using the Dev Tools. Right to inspect and look for the image banner section with template ID (see image below). Right click the Dev Tools and click "copy JS path." Replace the code in blue and add semicolon at the end.  (See video for instructions). The top part of the header.liquid.  After the "<noscript>{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}</noscript>", paste the code below. See image for correct placement. 

window.onload = function () {
const mainSection = document.querySelector("#shopify-section-template-...");

if (mainSection) {
const stickyHead = document.querySelector(".header-wrapper"); = "transparent";

window.addEventListener('scroll', event => {
if (window.scrollY > 200) { = "var(--gradient-background)";
} else { = "transparent";


Code Placement (see image below);

Code placement


Using the DEV Tools to find the section ID above the banner-template:

image banner section

5. Disregard the video until time 3:23. We have to move your image banner -110px to the top. Go to Dev Tools again and find the image banner section again. Make sure you are clicking the section ID above the banner with an ID. Right click in the Dev Tools, then click "copy selector". Replace the code in blue. (see video for more information)

6. Go to the header.liquid, and inside the style tag, place the code below 

  #your-image-section with ID {
margin-top: -110px !important;

That is it. Enjoy (",). Please do not hesitate to contact me using "chat with us" if you are having trouble with the code


Updated 11/05/21: I notice that the header remains transparent even after we scroll down. I use a different scroll eventlistener and keep the header-wrapper code as is in the base.css. Please see the code above. 

Updated 11/17/21: Fix the issue of creating space at the bottom of the image banner

Updated 11/23/21: I change the code so the transparent header only applicable in the home page and also you can still choose the color of the header in the theme editor.

Convert Dawn Product Page Like Debut Theme with Product Slider

Product slider but counter does not make sense? See my way around. Transform your Dawn product pa...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding...


Thanks a lot, It’s working now.

Muhammad Dadabhoy

@Lud Romain and @Melanie Hi. Just updated the code. Let me know if you have problems. I can help


Same, it doesnt work for me too

Lud Romain

Hello, I tried all the steps in the video and my banner is not moving at all. i don’t know what to do. can you help me?


Leave a comment

Your comment was posted successfully! Thank you!