Transparent Header on Homepage - Craft Theme

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 :blush:

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!!!