Jump to content

Load a different custom color logo on product pages only 7.1

Recommended Posts

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. 

Edited by Mgirard
Link to comment
  • Mgirard changed the title to Load a different custom color logo on product pages only 7.1
  • Replies 1
  • Views 307
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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

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

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

$( document ).ready(function() {
  var sevenOneLogoSrcSwitcher = function(logoUrl){ 
    $('.header-title-logo img').attr('src', logoUrl);

  // Example usage : 


Add your second logo destination to the secondLogoUrl. 
For example

Add your store path to changeLogoLocation
For example

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 🙂

Edited by codeandtonic

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.