Change Header Color on Product Page

If you can’t make it work, you can send link to product page, I can check problem easier.

Use these code to Website Tools > Custom CSS.

#1. Header color on Product Shop/Category Page

body[class*="type-products"].view-list {
    header#header {
    background-color: #f1f !important;
}
.header-background-solid {
    opacity: 0 !important;
}}

#2. Header color on Product Details

body[class*="type-products"].view-item {
    header#header {
    background-color: #f1f !important;
}
.header-background-solid {
    opacity: 0 !important;
}}

#3. Header color on Specific Shop Page

Use this code to Shop Page Header Code Injection

<style>
body[class*="type-products"].view-list header#header {
    background-color: #f1f !important;
}
body[class*="type-products"].view-list .header-background-solid {
    opacity: 0 !important;
}
</style>

#4. Header color on Product Details belong specific Shop Page

Use this code to Shop Page Header Code Injection

<style>
body[class*="type-products"].view-item header#header {
    background-color: #f1f !important;
}
body[class*="type-products"].view-item .header-background-solid {
    opacity: 0 !important;
}
</style>

#5. Header color on Specific Product

You can add a Code Block to Additional Info, then use this code into Code Block.

<style>
header#header {
    background-color: #f1f !important;
}
.header-background-solid {
    opacity: 0 !important;
}
</style>