Transparent header

Topic summary

A user sought help making their header text white when the header background is transparent on their homepage, and black text when the background is not transparent.

Solution Provided:

  • Add custom CSS code to the theme.liquid file after the <head> tag
  • Use a conditional statement ({% if template == 'index' %}) to target only the homepage
  • The code successfully changed the header text color based on transparency

Follow-up Request:

  • The user also asked how to make their logo change colors (black/white) to match
  • An updated code snippet was provided to address the logo color change

Outcome:
The issue was resolved successfully. The user confirmed both solutions worked as intended.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.

Hello guys!
This is my new shop: https://katbuddies.shop/

My question is could i make my header color text white when header is transparent and when is not transparent black text withwhite background?

This shop did like that : https://thewoofsupply.com/

Thank You !

1 Like

Hi @katbuddies

You can do that by adding this code to theme.liquid file, after in Online store > Themes > Edit code

{% if template == 'index' %}

{% endif %}

Results:

it worked ! thank you so much :slightly_smiling_face:

Very welcome!

Hey, what code can i use to make also my logo white/black?

Code update

{% if template == 'index' %}

{% endif %}

You are the BEST !! Thank you