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 the settings in Squarespace. But it’s also just as easy to override the default and add a custom link to your logo, which is 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
-
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.
-
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.
-
Yes. The custom code will change the link behind the logo site-wide on all devices every device (including mobile, tablet, and desktop).
-
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.
-
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.
