How can I change the header color on a specific product page using code?

Store Design

Topic summary

Goal: change the header color scheme to “inverse” only on a specific product page (Shopify Liquid), instead of the default “background-1.”

Approach 1: Used a Liquid conditional (request.page_type == ‘product’ and product.title contains ‘T shirt’). Result: only two header icons switched to inverse; the rest of the header stayed on background-1. User suspects code placement or CSS may be needed.

Approach 2 (most recent): Copied the .color-inverse CSS into base.css and wrapped the change in the same Liquid conditional. Result: almost works, but the cart bubble icon shows inconsistent behavior—doesn’t change color when switching from background-1 to inverse, yet does change when switching from inverse back to background-1.

Context: “color_scheme,” “inverse,” and “background-1” are theme preset styles; Liquid is Shopify’s templating language controlling conditional rendering.

Artifacts: Images are central, illustrating icon color differences and the cart bubble inconsistency.

Status: No resolution yet; key open issue is ensuring the entire header, including the cart bubble, consistently adopts the inverse scheme on the targeted product page.

Summarized with AI on February 21. AI used: gpt-5.
1

Hey guys!

I want to do the following:

if I am in a specific product page, then change the color_scheme of the header from “background 1” to “inverse”

this is the code that is currently ‘half working’

{%- if request.page_type == 'product' and product.title contains 'T shirt' -%}
              

this is the result I get from that code:

![MattScop_0-1647681619793.png|517x170](upload://lrdoxO955awCMBejH22o1rmgXAe.png)

it just sets the inverse color to those two icons. I feel like I am close to the solution but since I am new to coding I can't figure out where I need to modify the code.

maybe I should use some css?

Any help?
2

I found another “half solution” but this time it almost works perfectly.

So I copy-pasted the .color-inverse css in “base.css” and modified the code like this:

{%- if request.page_type == 'product' and product.title contains 'T shirt' -%}

              {%- endif -%}

something weird is happening:

the cart bubble icon doesn’t change color when switching from background-1 to inverse

MattScop_0-1647688426996.png

MattScop_1-1647688454072.png

but it does change when switching from inverse to background-1

MattScop_2-1647688750679.png

MattScop_3-1647688770093.png
MattScop_3-1647688770093.png266×113 778 Bytes

I mean, I could use some CSS to fix that cart bubble but maybe I am missing something in the code??