A store owner wants to apply a different color scheme to product pages than the homepage, but cannot find a color scheme option for product pages in their theme settings.
Proposed Solutions:
Two developers provided CSS-based workarounds:
Solution 1: Navigate to Online Store > Assets > Edit code > base.css and add custom CSS targeting specific section IDs with background color properties (e.g., background: azure)
Solution 2: Similar approach using base.css, targeting product page sections and elements like quantity buttons and form inputs with custom color values (e.g., #fff)
Note: Both code snippets in the responses appear corrupted or reversed, making them difficult to read directly. The solutions require manually editing theme CSS files to override default color schemes on product pages.
Status: The issue remains unresolved pending the original poster’s confirmation of whether either solution worked.
I have set up color scheme 1 for my store homepage background. I want my product pages to be a different color scheme than the background on my homepage. There is no color scheme option on the product pages like the homepage so I don’t know what to do.
Store URL: TsunamiTec.com
Password: youdontknow
H, @James193 .
Follow These Steps.
Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.
.collapsible-content__wrapper.section-template--20192070828328__a86d0ef5-81b0-4332-8043-5f2d1e7664af-padding {background: azure;}
div#shopify-section-template--20192070828328__product-grid {
background: azure;
}
.collection-hero.color-background-1.gradient {
background: azure;
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Hello @James193
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
section#shopify-section-template--20192071385384__main {
background: #fff !important;
}
.product-form__input input[type=radio]+label {
color: #fff !important;
}
.quantity {
color: #fff !important;
}
.quantity__button {
color: #fff !important;
}