Load a different custom color logo on product pages only 7.1

I’m trying to change the logo on individual product pages only to use a two color log instead of the white logo that’s is on the rest of the site. I’ve found many threads instructing how to invert the logo, that is NOT what I’m trying to do. I need to insert a different logo file that is in the company colors. 

Video demo
uploading a logo file by making a link and then using my code to switch if only on the about page. (I'm using the browser console in the video , but adding the code to code injection has the same effect).

For Squarespace 7.1 use something like this in settings -> advanced -> code injection -> header

<!-- jQuery 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- change logo on specific pages-->
<script>

var changeLogoLocation = '/about';
var secondLogoUrl = '/s/dark-logo.png';

if (window.location.pathname.includes(changeLogoLocation)){


$( document ).ready(function() {
    //HELPER FUNCTION FOR SWITCHING LOGO SRC
  var sevenOneLogoSrcSwitcher = function(logoUrl){ 
    $('.header-title-logo img').attr('src', logoUrl);
  }

  // Example usage : 
  sevenOneLogoSrcSwitcher(secondLogoUrl);  
    
}); 

}
</script>

Add your second logo destination to the secondLogoUrl. 
For example
"/s/secondlogo.png"

Add your store path to changeLogoLocation
For example
"/store"
 

If this helped, you can mark it as correct answer so others will find it.

P.S. I'm also available for freelancing if you ever need something custom 🙂