How can I create a transparent homepage header that turns white when scrolling down?

Topic summary

A user seeks to implement a transparent header on their homepage that transitions to white when scrolling down.

Initial Request:

  • Header should be transparent only on the homepage
  • Should turn white upon scrolling
  • Includes a link to their Shopify store

Proposed Solution:
Another user provided step-by-step instructions:

  • Navigate to Online Store → Edit Code → theme.liquid file
  • Insert custom code snippet above the </body> tag
  • Code block was included but appears corrupted/unreadable in the conversation

Current Status:

  • The original poster clarified they want a different implementation than what was suggested
  • Specifically reiterating: transparent header on homepage only, turning white on scroll
  • Discussion remains open - the proposed solution doesn’t match the exact requirements
Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.

Hi all, do you know how to make the header of my website only in homepage transparent and then when it goes down white? Thanks a lot to everyone

https://refade-8966.myshopify.com/

password: refade

Hey @Marco211

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag


If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

I really don’t want it like that. I would like the header to be transparent but when you go down the header turns white. This only on the homepage