Need Different Headers for Different Pages in Prestige Theme

[mertabedan]

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

[BiDeal-Discount]

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

[mertabedan]

Can you provide the code to do this?
I can share screenshot of theme.liquid

[BiDeal-Discount]

I don't have that theme so can't guess which file & how they defined their header

[tim]

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):

<x-header class="header color-scheme color-scheme--scheme-4">

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:

{%- if template.name == "index" -%}
 <script>
  const initialColorScheme = 'color-scheme--scheme-3';
  document.querySelectorAll('header .' + initialColorScheme).forEach(el => {
    el.classList.replace(initialColorScheme, "color-scheme--scheme-4")
  });
 </script>
{%- 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.

[mertabedan]

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.)

[tim · Accepted solution]

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,:

<style>
  #shopify-section-{{ section.id }}{ display: none; }
</style>

So that altogether it's like this:

{%- if template.name == "index" -%}
 <script>
  const initialColorScheme = 'color-scheme--scheme-3';
  document.querySelectorAll('header .' + initialColorScheme).forEach(el => {
    el.classList.replace(initialColorScheme, "color-scheme--scheme-4")
  });
 </script>
{%- endif -%}

<style>
  #shopify-section-{{ section.id }}{ display: none; }
</style>

The added code will hide current section ( the Custom liquid one ).

The white strip should be gone now.

[mertabedan]

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

[tim]

Can you duplicate your theme, apply my code there and share a preview link?

It's a bit hard to work with screenshots.

[mertabedan]

Hello Tim thank you for help, you can check from link.

https://r6pliuxsfidgony4-57418022954.shopifypreview.com

[tim]

Hmm. I do not see the overlapping problem you've mentioned:

[mertabedan]

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

[tim]

Ok, I see.

[mertabedan]

Yes it selected but still not transparent

[tim]

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...

[mertabedan]

I really appreciate it, it worked. 

Thank you so much!