How to swap site logo on specific pages on a Squarespace 7.1 site

1 Apr

Struggling to see the logo on some pages of your Squarespace site because it blends into the background? You're not alone. Here’s a free plugin that lets you swap out your logo on specific pages, ensuring it always stands out.

Let's dive into a straightforward guide to revamping your Squarespace site's visual appeal by swapping logos for better contrast. Say goodbye to visibility issues and hello to a standout online presence.

If you have questions about this plugin
or anything else Squarespace related,
why not drop me a line or schedule a free call?

How to configure and install the free logo swap plugin

This Squarespace 7.1 compatible plugin is helpful when a logo works on some pages but not others due to the contrasting colour of the banner or header area.

Upload your alternative logo to the site and get its url.
Copy the plugin code below, replacing /newimage.png with your alternative logo url
Paste the plugin code into your sitewide footer code injection

<script>
//
// Written by Colin Irwin - https://www.silvabokis.com
// 
document.addEventListener('DOMContentLoaded', function() {
    updateImageSrcIfUrlMatches('/videos/v/', 'img[elementtiming="nbf-header-logo-desktop"]', '/newimage.png');
    // You can add more calls with different patterns, selectors, and image sources as needed
    // updateImageSrcIfUrlMatches('/anotherPattern/', 'img[anotherAttribute="value"]', '/anotherImage.png');
});

function updateImageSrcIfUrlMatches(pattern, selector, newSrc) {
    if (window.location.href.includes(pattern)) {
        const elements = document.querySelectorAll(selector);
        elements.forEach(function(element) {
            element.src = newSrc;
        });
    }
}
</script>

Notes

Sizing your replacement logo - The the new logo will be delivered as-is. It will not be resized by Squarespace to make it an appropriate size for the logo slot. For that reason you should upload the replacement logo at a smaller size. To allow for high density displays I would recommend sizing the logo 2x or 4x the displayed size.

7.1