How can I change my logo header's color on different pages?

Store Design
1

My logo header (A Png logo of my brand) is white on the home page and I want to use the same logo in black on all the other pages since the background is white itself, so the logo would disappear into the white background.

I am using the theme “Dawn”.

Please help, thank you!

https://atelier-tenera-uk.myshopify.com/password

Password: tenerastar

2 Likes
2

Hello @Tenera123 ,
This can be a bit complicated, but you can try the following logic.
You can try:

In your header.liquid, you can put this condition {% if template == “index” %}.
Something like this:

<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class=“header-wrapper {% if template == “index” %} color-{{ section.settings.color_scheme }} {% else %} color-background-2 {% endif %} gradient{% if section.settings.show_line_separator %} header-wrapper–border-bottom{% endif %}”>

Where back in the “Theme Settings” → “Colors” → “Color Scheme 3” you need to put black background.

In the “schema” you will need to specify another “image upload” for the black logo.
And then set the condition to the logo like this:

{%- if section.settings.logo != blank -%} {%- assign image_size = section.settings.logo_width | append: 'x' -%} {{ section.settings.logo.alt | default: shop.name | escape }} {%- else -%} {{ shop.name }} {%- endif -%}

Hope this helps.

1 Like
3

@Tenera123

yes i can see same

4

<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class=“header-wrapper {% if template == “index” %} color-{{ section.settings.color_scheme }} {% else %} color-background-2 {% endif %} gradient{% if section.settings.show_line_separator %} header-wrapper–border-bottom{% endif %}”>

I added this code in header liquid section and there was a html error detected.

5

I couldn’t fix this, can you help me please?