A Shopify store owner needed to apply different color schemes to the header section across pages in the Prestige theme: scheme-4 for the homepage and scheme-3 for other pages.
Initial Solution:
A contributor (tim_1) provided a JavaScript-based approach using a Custom Liquid section that:
color-scheme--scheme-3 and changes them to scheme-4 on the homepageTroubleshooting Process:
Multiple issues emerged during implementation:
Final Resolution:
The solution required relocating the Custom Liquid section from the “Header Group” to immediately after the top slideshow section. The code remained unchanged, but this positioning prevented the section from breaking the homepage header’s transparency feature.
The issue was successfully resolved after iterative debugging with preview link testing.
Hello,
I need help applying different color schemes only to the header section in the Prestige theme:
Homepage header: scheme-4
Other pages header: scheme-3
What’s the cleanest way to achieve this? Should I modify Liquid templates or use CSS overrides?
Thanks for your help!
my website: www.chora.store
Hi @mertabedan
to use different header for each page, you should modify the liquid template.
If you need me update help I can but you can add me as collaborator to do
Can you provide the code to do this?
I can share screenshot of theme.liquid
I don’t have that theme so can’t guess which file & how they defined their header
Ultimately, color scheme defines CSS variables. In many modern themes they use classes to assign these variables to particular elements.
Say, when they want to use “Color scheme 4” on some element, they assign a color-scheme–scheme-4 class to the element (or its wrapper):
The simple solution without theme code editing would be to change this class with JS.
For this you need to:
1. Assign the color scheme 3 on the header in "Customize" and then do this:
2.Add a "Custom Liquid" section in "Header" section group and paste this code:
```php
{%- if template.name == "index" -%}
{%- endif -%}
The code finds elements with color scheme 3 assigned inside header and changes them to color scheme 4.
Why not simply edit Liquid code?
Editing theme code will prevent theme from updating automatically.
Using “Custom liquid” or “Custom CSS” settings does not.
Hello Tim,
Thank you for reply.
When I did what you said, I got a result like in the images. Yes, the color scheme changed on pages other than the homepage. There is a white strip on the homepage until the level of the dropdown menu. (Normally the homepage header is transparent.)
Ah sorry, didn’t pay attention that the theme is Prestige and it always adds some padding even to Custom Liquid sections.
Add this to the bottom of my code,:
So that altogether it’s like this:
{%- if template.name == "index" -%}
{%- endif -%}
The added code will hide current section ( the Custom liquid one ).
The white strip should be gone now.
Thanks, it became transparent, but now there is a spacing problem on pages other than the homepage. For example, in the photo the product title is under the header.
https://ibb.co/gMprJfNN
Can you duplicate your theme, apply my code there and share a preview link?
It’s a bit hard to work with screenshots.
Hello Tim thank you for help, you can check from link.
I copied the theme again and added the codes you gave, now there is only a problem with the homepage header, it is not transparent
Ok, I see.
Yes it selected but still not transparent
Ok, I see.
Remove this “custom liquid” section from “Header Group” and create it right after the top slideshow section. The code can stay the same.
Looks like this section breaks the transparency, even though it’s hidden. Overcomplicated…
Sorry it took longer…
I really appreciate it, it worked.
Thank you so much!
