Aaron Rolston
September 1, 2021
Articles
→
Technical
How to Change the Default Color Theme in Squarespace 7.1
Tired of spending countless extra clicks changing the color of new page sections on your Squarespace site, or struggling to style important system pages like the cart and checkout? Learn how to update the default color theme in just a few easy steps.
How to Change the Default Color Theme in Squarespace 7.1
↓
Why does default color theme matter?
Why does default color theme matter?
There are only two scenarios that your Squarespace site’s default color theme actually comes into play — one is extremely annoying, and the other can break your design if you’re not careful:
1. Creating new page sections
It’s not so much an issue as it is extremely tedious — if you’re designing a site with a primarily black background, and EVERY new section you add (even blank ones) have a white background by default, you’re just wasting precious time by having to change it manually.
2. Editing Squarespace system pages
This is most likely why you’re reading this: Your site’s cart page, checkout page, default 404 page, and any other default system pages are unchangeable in the Site Styles window. It’s especially precarious if you have any site-wide CSS font styling that might render those pages entirely illegible.
There are only two scenarios that your Squarespace site’s default color theme actually comes into play — one is extremely annoying, and the other can break your design if you’re not careful:
1. Creating new page sections
It’s not so much an issue as it is extremely tedious — if you’re designing a site with a primarily black background, and EVERY new section you add (even blank ones) have a white background by default, you’re just wasting precious time by having to change it manually.
2. Editing Squarespace system pages
This is most likely why you’re reading this: Your site’s cart page, checkout page, default 404 page, and any other default system pages are unchangeable in the Site Styles window. It’s especially precarious if you have any site-wide CSS font styling that might render those pages entirely illegible.
Where Squarespace goes wrong
Squarespace Version 7.0 relied entirely on pre-designed templates to change a site’s functionality, features, design aesthetic, and even performance. It’s what made Squarespace famous, as each template had its own quirks and design implications.
Squarespace Version 7.1 broke that methodology by implementing template-less design layouts that all function exactly the same, no matter what look you choose. Except, there’s a small hiccup in this pseudo-template format that’s causing the issue at hand.
When a user signs up for Squarespace 7.1, they’re prompted to select one of the pre-designed layouts before adding any of their own content. Squarespace doesn’t really give much detail as to what this choice implies — in fact, the menu looks nearly identical to the old 7.0 template browser, leading users to believe that they’ll behave in the same way if they’ve used Squarespace before.
Here’s the secret that Squarespace has never explicitly shared anywhere, either in support docs or layout selection.
Squarespace Version 7.0 relied entirely on pre-designed templates to change a site’s functionality, features, design aesthetic, and even performance. It’s what made Squarespace famous, as each template had its own quirks and design implications.
Squarespace Version 7.1 broke that methodology by implementing template-less design layouts that all function exactly the same, no matter what look you choose. Except, there’s a small hiccup in this pseudo-template format that’s causing the issue at hand.
When a user signs up for Squarespace 7.1, they’re prompted to select one of the pre-designed layouts before adding any of their own content. Squarespace doesn’t really give much detail as to what this choice implies — in fact, the menu looks nearly identical to the old 7.0 template browser, leading users to believe that they’ll behave in the same way if they’ve used Squarespace before.
Here’s the secret that Squarespace has never explicitly shared anywhere, either in support docs or layout selection.
The Solution
The background color of the layout you choose becomes the default color theme of your site, and the only way to change it is via Squarespace’s Mobile App. Here’s how to do it:
1. Log into your website on the Squarespace mobile app and hit “edit” in the top right corner. Navigate to “Colors”.
2. Instead of adjusting your site’s palette (as you would on desktop), hit the “Site Theme” menu.
3. Select which color theme you’d like to make the default.
The background color of the layout you choose becomes the default color theme of your site, and the only way to change it is via Squarespace’s Mobile App. Here’s how to do it:
1. Log into your website on the Squarespace mobile app and hit “edit” in the top right corner. Navigate to “Colors”.
2. Instead of adjusting your site’s palette (as you would on desktop), hit the “Site Theme” menu.
3. Select which color theme you’d like to make the default.
