Can I make a transparent image header that changes when scrolling?

S2B237 · ‎04-01-2024

Hello,

I have seen many discussion posts about this, but the code hasn't been perfect so I wanted to write and ask personally. I was wondering if the banner could be transparent with an image when one is viewing the website at the beginning, but as one scrolls down, the banner is no longer transparent. Something similar to the link below.

https://soleilsoleil.com.au/

If this is possible please let me know,

Thank you

the link to my store is swear2bears.shop

Dan-From-Ryviu · ‎04-01-2024

Hi @S2B237

You can do that by following this:

Go Online Store > Themes > Edit code
open theme.liquid file, add this code after <head>

{% if template == 'index' %}
<style>
.section-header sticky-header {
background: transparent;
}
.section-header.shopify-section-header-sticky sticky-header {
background: #fff;
}
#MainContent {
margin-top: -177px;
}
</style>
{% endif %}

And make sure you go to Online Store > Themes > Customize > Header > Sticky header, select Always

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎04-01-2024

Hi @S2B237

You can do that by following this:

Go Online Store > Themes > Edit code
open theme.liquid file, add this code after <head>

{% if template == 'index' %}
<style>
.section-header sticky-header {
background: transparent;
}
.section-header.shopify-section-header-sticky sticky-header {
background: #fff;
}
#MainContent {
margin-top: -177px;
}
</style>
{% endif %}

And make sure you go to Online Store > Themes > Customize > Header > Sticky header, select Always

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Can I make a transparent image header that changes when scrolling?

Can I make a transparent image header that changes when scrolling?

Community Blog Articles