Replace Site Logo on a Specific Page

Free

Jan 18

Replace your site logo on a specific page to highlight a different brand or membership area.

Why Use This?
Use this tutorial to switch out the logo (and it’s corresponding url) with a completely different logo. If you just want to change the logo variant so that it shows up better against the background color, check out this tutorial.

Steps

Step 1: Import your new logo

In your Custom CSS area, navigate to the Custom Files dropdown and upload your new logo.

Step 2. Set your logo variant as a variable

Add your new logo to a variable in your Custom CSS area that we can then pull into specific pages. Paste the below code into your Custom CSS area, replacing the url in single quotes with the url of your new logo.

/**
 * Logo Variations
**/
html {
  --light-logo: url('https://static1.squarespace.com/static/65317d8e655a6734ccfb9e58/t/65b29b71ab0ad84dc5d58bf7/1706204017728/Light+Logo.png');
}

Step 3: Pull in your logo variable to specific pages

Navigate to the Website area in the Squarespace Editor and click on the settings (gear icon) of the page you want to replace your logo. In the Page Settings » Advanced » Page Header Code Injection area, paste the below code.

<!-- Replace Site Logo - from Will-Myers.com -->
<style>
  #header .header-mobile-logo img,
  #header .header-title-logo img{
    content: var(--light-logo);
  }
</style>

Step 4. Change where the logo points

Below the code from step 3, paste in the following javascript and replace /new-home with the new url you’d like the logo to point to.

<script>
  window.addEventListener('DOMContentLoaded', () => {
    const newHref = "/new-home";

    const desktopSiteLogo = document.querySelector('#header .header-display-desktop .header-title-logo a');
    const mobileSiteLogo = document.querySelector('#header .header-display-mobile .header-title-logo a')
    desktopSiteLogo.href = newHref
    mobileSiteLogo.href = newHref
  })
</script>