Replace site logo with new image on a specific collection page

Technical Q&A
4

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;
}