How can I change the header color exclusively for the product page?

Solved

How can I change the header color exclusively for the product page?

Pyimk
Tourist
17 0 0

I tried to change the header color just only for the product page but it applied to all.

I have edited all other and i like the page result.
Can someone assist me, pelase?

Accepted Solution (1)
Tal19
Shopify Partner
127 22 24

This is an accepted solution.

Step 1: open theme.liquid

Step 2: search </head>

step 3: before </head> add this code:

{% if template.name == 'product' %}
<style>
.header-wrapper.color-scheme-1.gradient {
background: #fff;
}
</style> 
{% endif %}

 

 

Need Shopify Development, Customization, or POS Support? PM Me!

View solution in original post

Replies 10 (10)

Tal19
Shopify Partner
127 22 24

in your product template liquid file put this code. change .site-header to your header class name.

 

{% if template.name == 'product' %}
<style>
.site-header {
    background-color: #your-desired-color;
}
</style>
{% endif %}

 

 

Need Shopify Development, Customization, or POS Support? PM Me!
Pyimk
Tourist
17 0 0

I can only find product.json which is related to product in template file

Pyimk
Tourist
17 0 0

The theme name is Craft

Pyimk
Tourist
17 0 0

Screenshot 2024-07-08 at 2.00.39 AM.png

Can you help me adress which one i need to select or filter.
I cannot find theme style sheet.
When I could find it, in which place should i put the code
Sorry i don't know anything about coding

Pyimk
Tourist
17 0 0

Thanks with your aid I am able to find CSS

I firstly went to product page since it is the page i wanted to edit the header color scheme to white.

I put in this code and save but it did not work
.product-template .header-wrapper { background-color: #ffffff }

Tal19
Shopify Partner
127 22 24

Can you share a link?

Need Shopify Development, Customization, or POS Support? PM Me!
Pyimk
Tourist
17 0 0
Tal19
Shopify Partner
127 22 24

This is an accepted solution.

Step 1: open theme.liquid

Step 2: search </head>

step 3: before </head> add this code:

{% if template.name == 'product' %}
<style>
.header-wrapper.color-scheme-1.gradient {
background: #fff;
}
</style> 
{% endif %}

 

 

Need Shopify Development, Customization, or POS Support? PM Me!
Pyimk
Tourist
17 0 0

Wow, thank you so much.
It really helped.
It is working now.

Tal19
Shopify Partner
127 22 24

please mark my answer as a solution 🙂

Need Shopify Development, Customization, or POS Support? PM Me!