How can I make my Refresh Theme header transparent on homepage?

davidmira8 · ‎02-26-2024

Hey, I am currently using the refresh theme by Shopify and would like the header on the home page to be transparent then turn white when scrolling down. No code seems to be working. Please help. My website is monaieofficial.com

Dan-From-Ryviu · ‎02-26-2024

Hi @davidmira8

I'm Dan from Ryviu: Product Review & QA.

You can add this code below to your theme.liquid file, after <head> in Online Store > Themes > Edit code to do that

{% if template == 'index' %}
<style>
.section-header .header-wrapper {
    background: transparent;
}
#MainContent {
margin-top: -141px;
}
.scrolled-past-header {
background: #fff;
top: 0px !important;
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎02-26-2024

Hi @davidmira8

I'm Dan from Ryviu: Product Review & QA.

You can add this code below to your theme.liquid file, after <head> in Online Store > Themes > Edit code to do that

{% if template == 'index' %}
<style>
.section-header .header-wrapper {
    background: transparent;
}
#MainContent {
margin-top: -141px;
}
.scrolled-past-header {
background: #fff;
top: 0px !important;
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

davidmira8 · ‎02-27-2024

The transparent header worked but can you change the image margins. If you check my website the image is cut off on the top. Can you fix this?

How can I make my Refresh Theme header transparent on homepage?

How can I make my Refresh Theme header transparent on homepage?

Community Blog Articles