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

Store Design

Topic summary

A user seeks to add a persistent image banner within their website header, positioned below the navigation bar and functioning similarly to a brand logo.

Initial Solution Provided:

  • Edit the header.liquid file in the theme code editor
  • Insert custom HTML/CSS code after the header closing tag
  • Upload the banner image to the Assets folder and reference it in the code
  • CSS properties can be customized inline within the IMG tag

Follow-up Issues:

Sticky Header Behavior: To prevent the banner from scrolling with the header, the code should instead be inserted into theme.liquid before the id="MainContent" element, placing it outside the sticky header container.

Banner Positioning: Multiple users ask how to layer the banner behind the navigation bar rather than below it, or position it at the very top of the screen/under the announcement bar. One user reports their header creates a large black block below the navigation, and wants the banner pushed up as high as possible with menu buttons and logo overlaying it.

Status: The positioning and layering questions remain unanswered. The discussion includes code snippets and screenshots demonstrating the implementation steps.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

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.

2

Hi @JasonBoyd

We would like to suggest you a solution below:

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

view (90).png
view (90).png1920Ă—867 87.8 KB

  • 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.

3

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
4

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:

view - 2023-01-10T112851.261.png
view - 2023-01-10T112851.261.png1497Ă—180 10.8 KB

I hope that it’s useful for you.

5

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

1 Like
6

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

1 Like
7

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.