A user seeks to make their site header transparent only on the homepage, allowing a slideshow to display behind it, while keeping the header opaque on other pages.
Initial Solution:
theme.liquid below the <head> tagProblem:
Final Solution:
{%- if template.name == 'index' -%}</body> tag for scroll behaviorOutcome: Issue resolved successfully with the homepage-specific transparent header implementation.
Hi there! I am trying to make the header transparent on my site’s homepage so that the slideshow will show up behind it. This is what it currently looks like:
I want it to look like this:
Preview link: https://ufhmvqozdzndhthe-3644853.shopifypreview.com
Hey @mokon ,
Follow these instructions 
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
That worked to make the header transparent, but it’s transparent across the whole site now and I want it only on the homepage. It looks like this on the product pages which isn’t ideal:
Also, upon scrolling on the homepage the header should turn white and be sticky - like this: https://drive.google.com/file/d/1Vsb4dL6TteNz6oxAK__jbhNGE9ygEwdH/view?usp=sharing
THANK YOU for your help!
Hey @mokon ,
I wasn’t aware of all the requirements.
Delete the previous code and replace with this
This one goes below the tag
{%- if template.name == 'index' -%}
{%- endif -%}
And add this new code to the bottom of the file above the tag
Screenshot for reference
Thank you SO much - this worked!!!
