Alternative Logo On Each Page in Squarespace

UPDATED 2nd April 2020

I released a video a while back (October 2018 to be precise) explaining how to use a different logo on one or more of your pages in Squarespace 7's Brine family of templates.

At the time it represented the best solution that I could find, but since then it has become quite buggy for some people. This could be because it conflicts with other code that's being used in a site, or a number of other variables.

I've had many, many questions about it recently which made me realise that it's still clearly a popular feature and maybe I should find an alternative, easier way of doing it. So that's what I did.

So this will, again, cover Brine and Farro family templates (see below for full list of templates) for desktop and mobile, but if you're using any other Squarespace 7 templates follow the instructions to the end and then I'll explain how to adjust it for your template.

If you're using Squarespace 7.1 I have a video for that here.

How do I find out which version I am using?

Step 1 - Upload Your Default Logo

Firstly you need to be using a logo image for this to work. Using just the Site Title as a logo won't allow us to switch between logos.

You can upload a .jpg, .png or .gif as a logo (but not an .svg 😕). This one will serve as the most used logo throughout the website.

To upload a logo go to Design > Logo & Title

If you need to make a logo you can for free here

Once your logo is uploaded hit 'Save' and it should be displayed on your website.

Step 2 - Upload the Alternative Logo & Grab the URL

In the side panel of Squarespace head over to Design > Custom CSS and then click on 'Manage Custom Files'. Once it's open you can drag your alternative logo into 'Add images or fonts'.

When it's uploaded click on the logo file to bring up the URL of the image in the Custom CSS.

Highlight the URL in the CSS editor and take a copy (Command + C on Mac/CTRL + C on a PC) then remove the URL and cancel out of the CSS Editor.

Step 3 - Adding the Code to Swap the Logo

Next, head over to the Pages tab and click on the cog icon next to the page where you'd like to show your alternative logo.

Note: If it is an Index Page (signalled by two horizontal lines to the left of the page name) make sure to select the cog icon of the top level page.

When the page settings open select the Advanced tab.

Then in the Page Header Code Injection add the following code:

<style>
.Header-branding-logo, .Mobile-bar-branding-logo {
 content: url("YOURLOGOURL");
 }
</style>

Next we need to grab the alternative logo URL that we copied in step 2 and replace YOURLOGOURL with the that of the alternative logo.

Your code should look something like this:

Hit save, and that's it! Your alternative logo should be displaying on your chosen page.

If you want to apply the logo to other pages simply take a copy of the code from the Page Header Code Injection and paste it in to the other pages where you'd like the logo displayed.

Applying to Other Templates

So as I mentioned earlier in the post, this is for Brine and Farro family templates only. So this will work on any of the following templates:

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Farro, Feed, Foster, Greenwich, Hatch, Haute, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

But other templates use different class ID's for the logo, so we'll need to adjust the CSS to match your template.

To do that we need to change two parts of the code, .Header-branding-logo and.Mobile-bar-branding-logo like so:

<style>
CHANGETHISPART {
 content: url("YOURLOGOURL");
 }
</style>

Below is a list templates with the adjusted class ID's for each

‍

Adirondack, Avenue‍

.logo

‍

Aubrey, Aviator, Encore‍

.site-title-image

‍

Bedford Family - Anya, Bedford, Bryant, Hayden‍

#logoImage

‍

Five‍

#banner

‍

Flatiron, Forte, Supply

#logo

Note: Forte may need max-width applied to control the size of the alternate logo. On a new line underneath the content line, before the final curly bracket add this line:

max-width: 200px;

You can then adjust the 200px up or down to control the size of the logo.

‍

Galapagos

.site-logo-image

‍

Ishimoto

.logo-image .logo img

‍

Momentum‍

#logo .logo-image img

‍

Montauk Family - Julia, Kent, Montauk, Om

.logo-image .logo img

‍

Native

#header h1.logo.image .placed-logo-image img

‍

Pacific Family - Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific

#logoImage img

‍

Skye Family - Foundry, Indigo, Ready, Skye, Tudor

.logo-image img

‍

Tremont Family - Camino, Carson, Henson, Tremont

.site-branding h1 img

‍

Wells

#logo .logo.image img

‍

Wexley

.logo-image .logo img

‍

York Family- Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York

.logo-image img, .mobile-logo-image img

‍

Adversary, Alex, Eamon, Ginger, Marquee, Mint, Shift

These templates have been discontinued, so I' haven't been able to test them out.