How to Add an Image Banner to the Header Section in Shopify

[jcyzner]

Hi everyone!

I'm trying to extend my image banner below my header so that it integrates seamlessly into the header section. I’m not familiar with coding, and after trying several code snippets I found online, nothing seems to work. I've attempted to modify my code multiple times without success.

If anyone in the community or a Shopify expert could guide me through this, I would really appreciate it! Thank you so much in advance!

[namphan]

Hi @jcyzner,

Please send the website link, and I will check it for you

[jcyzner]

Hi @namphan ,

Thank you for getting back to me! Here is the link: https://5f723b.myshopify.com/

[namphan]

Hi @jcyzner,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.section-header.shopify-section-group-header-group {
    position: absolute;
    width: 100%;
}
.header-wrapper {
    --gradient-background: transparent;
}

[jcyzner]

Hi again @namphan 

Thank you, it worked!

Now I'm noticing that my logo in the header has a white box around it. I think it might be because I took a screenshot from Canva. Do you know how I can remove the white background? I’d really appreciate your help with this. Thanks again!"

https://w7xepq4zjn7vakmn-74003808555.shopifypreview.com

[namphan]

Hi @jcyzner,

Because your logo has white background, so you just need to re-upload png image with transparent background, it will display well

[jcyzner]

Hi @namphan ,

I just did it! I really want my logo to be at the top like this website: https://gimaguas.com/

Mine looks like this now: https://5f723b.myshopify.com/

Do you know how I can put it at the top? If so, that would be amazing!

[namphan]

Hi @jcyzner,

you just need to re-upload the logo and remove this, it will display fine