Header Logo change while scroling and on product sites.

Bodyguard55
New Member
7 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
2028 583 461

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 or check out the website
Check out our interview with Shopify!
Bodyguard55
New Member
7 0 0

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

 

ThePrimeWeb
Shopify Partner
2028 583 461

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!