A user seeks to implement a transparent header on their homepage that transitions to a black background when scrolling, while keeping other pages with a standard black header. The header should also shrink on scroll per theme settings.
Initial Solutions Provided:
theme.liquid file above the </head> tag{% if template.name == 'index' %}) to target only the homepageFollow-up Issues:
Latest Development:
The discussion evolved into troubleshooting these extended requirements, with updated code provided to apply the effect across all pages by removing the template condition. The conversation remains ongoing as the user works to achieve the desired appearance matching a reference site.
Hi there,
I would like to change my sticky header on the homepage to transparent, but when scrolling down it should go back to it’s normal background color which is black.
I would prefer this function to only effect the homepage, and for every other page it should remain it’s normal background color (black) without any transparency.
I also prefer the header to shrink when scrolling down as per theme settings.
Hi @404virtues ,
Can you kindly share your store link (with the password protected, if any) with us? We will check it and suggest you a solution if possible.
Hi, @404virtues
Please share the store URL so that I can assist you.
Here it is. 
Hi @404virtues ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
{% if template.name == 'index' %}
{% endif %}
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag
{% if template.name == 'index' %}
{% endif %}
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
Hi @404virtues
Please add this code to your theme.liquid file, after in Online Store > Themes > Edit code
{% if template == 'index' %}
{% endif %}
Dan you’re amazing!
Thank you so much for the coffee! You’re very welcome.
I tried your code, but it split the header in half for some reason.
Thanks for the help though!
Hi Dan,
How do you make the logo and font white when the header is transparent? And then black when it scrolls with the white background? Would I need to upload a white version of my logo somehow? I have only uploaded a black font version in the logo settings. Also, how do I make this appear on all pages, not just the home.
Thanks
Please share the link to your store so I can check?
Not sure if this is the right link? https://1crzwu-14.myshopify.com/?_ab=0&_fd=0&_sc=1
Please add this code to theme.liquid file after
{% if template == 'index' %}
{% endif %}
Thank you! That worked. How about the menu and anything else on the header? Could they also appear white on the transparent header and then invert to black on the white scrolling header?
Also, how can I make this show on every page? It’s only showing on the home page. And on the product pages, I’ve used code to make the images bleed the edge and top of page but how can I make the product information remain below the header so that only the image bleeds.
Thanks
Please update code
{% if template == 'index' %}
{% endif %}
That didn’t change anything sorry. Here’s the link to my store https://1crzwu-14.myshopify.com/products/prickly and here’s how I’d like it to look https://poppiepack.shop/products/post-coast-coffee-and-dip
The code I sent you worked for the homepage only. Please update code so it works on all pages