Squarespace: How To Change The Logo On Each Page (7.1 & 7.0 Guide)

Swapping your global header logo for a specific alternative image on individual Squarespace pages requires utilizing page-specific CSS injection or targeted Page ID selector overrides. By targeting the header brand wrapper with a CSS content property replacement or using page-level script manipulation, you can implement clean, per-page visual branding that maintains fast load times and absolute mobile responsiveness. This guide provides the complete blueprint to execute these changes flawlessly without breaking your global design architecture.

Asset Preparation, Platform Requirements, and Environment Assessment

Before altering any layout scripts or injecting custom style rules into your Squarespace environment, you must gather your visual assets and verify your subscription level. Swapping logos dynamically across different URLs demands specific CSS methodologies depending on whether your site runs on the Squarespace 7.0 or 7.1 template engine.

To ensure seamless rendering without layout shifts, all alternative brand assets must conform to precise technical specifications. Below is the operational checklist detailing the essential gear, prerequisite knowledge, and system benchmarks required to successfully complete this modification.

• Essential Assets: Alternate logo files saved as high-definition, transparent PNG files or optimized SVG vectors. Match the dimensions and relative aspect ratios of your primary global logo to prevent unexpected header alignment shifts during loading.
• Software & Browser Extensions: Google Chrome or Mozilla Firefox web browser with Developer Tools installed. An optional browser extension like the Squarespace ID Finder is highly recommended to quickly locate specific collection and block identifier strings.
• Mandatory Prerequisite Knowledge: Familiarity with the Squarespace navigation panel, basic CSS selector terminology, and general file hosting structures inside the Squarespace Link Editor interface.
• Platform Plan Requirements: The Page Header Code Injection feature requires a Squarespace Business, Commerce, or Advanced Commerce plan. If you are on a Personal subscription plan, you must utilize the global Custom CSS panel coupled with page-specific Collection ID classes to bypass the advanced page-level setting limitations.
• Estimated Duration: Approximately 10 to 15 minutes of configuration time per target page.
• Budget Benchmark: $0 extra, as this relies exclusively on standard integrated custom style properties.

Customizing Logos Across Squarespace 7.0 and 7.1 Engine Environments

Changing your brand markup dynamically across different pages requires targeting specific elements in the Document Object Model (DOM). Since Squarespace engines process headers differently, follow the steps below to upload your assets and apply the corresponding CSS overrides to your system.

Step 1: Uploading and Hosting Your Alternate Logo Files

Squarespace needs to host your secondary logo images before you can reference them in your styling rules. You must generate static URLs for these assets.

1. Log in to your Squarespace account and open your target website dashboard.
2. Navigate to any page on your website, enter the edit mode, and add a temporary text block somewhere in the footer or a hidden section.
3. Highlight a single word in the text block and click the Link icon from the floating rich-text toolbar.
4. Click the gear icon next to the link destination field to open the advanced link settings panel.
5. Select File from the left sidebar of the options dialog, click Upload File, select your prepared alternative logo file from your local hard drive, and confirm the upload.
6. Once the file shows an active checkmark, click Save, then click Apply on the link toolbar.
7. Do not delete this temporary link just yet. Right-click the newly created link text inside your editor, select Copy Link Address, and paste this URL into a plain text file for reference. The structure will look like: https://your-website.squarespace.com/s/your-uploaded-logo.png or simply /s/your-uploaded-logo.png as a relative directory path.
8. Exit the editor without saving the visual page changes if you prefer to keep your front-end clean, or simply delete the temporary link once you have saved the file URL securely.

Step 2: Identifying Your Targeted Page ID or Collection ID

To force a stylesheet rule to apply solely to one specific page, you must identify that page's unique internal identifier.

1. Open your live website in a new browser tab and navigate directly to the specific page where you want the alternative logo to display.
2. Right-click anywhere on the page canvas and select Inspect to open your browser’s Developer Tools panel.
3. Scroll to the very top of the elements panel to find the opening body HTML tag.
4. Locate the id attribute within the body tag. It will start with the prefix collection- followed by a long, unique alphanumeric string, such as id="collection-64a2b1c3e4f5g6h7i8j90".
5. Alternatively, if you have installed a Squarespace Collection ID Finder extension, simply click the extension button in your browser toolbar to display the identifier clearly highlighted on your screen in a bold overlay box.
6. Copy this collection ID string, including the leading hash symbol (e.g., #collection-64a2b1c3e4f5g6h7i8j90), and store it inside your reference document next to the alternate logo URL you collected in Step 1.

Step 3: Applying CSS Inject to Swap the Logo in Squarespace 7.1

If your site is built on Squarespace 7.1, the template uses a unified header structure. You will inject a stylesheet rule that forces the browser to replace the standard source file with your alternative file on the targeted page.

1. From your main dashboard, navigate to Website, scroll down to Website Tools, and select Custom CSS. On older Squarespace dashboards, this is located under Design and then Custom CSS.
2. Paste the following customized CSS selector rule directly into your stylesheet panel, taking care to replace the placeholder strings with your unique collected parameters.
3. To construct this rule, type the collection ID, followed by a space, then the class name .header-title-logo-wrapper img, followed by a comma. On the next line, type your collection ID again, followed by a space, then the class name .header-mobile-logo img.
4. Directly following these combined selectors, open a curly bracket. On a new line, define the content property by writing: content: url('your-uploaded-logo-path-here') !important;
5. Complete the statement by writing a closing curly bracket on its own line.
6. An example written in standard CSS formatting resembles:

#collection-64a2b1c3e4f5g6h7i8j90 .header-title-logo-wrapper img, #collection-64a2b1c3e4f5g6h7i8j90 .header-mobile-logo img { content: url('/s/alternate-logo-variant.png') !important; } 7. Click Save in the upper left corner of your panel. Refresh the page to confirm that the global logo instantly updates to the alternative logo on your specified target URL while remaining completely unchanged across the rest of your site.

Step 4: Applying CSS Inject to Swap the Logo in Squarespace 7.0 (Template-Specific)

Squarespace 7.0 templates rely on completely different class naming systems depending on the design family you installed (such as Brine, Bedford, or Pacific).

1. Navigate to your live page, inspect your header elements, and isolate the exact image selector class your 7.0 template utilizes. Common target classes include .logo-image img, .site-title img, or .header-inner .logo-image img.
2. Open your global Custom CSS panel inside Squarespace.
3. Construct your styling rule by prefixing your template-specific logo class with your unique collection ID.
4. An example layout for a Brine-family template requires writing:

#collection-64a2b1c3e4f5g6h7i8j90 .Header-branding-logo { content: url('/s/alternate-logo-variant.png') !important; } 5. For templates that do not support the content url replacement syntax, use a background-image override instead. Paste the following structure: #collection-64a2b1c3e4f5g6h7i8j90 .logo-image img { visibility: hidden !important; } #collection-64a2b1c3e4f5g6h7i8j90 .logo-image a { background-image: url('/s/alternate-logo-variant.png') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; display: block !important; width: 250px !important; height: 80px !important; } 6. Click Save and confirm your mobile header responds properly to these styling dimensions.

Step 5: Utilizing Page-Level Advanced Injection (For Business & Commerce Plans)

If you prefer not to clutter your global Custom CSS panel, you can inject a local stylesheet directly into the header of your specific page settings menu.

1. Hover over the page listed in your Website panel, click the Gear icon next to the page name to open Page Settings.
2. Select the Advanced tab in the sidebar menu.
3. Inside the Page Header Code Injection text field, open a local HTML style container.
4. Type an opening tag consisting of the less-than symbol, the word style, and the greater-than symbol.
5. On the next line, input the logo swap selectors. Because this code compiles specifically on the current page, you do not need to prepend a collection ID. Write: .header-title-logo-wrapper img, .header-mobile-logo img { content: url('/s/alternate-logo-variant.png') !important; }
6. Close the style container on the subsequent line by typing a less-than symbol, a forward slash, the word style, and a greater-than symbol.
7. Click Save to complete the local setup.

Image Format, Aspect Ratio, and Compression Performance Matrix

The dynamic swap of branding elements relies heavily on browser execution speeds. If your alternate logo files are excessively large or poorly optimized, users will experience layout shifts and flash-of-unstyled-content (FOUC) errors. The table below outlines the critical design, layout, and optimization standards required for each common page-specific application.

Rendering Layout Shifts and Custom Styling Code Collisions

When injecting custom rules into Squarespace, styling conflicts can arise. Review the following common failure scenarios and apply their corresponding tactical remedies to restore your site layout.

• Scenario 1: The Alternative Logo Does Not Render (Blank Space or Broken Image Link)

  
  
  
  • Root Cause: The uploaded logo file path is incorrect, contains an invalid relative directory, or is saved within a draft page that has not been published, causing access permissions to fail.
  • Actionable Fix: Paste the exact URL of your uploaded image directly into your browser's address bar. If the image displays there, your link is active. Next, verify that the image link uses a relative format starting with a forward slash (/s/filename.png) or a fully qualified domain path. Finally, confirm your custom style contains a closing semicolon after your URL definition.

• Scenario 2: Cumulative Layout Shift (CLS) on Page Load (The logo flickers, shifts down, or resizes dynamically)

  
  
  
  • Root Cause: The secondary logo file contains unequal border spacing or a vastly different original canvas dimension compared to your primary global logo, forcing the browser header height to expand or shrink during the rendering cycle.
  • Actionable Fix: Open your primary logo and secondary logo side-by-side in an image editor. Crop both images so that they share identical pixel width and height frames. Add transparent buffer padding around your shorter logo variant to force identical external boundary limits on both assets.

• Scenario 3: Mobile Header Logo Fails to Update

  
  
  
  • Root Cause: Your styling target relies solely on desktop selector classes (.header-title-logo-wrapper img) and neglects to declare the corresponding mobile layout class targets.
  • Actionable Fix: Ensure your Custom CSS rules specifically target both selectors simultaneously. Update your selector line to always include a comma separating the desktop selector wrapper class from the mobile selector class, which is represented by .header-mobile-logo img in standard 7.1 templates.

Frequently Asked Questions

Can I change the logo on a specific page using a Personal Squarespace plan?

Yes. Although the Page Header Code Injection field is restricted to Business and Commerce subscriptions, Personal plan users can achieve identical results by utilizing the global Custom CSS panel. By referencing the specific page body selector string (such as #collection-xxxx) in your global stylesheet, you bypass individual page-level block restrictions.

Will swapping my logo per page negatively affect my SEO ranking or page speed?

No, provided your alternate images are optimized. Using a CSS content property replacement rule is lightweight, fast, and cleanly executed inside the browser rendering tree. Because it bypasses the need for bloated jQuery libraries, page execution times and core web vital speeds remain high.

How do I change the clickable link destination of my custom page logo?

To redirect the logo link to a unique page instead of your default homepage, you must use Javascript to dynamically overwrite the anchor tag href value. Inside your Page Header Code Injection panel, insert a script element that targets your header selector class and updates the selector element's href property to your new desired link path.

Can I use SVG files for page-specific logos in Squarespace?

Yes. SVG files are ideal for page-specific logos because they scale infinitely without losing clarity. Upload your SVG file using the standard file selector method, retrieve the hosted URL link, and target your class wrappers using the exact same CSS content property outlined in our guide.

Scale Your Brand Aesthetics with Precision Engineering

Seamlessly adjust your website’s visual presentation and deploy tailored page-level experiences to captivate your audiences. For complex technical site development or custom database integrations, consult with a certified Squarespace design specialist to scale your platform's capabilities.