Different Logo on Header

Store Design
, , , , , , , , , , , , , ,
1

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

2

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.
});
3

how do i use this code?

4

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

5

but where do i put my png files?

url: sixdreamz.com

6

image.png
image.png257×488 14.4 KB

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

7

sixdreamz_0-1716981628977.png
sixdreamz_0-1716981628977.png579×426 19.4 KB

like this?

now add the link inside the brackets?

8

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


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";
}
9

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

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

10

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

11

Hi @sixdreamz ,

Request you to refer the below video to implement the same. You have to update the inner pages template like default collection, product, cart and page by using code provided in video.

Hope this will helps…