How can I change the logo on a specific page?

[Toptoys2uHS]

Hello all,

I would like to change the logo on a specific page, however I am having some trouble on where the code should be placed, and what is needed to actually make it change.

The current code I have placed is in theme.liquid

{% if collection.handle == "halloween" %}

<style>
.header__logo-image{
background-image: url(https://cdn.shopify.com/s/files/1/1779/2423/files/Toptoys2u_Halloween_Logo.png?v=1696421350) !important;
}

</style>

{% endif %}

Unfortunately, this does not change the logo on this specific page, and it keeps the same logo that is everywhere on the site.

Would anyone be able to alter the code (or update the location, maybe theme.css will work), to update the logo on a specific page?

The website can be found here: https://toptoys2u.co.uk/collections/halloween

I highly appreciate any help!

[ennovative-it]

Try like this:

.theme-store-id-871 .header__logo-image{
content:url(https://d3k81ch9hvuctc.cloudfront.net/company/SgUnyB/images/be8215e3-13fb-4526-931a-635a4d1a5fc2.png)!important;
}

Place it inside the section "Custom CSS" in your theme editor

[Toptoys2uHS]

Hello @ennovative-it 

Unfortunately this has not changed anything as it says the code is not applicable to the page.

Please see the screenshot below.

It is very strange why the asset does not change. 

[ennovative-it]

Try to paste it at the bottom of your theme.css

[Toptoys2uHS]

Hello @ennovative-it 

Still no luck unfortunately.

Due to the identifier ".theme-store-id-871", would this apply the change to the entire site or just this specific page?

[ennovative-it]

the identifier is the only way to make it work only for halloween page, maybe try this:

.theme-store-id-871 .header__logo-image{
content:url("https://d3k81ch9hvuctc.cloudfront.net/company/SgUnyB/images/be8215e3-13fb-4526-931a-635a4d1a5fc2.png");
}

[Toptoys2uHS]

Hello @ennovative-it 

Still no luck unfortunately, with the code being placed in both the theme.css, or the theme editor together, or individually.

I have tried this with

.header__logo{
background-image: url(https://cdn.shopify.com/s/files/1/1779/2423/files/Toptoys2u_Halloween_Logo.png?v=1696421350) !important;
}

But still no luck.

[Toptoys2uHS]

Hello @ennovative-it 

I have managed to add a new image into the background, but the main logo is still there, and the image is also not the correct resolution.

Please see the code here for reference: 

Would you know how to remove the current logo on this page?

[gr_trading]

Hi @Toptoys2uHS 

Try using the above video.

[Toptoys2uHS]

Hello @gr_trading 

Thank you for your video.

Unfortunately, I tried the information provided in this video earlier today, and it gave no luck in updating the logo on the page, so I decided to create a new thread for this issue.

Screenshot is here for reference:

Would you have any other solutions?