Different Logo on Header

sixdreamz
Excursionist
46 0 14

Is it possible to have a different logo on my header on my Homepage?

 

When you enter the site, the logo should be white, when i go further to the other pages to logo should switch to a black version.

 

thx for any help in advance

Replies 9 (9)

nafeeur10
Shopify Partner
21 0 1

You can do it using Javascript path checking.

window.addEventListener("DOMContentLoaded", function() {
  const logo = document.querySelector(".logo");
  const isHomepage = window.location.pathname === "/";

  if (isHomepage || !isHomepage) {
    logo.classList.add("logo--white"); // Add class for white logo
  } else {
    logo.classList.add("logo--black"); // Add class for black logo
  }
});

// Optional: Detect navigation changes (advanced)
window.addEventListener("popstate", function() {
  const logo = document.querySelector(".logo");
  //Change the color of the logo.
});
Please let me know if it works by giving it a like or marking it as a solution!
Working as Technical Lead at Zepto Product Personalizer
If you need any help, mail me at inafeeur [at] gmail.com or Give me a text message on Skype nafeeur.rahman1
sixdreamz
Excursionist
46 0 14

how do i use this code?

 

nafeeur10
Shopify Partner
21 0 1

You can use this code on the theme.liquid
Better to create an asset js file, and then paste it.

Please let me know if it works by giving it a like or marking it as a solution!
Working as Technical Lead at Zepto Product Personalizer
If you need any help, mail me at inafeeur [at] gmail.com or Give me a text message on Skype nafeeur.rahman1
sixdreamz
Excursionist
46 0 14

but where do i put my png files?

 

url: sixdreamz.com

nafeeur10
Shopify Partner
21 0 1

image.png
Upload photo/icon here.
Then Preview and edit > Copy image address. 
You will get the shopify cdn address. Use that. 

Please let me know if it works by giving it a like or marking it as a solution!
Working as Technical Lead at Zepto Product Personalizer
If you need any help, mail me at inafeeur [at] gmail.com or Give me a text message on Skype nafeeur.rahman1
sixdreamz
Excursionist
46 0 14

sixdreamz_0-1716981628977.png

like this?

now add the link inside the brackets?

 

nafeeur10
Shopify Partner
21 0 1

That code is for adding a css class.
Not for adding images. 

<img id="imageID" alt="Image" class="logo" />

const logo = document.querySelector(".logo");
logo.src="image_url_black_or_white_which_will_be_used_for_homepage";

const isHomepage = window.location.pathname === "/";

if(!isHomepage)
{
  logo.src="change_the_image";
}
Please let me know if it works by giving it a like or marking it as a solution!
Working as Technical Lead at Zepto Product Personalizer
If you need any help, mail me at inafeeur [at] gmail.com or Give me a text message on Skype nafeeur.rahman1
sixdreamz
Excursionist
46 0 14

so i just copy this in my js file which i made.

and then i copy the css code into theme.liquid?

 

nafeeur10
Shopify Partner
21 0 1

If both files are images (black and white icons), you don't need CSS. 

Please let me know if it works by giving it a like or marking it as a solution!
Working as Technical Lead at Zepto Product Personalizer
If you need any help, mail me at inafeeur [at] gmail.com or Give me a text message on Skype nafeeur.rahman1