Header Logo change while scroling and on product sites.

Bodyguard55
Visitor
3 0 0

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

Replies 3 (3)

ThePrimeWeb
Shopify Partner
1148 298 224

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.

ThePrimeWeb_0-1707571048365.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
Bodyguard55
Visitor
3 0 0

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

 

ThePrimeWeb
Shopify Partner
1148 298 224

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