Solved

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

JasonBoyd
Excursionist
22 1 6

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. 

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3477 461 519

This is an accepted solution.

Hi @JasonBoyd 

We would like to suggest you a solution below:

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

view (90).png

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

view (91).png

<div width="100%" >
     <img src="{{ 'abstract-website-banner-with-modern-shapes_1361-1738.png'|asset_url }}" alt="Banner_Img"style="height:300px;object-fit:cover;width:100%">
 </div> 

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 5 (5)

BSS-Commerce
Shopify Expert
3477 461 519

This is an accepted solution.

Hi @JasonBoyd 

We would like to suggest you a solution below:

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

view (90).png

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

view (91).png

<div width="100%" >
     <img src="{{ 'abstract-website-banner-with-modern-shapes_1361-1738.png'|asset_url }}" alt="Banner_Img"style="height:300px;object-fit:cover;width:100%">
 </div> 

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

JasonBoyd
Excursionist
22 1 6

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?

BSS-Commerce
Shopify Expert
3477 461 519

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:

      '<div width="100%" >
           <img src="{{ 'abstract-website-banner-with-modern-shapes_1361-1738.png'|asset_url }}" alt="Banner_Img"style="height:300px;object-fit:cover;width:100%">
      </div>'

You will get a result like this:

 

view - 2023-01-10T112851.261.png

I hope that it's useful for you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

thebowbar
Visitor
1 0 0

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

 

help8
Tourist
8 0 0

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