How can I add an image banner to my website header?

Hello,

Can someone help me with my header please. I would like to have an image banner contained within the header under the navigation bar so that it is persistent on each page and is treated the same as a brand logo is within the header (takes you back to the home page).

I would like it to look like this:

Little Shop of Curiosity

password: curious

The image is inside an image banner but outside the header currently.

Thank you in advance.

Hi @JasonBoyd

We would like to suggest you a solution below:

  • Step 1: Go to Admin => Online Store => Theme => Edit Code:

  • Step 2: Find the file header.liduid and insert the following code after the closing tag of the header tag:

view (91).png


     
 

  • Step 3: Save it and you’re done. Note your CSS properties can be custom inline in the IMG tag. The image URL link can be an online link or an image upload link to Shopify admin.

You can go to Assets => download the file and link it as follows (The red link part is the name of the file uploaded to the assets folder):

view (92).png

I hope that it will work for you.

Thank you very much, that did the trick. One thing though, is it possible to make the image not sticky with the rest of the header?

1 Like

Hi @JasonBoyd

To make the image not sticky with other header components, instead of inserting the code into the header.liquid file, you can look into the theme.liquid file. Then, find the code with the "id=“MainContent” and insert the code:

'
           
      
'

You will get a result like this:

I hope that it’s useful for you.

Hi, how do you make it so that the image goes behind the navigation bar rather than directly below it?

1 Like

how do you make it so that the image goes behind the navigation bar rather than directly below it?

1 Like

please let us know how to get the header to go all the way to the top of the screen or just under the announcement bar, My header is a big black block that ends just below the navigation bar its super ugly. I want to push my image banner up as much as possible and have my menu buttons and logo overlay the banner.