How to Change the Logo Link Using Code in Squarespace 7.1 (Step-by-Step Guide)
In Squarespace 7.1, your logo is set to link to the homepage by default. But what if you want it to be redirected somewhere else (for instance, a promo page, a different domain, a special landing, etc.)?
Unfortunately, you can't change the logo URL from settings in Squarespace. But it’s also just as easy to override the default and add a custom link to your logo, that’s safe and works effectively with a little JavaScript snippet.
Why You May Want to Edit the Logo Link
Redirect to a campaign landing page by season
Link to another subdomain or an external site
Keep a consistent link even if the homepage settings change
Of course, this is not achievable from the default settings, hence the custom code.
Step-by-Step: How to Change the Logo Link Using Code
Step 1: Understand the Logo’s HTML Structure
In Squarespace 7.1, the site logo is wrapped inside an anchor (<a>) tag like this:
<a class="header-title-logo" href="/"> ... </a>
The href="/" part is what links it to the homepage. We’ll override that with JavaScript.
2: Inject Custom Code to Change the Logo Link
Go to your site dashboard and navigate to:
Settings → Advanced → Code Injection → Footer
Paste the following script:
<script>
document.addEventListener('DOMContentLoaded', function() {
var logoLink = document.querySelector('.header-title-logo');
if (logoLink) {
logoLink.setAttribute('href', '/');
}
});
</script>
What This Code Does:
Waits until the page finishes loading
Finds the logo using .header-title-logo
Replaces the default homepage link with your desired URL
Change Logo Link to a Custom Page or External Website
Example 1: Link to a Custom Internal Page
<script>
document.addEventListener('DOMContentLoaded', function() {
var logoLink = document.querySelector('.header-title-logo');
if (logoLink) {
logoLink.setAttribute('href', '/promo-page');
}
});
</script>
Tip: Use relative URLs like /promo-page for fast, internal navigation.
Example 2: Link to an External Website and Open in New Tab
<script>
document.addEventListener('DOMContentLoaded', function() {
var logoLink = document.querySelector('.header-title-logo');
if (logoLink) {
logoLink.setAttribute('href', 'https://www.your-other-website.com');
logoLink.setAttribute('target', '_blank'); // Optional: open in new tab
}
});
</script>
Tip: Use full URLs (https://...) for external links and add target="_blank" to open in a new tab.
Quick Summary
| Step | What to Do |
|---|---|
| 1️⃣ | Go to Settings > Advanced > Code Injection > Footer |
| 2️⃣ | Add the JavaScript snippet that targets the logo link |
| 3️⃣ | Replace the href with your desired destination |
| 4️⃣ | Save changes, refresh your site, and test it live |
Final Result
After completing the steps:
Your logo will link to any URL you set
Works across desktop and mobile
Enhances control over your site’s user journey
Easy to modify or revert anytime
Your navigation becomes more flexible, polished, and aligned with your marketing goals.
Pro Tips for Best Results
| Tip | Why It Matters |
|---|---|
| Use relative URLs (e.g., /page-name) | For fast, internal linking |
| Use full URLs (https://...) | Required for external destinations |
Add target="_blank" |
Opens the link in a new tab, great for external sites |
| Test on mobile and tablet | Ensure it works on all devices |
| Clear browser cache | Script changes may be cached in Squarespace |
Conclusion
Modifying your Squarespace logo link isn’t something you can do from the dashboard, but with this simple code-based method, you can take full control of your site’s navigation. Whether you're redirecting traffic to a campaign page or pointing users to a separate brand, this technique gives you the power and flexibility to guide visitors exactly where you want them to go.
Frequently Asked Questions (FAQ)
1. How do I swap the Squarespace logo link without using code?
Does Squarespace 7.1 provide an out-of-the-box method to change the logo link in the dashboard? For the sidebar to stay open, you’ll need to add a bit of JavaScript into the ‘Code Injection’ part of your site.
2. In which file do I have to paste the custom code to modify the logo link?
Paste this JavaScript code inside:
Settings → Advanced → Code Injection → Footer. For other Ghost and Ghost-related tutorials.
This way it assures the code is executed AFTER the page has loaded, and thus does in fact modify the link from the logo.
3. Does this work for both the Desktop and Mobile versions of my website?
Yes. The custom code will change the link behind the logo site-wide on all devices every device (including mobile, tablet, and desktop).
4. Can I make the logo open in a new tab?
Yes. To open the link in a new tab, add this line to the script:
logoLink.setAttribute('target', '_blank');
This tells the browser to open the link in a new tab when clicked.
5. Is this method safe for SEO?
Yes, changing the URL of the logo link via JavaScript is perfectly fine and doesn’t harm your SEO as well. But use it with caution, as adding the new link should improve your site’s navigation and user experience.
6. Do I need to add the script again after I changed the template?
Not usually. As long as the new template is still alongside the . header-title-logo class about the logo, and the script will carry on working. If the name of the class changes, you should change it in your code too.
