Replace Site Logo or Title on a Specific Page in Squarespace
Check out my site title in the top left of this page. Just on this one specific page, my site title is Will’s Wacky Website. In this tutorial, I’m going to walk you through how to replace the site title (or Site Logo) on a specific page of your website.
If you want to replace more than just the Site Logo or Site Title, I highly recommend checking out my Site Nav Replacer plugin which will allow you to easily replace anything in the Site Nav area.
With this plugin, you can very easily replace the Site Title or Logo, Main Nav Links (including link dropdown’s), and CTA buttons. This is great for Members Areas, Multilingual Sites, or just an additional brand under the same URL.
Now, onto replacing the Site Logo or Title.
0:49 - Replace Site Title
6:42 - Replace Site Logo
The Code
If you just want the code and don’t care about learning how to do this, check out the code below.
Replace the Site Title
To replace the site Title, place this code in a Code Block or Markdown Block anywhere on your page. This code replaces the site title on desktop and mobile, so be sure to adjust the both Title’s and Link URL’s in the code below.
<script>
/*Code for Desktop*/
let siteTitle = document.querySelector('.header-display-desktop #site-title');
siteTitle.innerText = 'My New Title';
siteTitle.href = "/new-home";
/*Code for Mobile*/
let siteTitleMobile = document.querySelector('.header-display-mobile #site-title');
siteTitleMobile.innerText = 'My New Title';
siteTitleMobile.href = "/new-home";
</script>
Replace the Site Logo
To replace the site logo, place this code in a Code Block or Markdown Block anywhere on your page. Be sure to add the image to your Design » Custom CSS » Manage Custom Files area of your website. This code replaces the site logo on desktop and mobile, so be sure to adjust the both Link URL’s and Image URL’s in the code below.
<script>
/*Code For Desktop*/
let siteLogoLink = document.querySelector('.header-display-desktop .header-title-logo a');
let siteLogoImg = document.querySelector('.header-display-desktop .header-title-logo img');
siteLogoLink.href = "/new-home";
siteLogoImg.src = "https://static1.squarespace.com/static/605fa33ac88e074c56efc966/t/60802e77842d6e4b34ccbd5a/1619013239804/Favicon.001.png";
siteLogoImg.alt = "New Home"
/*Code For Mobile*/
let siteLogoLinkMobile = document.querySelector('.header-display-mobile .header-title-logo a');
let siteLogoImgMobile = document.querySelector('.header-display-mobile .header-title-logo img');
siteLogoLinkMobile.href = "/new-home";
siteLogoImgMobile.src = "https://static1.squarespace.com/static/605fa33ac88e074c56efc966/t/60802e77842d6e4b34ccbd5a/1619013239804/Favicon.001.png";
siteLogoImgMobile.alt = "New Home"
</script>
Replacing the Site Title
For this tutorial, there are two different bits of code we want to build.
Replacing the Site Title
Replacing the Site Logo
Let’s start with the Site Title.
First, let’s take a look at the HTML structure for a Site Title. By popping into the Web Inspector, we can see that the HTML structure of the Site title looks something like this:
<div class="header-title">
<div class="header-title-text">
<a id="site-title" href="/">
Your Site
</a>
</div>
</div>
This is actually pretty great, because all we need to do is select the one element with an id of site-title and replace it’s text and href attribute which controls the page it will link to. The Javascript would look like this:
<script>
let siteTitle = document.getElementById('site-title');
siteTitle.innerText = 'My New Title';
siteTitle.href = "/new-home";
</script>
Javascript can be super complicated and scary looking, but this is about as clear of Javascript as you’re going to get. We’re creating a variable the holds our Site Title element, then replacing its inner text and link.
If you place this code into a Code block or Markdown block anywhere BELOW the header (where the Site Title is) this will work. This code won’t work in the Page Header Code Injection or Site Header code injection area.
But wait! If you jump to mobile, you’ll notice that the new Site Title isn’t there! The issue here is that Squarespace has two different, yet identical, elements for controlling the Site Title on desktop and mobile. So we need to add on to our code from above to account for these other elements.
Instead of using the .getElementById method, I’m going to use .querySelector in general, I like using this one a bit more because it allows me to use normal CSS syntax for selecting things.
<script>
/*Code for Desktop*/
let siteTitle = document.querySelector('.header-display-desktop #site-title');
siteTitle.innerText = 'My New Title';
siteTitle.href = "/new-home";
/*Code for Mobile*/
let siteTitleMobile = document.querySelector('.header-display-mobile #site-title');
siteTitleMobile.innerText = 'My New Title';
siteTitleMobile.href = "/new-home";
</script>
Now, let’s talk about replacing the Site Logo.
Replacing the Site Logo
The process here will be very similar from above. First we need to look at the HTML structure of a site logo.
<div class=" header-title">
<div class="header-title-logo">
<a href="/">
<img src="//static1.squarespace.com/static/1618033/?format=1500w" alt="Your Site">
</a>
</div>
</div>
So in this example, there are two things we need to replace, the href attribute of the link (a element) and the src attribute of the img element.
But before we jump into the javascript, let’s first add an image to our website so that we get the image url we can use. The best place to do this is in the Design » Custom CSS » Manage Custom Files area.
Now that you have the URL of your image, let’s write the javascript, being sure to account for the mobile version of our site as well
<script>
/*Code For Desktop*/
let siteLogoLink = document.querySelector('.header-display-desktop .header-title-logo a');
let siteLogoImg = document.querySelector('.header-display-desktop .header-title-logo img');
siteLogoLink.href = "/new-home";
siteLogoImg.src = "https://static1.squarespace.com/static/605fa33ac88e074c56efc966/t/60802e77842d6e4b34ccbd5a/1619013239804/Favicon.001.png";
siteLogoImg.alt = "New Home"
/*Code For Mobile*/
let siteLogoLinkMobile = document.querySelector('.header-display-mobile .header-title-logo a');
let siteLogoImgMobile = document.querySelector('.header-display-mobile .header-title-logo img');
siteLogoLinkMobile.href = "/new-home";
siteLogoImgMobile.src = "https://static1.squarespace.com/static/605fa33ac88e074c56efc966/t/60802e77842d6e4b34ccbd5a/1619013239804/Favicon.001.png";
siteLogoImgMobile.alt = "New Home"
</script>
Et voila! We now have have replaced Site Logos.
Replace the your site nav on specific pages of your website. Great for use with Member Areas, multi-lingual sites, and additional brands under the same URL.
