Shopify themes, liquid, logos, and UX
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
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.
});
how do i use this code?
You can use this code on the theme.liquid
Better to create an asset js file, and then paste it.
but where do i put my png files?
url: sixdreamz.com
Upload photo/icon here.
Then Preview and edit > Copy image address.
You will get the shopify cdn address. Use that.
like this?
now add the link inside the brackets?
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";
}
so i just copy this in my js file which i made.
and then i copy the css code into theme.liquid?
If both files are images (black and white icons), you don't need CSS.
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...
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025