Header Logo change while scroling and on product sites.

Bodyguard55 · ‎02-10-2024

Hi y'all

Can someone assist me with the coding for our shop?

We aim to display a different logo in the header on the homepage and on the various category pages as well. Similar to how the font colors change while scrolling."

Thanks in advance!

regards,

Erik

ThePrimeWeb · ‎02-10-2024

Hey @Bodyguard55,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

.header__heading-logo-wrapper img {
    display: none !important;
}

.section-header .header__heading-logo-wrapper:before {
    content: "";
    display: block;
    width: 150px;
    height: 35px;
    margin-top: 10px;
    background: url('https://cdn.shopify.com/s/files/1/0787/1230/8041/files/Logo_Bodyguard-shop.ch_weiss_mit_gruenem_1.png?v=1703237041') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 99;
}

.section-header.scrolled-past-header .header__heading-logo-wrapper:before {
    content: "";
    margin-top: 0px;
    width: 150px;
    height: 50px;
    background: url('https://cdn.shopify.com/s/files/1/0787/1230/8041/files/transparent_e3492f3d-e3e8-4d2a-9cd2-118dbc830515.png?v=1705573981') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 99;
}

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Bodyguard55 · ‎02-10-2024

It doesn't work, it just shows the code now in the header...

ThePrimeWeb · ‎02-10-2024

Sorry, I missed something, replace with this

<style>
.header__heading-logo-wrapper img {
    display: none !important;
}

.section-header .header__heading-logo-wrapper:before {
    content: "";
    display: block;
    width: 150px;
    height: 35px;
    margin-top: 10px;
    background: url('https://cdn.shopify.com/s/files/1/0787/1230/8041/files/Logo_Bodyguard-shop.ch_weiss_mit_gruenem_1.png?v=1703237041') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 99;
}

.section-header.scrolled-past-header .header__heading-logo-wrapper:before {
    content: "";
    margin-top: 0px;
    width: 150px;
    height: 50px;
    background: url('https://cdn.shopify.com/s/files/1/0787/1230/8041/files/transparent_e3492f3d-e3e8-4d2a-9cd2-118dbc830515.png?v=1705573981') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 99;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Header Logo change while scroling and on product sites.