Changing the colour of my header from transparent to white.

Store Design
, ,

Topic summary

Goal: Keep the home page header transparent with white text/icons, switching to white with black on scroll; ensure all other pages use a white header with black text/icons.

Key steps and solution:

  • The helper requested and received the storefront password to preview the theme.
  • In Online Store > Edit Code > theme.liquid, a Liquid conditional was added to target non-home pages (template.name != index).
  • The snippet was placed just above the closing body tag to scope styles/scripts so only non-index pages use the white header variant, while the home page keeps the transparent variant with its scroll behavior.
  • An image was shared showing the result; the Liquid condition is central to the fix.

Outcome:

  • The requester confirmed the change worked as intended and expressed thanks.
  • No further issues or open questions were raised; the thread appears resolved.
Summarized with AI on December 15. AI used: gpt-5.
1

Hi, I am hoping someone would be able to help.

On my shopify page, I want to keep the ‘Home Page’ Header transparent and the writing/ icons etc in white. However, I want this to change to become white with black writing and icons when I scroll down.

I do not want this to happen of my other pages. On all of my other pages I need the header to be white with black writing and icons.

https://cabaneofficial.com/.

Thank you.

2

Hey @CBOfficial

Welcome to Shopify Community! You have password enabled please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi Moeed, the password is cofficial123! thank you.

4

Hey @CBOfficial

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 template.name != "index" %} 

{% endif %}

RESULT:

Moeed_0-1730724101176.png
Moeed_0-1730724101176.png1900×906 258 KB

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

Best Regards,
Moeed

1 Like
5

Hi Moeed,

That is brilliant thank you very much. Really appreciate your help!

6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like