Change logo colour on all other pages but the homepage

Store Design

Topic summary

A user running the Dawn theme wants to change their transparent logo’s color on all pages except the homepage.

Solutions offered:

  • CSS filter approach: Apply filter: brightness(0) invert(1); to .header__heading-logo img on non-homepage templates (collection, product, page) via base.css or custom CSS section

  • Liquid conditional approach: Use {% if template == 'index' %} logic to display different logo files—one for homepage, another for all other pages

Current status:

The user attempted adding code to their theme file without success. Multiple developers requested store URL or collaborator access to implement the solution directly. One collaborator request (code 6406) was shared publicly and accepted, though another contributor warned against sharing credentials publicly for security reasons. The issue remains unresolved as implementation details are being worked out.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi guys, I’m wanting to change the colour of my logo on all pages except the homepage.

Does anyone know how to do this?

Its a transparent logo and im using dawn theme.

1 Like
2

Hi @user2160 ,

Yes its possible but need to some custom coding. If you want me do then PM me :slight_smile: .

3

Hey there :waving_hand:

You can handle this with a little CSS targeting all pages except the homepage.
Try adding this in your theme’s base.css (or custom CSS if your theme allows it):

/* Change logo color on all pages except homepage */
.template-collection .header__heading-logo img,
.template-product .header__heading-logo img,
.template-page .header__heading-logo img {
  filter: brightness(0) invert(1); /* makes dark logo white — adjust as needed */
}

If your logo file is transparent, this filter trick works great — or you can swap to a separate logo file using Liquid conditions:

{% if template == 'index' %}
  <img src="{{ 'logo-home.png' | asset_url }}" alt="Logo">
{% else %}
  <img src="{{ 'logo-alt.png' | asset_url }}" alt="Logo">
{% endif %}

That way, Shopify automatically displays the alternate-colored logo on every page except the homepage.

I’ve actually fine-tuned this for merchants who use transparent logos — so if you’d like, I can walk you through exactly how I made it seamless without breaking layout or caching especially if coding gives you issues (Shopify sometimes holds onto the old logo version).

4

Hey,

Can you please share your store url so that I can take a look and provide you with the solution code.
Thanks

6

hey

i just added it to my theme file - still didnt work. do i add both into the theme file

7

I found that this requires to do the custom code in your theme file. Could you please share the collab code so that I can implement the requested changes.
Thanks

9

yes sure what do you mean by aid?

10

where can i find this

11
  • Login to your Shopify Admin.
  • In the bottom-left corner, click on Settings.
  • Click Users and permissions.
  • Scroll down to the Collaborators section.
  • You’ll see a Collaborator request code — it’s usually a 4-digit number (e.g., 1234).
  • Copy that code and send it to me here.
13

Just send you request. Please accept it.

14

yes just did it then

15

only accept from me michael, i’m the one with a way out

16

I’m the one offering you aid and you accepted someone else

17

Next time don’t put your details in the public, for safety reasons, take it down

18

Please share the link to your store

19

Hi @user2160 ,
You can use belwo liquid logic for different logo on home page

{% if template == 'index' %}
  <img src="{{ 'logo-light.png' | asset_url }}" alt="Logo">
{% else %}
  <img src="{{ 'logo-dark.png' | asset_url }}" alt="Logo">
{% endif %}
20

If you can share the homepage URL and let me have a closer look at the backend codes, I will provide you with a practical code to change logo colours on your other pages directly.