Replace site logo with new image on a specific collection page

[mattdeo]

My site preview link is: https://2658nyz63oi7lr0a-23625195.shopifypreview.com .

I'd like to change the logo on the collection page that lives at SHOP > SHOP BY COALITION > FORREST FRANK .

I'd like to change the logo to this image for now: https://forrestfrank.com/cdn/shop/files/ff_logo_ac24c9c7-b1b5-45ef-b5c2-69bdc9a0b95a.png?v=171219337... .

I'll update the image link with a new image later that says ProCo X Forrest Frank.

I'm trying to do this from a Custom Code block that lives on the page in the Customizer. I don't want to edit the code from the backend, because I don't want the code to be erased with future updates. 

[osamafarooqi71]

Hello @mattdeo , I completely understand that you want to change the logo without custom coding. But it's not feasible to change the logo without custom coding. It'll require a bit of advanced custom coding to adjust the logo. 

If you still need any further help, please feel free to reach out to me.

Regards, 
Osama Farooqi

[mattdeo]

How would I go about this if I was gonna use custom code in the back end? 

[mattdeo]

I almost figured out how to do it with just CSS in the Custom CSS box for the header section in the Customizer. Now I just need this to only affect the collection page I want it to change for. 

.logo {
  background-image: url("https://cdn.shopify.com/s/files/1/2362/5195/files/forrest-frank-collab-logo.png?v=1718049047");
  background-size: contain; /* Ensures the background image fits within the element */
  background-repeat: no-repeat; /* Prevents the background image from repeating */
  width: 200px;
  height: auto; /* Automatically adjusts height to maintain aspect ratio */
}

.logo img {
  opacity: 0;
}

[mattdeo · Accepted solution]

<style>
.logo {
  background-image: url("https://cdn.shopify.com/s/files/1/2362/5195/files/forrest-frank-collab-logo.png?v=1718049047");
  background-size: contain; /* Ensures the background image fits within the element */
  background-repeat: no-repeat; /* Prevents the background image from repeating */
  width: 200px;
  height: auto; /* Automatically adjusts height to maintain aspect ratio */
}
.logo img {
  opacity: 0;
}
</style>

I added this to a custom code block in the Customizer on the page and it did exactly what I wanted!