Re: How to replace this hero banner background to improve resolution?

Solved

How to replace this hero banner background to improve resolution?

DaveyAlcatraz
Explorer
63 0 13

Hi everyone, I've seen other sites do this a lot and I think it looks really cool. I would like to re-upload my hero banner as a transparent background png and then insert code to add gradient from hex code #606C38 on a 90 degree angle downwards into hex code #283618.

 

hero banner.PNG

 

The URL is alcatrazgear.com if you would like to inspect.

Accepted Solution (1)
BSS-TekLabs
Shopify Partner
2350 702 827

This is an accepted solution.

Yes, you have to wrap the code inside the <style> tags. Sorry about that. Here is the revised code
 

 

<style>
#mainContent .hero {
    background: linear-gradient(90deg, #606C38, #283618);
}
</style>

 

 

 

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 5 (5)

BSS-TekLabs
Shopify Partner
2350 702 827

Hi @DaveyAlcatraz,

You can re-upload your image and then follow these steps to make the background a gradient

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the theme.liquid file.

3, Paste the code snippet provided below right before the closing head tag, then save your changes.

 

#mainContent .hero {
    background: linear-gradient(90deg, #606C38, #283618);
}

 

Like this

edit-theme.liquid-tutorial.png

Here is the result

BSSTekLabs_0-1723860673126.png

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

 

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
DaveyAlcatraz
Explorer
63 0 13

Hey, I appreciate your efforts but that didn't seem to work for some reason. Do I need to add <style> at the start and end?

DaveyAlcatraz_0-1723862893705.png

 

BSS-TekLabs
Shopify Partner
2350 702 827

This is an accepted solution.

Yes, you have to wrap the code inside the <style> tags. Sorry about that. Here is the revised code
 

 

<style>
#mainContent .hero {
    background: linear-gradient(90deg, #606C38, #283618);
}
</style>

 

 

 

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
DaveyAlcatraz
Explorer
63 0 13

Hi, my apologies, I'm new to this. Thanks heaps for that.

BSS-TekLabs
Shopify Partner
2350 702 827

You're welcome! 😊

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now