How to Style the New Squarespace Cookie Banner
With Squarespace’s 2024 update, the Squarespace cookie banner is now easier than ever to customise. Having a cookie banner is a legal requirement, so it’s worth the few minutes it might take to make it look good! In this post I’ll be covering all the default styling options for the Squarespace cookie banner, as well as some ways to customise it with custom CSS!
The Squarespace Cookie Banner Options
As of July 10, 2024, Squarespace has rolled out a brand new, revamped cookie banner to all sites. This update has included a much-needed improvement in the styling options, including the ability to customise the colours, buttons and text size, while retaining the previous layout variations.
You can also now add and customise a button for users to manage their cookie preferences.
Colour
The colour of the background, text and buttons are all based on your pre-existing colour themes. This means they’ll take on the colours of your section background and text. Depending on how you’ve styled those, your Squarespace cookie pop up may look a bit wacky.
No problem - simply swap the selected colour theme or adjust the site styles on your current one.
Buttons
The buttons on your Squarespace cookie banner will copy the styles for the Primary, Secondary and Tertiary buttons, including the colours. There’s not much control over this without code - if you want to change them, you’ll need to change the Primary/Secondary/Tertiary buttons for the whole website.
Layout
You can choose between a strip at the top or bottom of your website, or a more square shaped notice that can appear in any of the four corners. These are the same layout options we have had previously.
Font Size
Now you can adjust the text size of the disclaimer message. Note that this is only for the longer description/message. It won’t affect anything else!
Message Text and Labels
You can change all of the button labels and the disclaimer text. This is a good opportunity to add some personality to your website copy!
Saved Preferences Button
The new saved preferences button allows users to navigate back to their cookie settings and adjust them as they desire. This particular feature means the cookie banner is now GDPR compliant, which is a huge improvement over the older version.
This link shows up on the footer as a button or a bar, depending on your preference.
How to Change the Style
To make adjustments to the styling of your Squarespace cookie banner, follow these steps:
In the Home Menu, click Website, then Styles.
Go to Accessories, then Cookie Banner.
Go to Colour Theme to change the background and text colours.
Go to Position to change the layout and position on the page.
Go to Disclaimer Text Size to change the size of the text.
Where to find the style options for the Squarespace cookie banner
How to Change the Message Text and Labels
To make adjustments to the styling of your Squarespace cookie banner, follow these steps:
In the Home Menu, click the Settings cog.
Under Website, select Cookies and Data Privacy.
Under Banner, toggle the cookie banner on and off.
Under Banner Text, adjust the button labels and disclaimer text.
Under Saved Preferences, choose to show or hide the button for cookie preferences.
Where to find the settings for the Squarespace cookie banner
How to Style the Squarespace Cookie Banner with CSS
You might be wondering how to change the Squarespace cookie banner fonts and button styles outside of the defaults. Since Squarespace will automatically use your paragraph fonts and primary/tertiary buttons for the cookie banner, you’ll need to use some custom CSS snippets to get around it.
Customise the Squarespace Cookie Banner
This is the initial cookie banner that appears when users first visit your website.
In the Home Menu, click Website and scroll down to the bottom.
Click Website Tools > Custom CSS.
Copy and paste the relevant CSS into the box:
// Background //
.gdpr-cookie-banner {
background: #ffffff !important;
}
// Disclaimer Text //
.gdpr-cookie-banner.full-styling.banner .disclaimer-text {
color: #000000 !important;
}
// Accept Button //
.accept.sqs-button-element--primary {
background: #000000 !important;
}
// Decline Button //
.decline.sqs-button-element--secondary {
background: #000000 !imoprtant;
}
// Manage Button //
.manage.sqs-button-element--tertiary {
background: #000000 !important;
}
Where to paste Custom CSS to style the Squarespace cookie banner
Customise the Squarespace Manage Cookies Menu
This the the menu that appears when users select Manage Cookies from the cookie banner.
In the Home Menu, click Website and scroll down to the bottom.
Click Website Tools > Custom CSS.
Copy and paste the relevant CSS into the box:
// Background //
.manage-cookies-overlay {
background: #ffffff !important;
}
// Title //
.manage-cookies-overlay h3 {
color: #000000 !important;
}
// Category Title //
.category-selection h4 {
font-family: FONT NAME;
color: #000000 !important;
}
// Category Text //
.category-description {
font-family: FONT NAME;
color: #000000 !important;
}
// Always On Text //
.category-selection p {
font-family: FONT NAME;
color: #000000 !important;
}
// Toggle Text //
.toggle-wrapper p {
font-family: FONT NAME;
color: #000000 !important;
}
// Save Preferences //
.save.sqs-button-element--primary {
font-family: FONT NAME;
background: #000000 !important;
}
Customise the Squarespace Cookie Preferences Button
This is the button or bar that appears at the bottom of your website and allows users to manage their cookies at any time. Depending on whether you’ve selected the Pill or Banner display option, you may want to remove one of these snippets!
In the Home Menu, click Website and scroll down to the bottom.
Click Website Tools > Custom CSS.
Copy and paste the relevant CSS into the box:
// Cookie Preferences Pill Button //
.manage-cookies-bar.PILL {
background: #000000 !important;
}
// Cookie Preferences Banner Button //
.manage-cookies-bar.SUB_FOOTER {
background: #000000 !important;
}
// Cookie Preference Text //
.manage-cookies-bar .manage-bar-action {
font-family: FONT NAME !important;
color: #ffffff !important;
}Squarespace cookie banner keeps disappearing while you’re trying to customise it? Open your website in an incognito tab and refresh the page each time you make an update to the custom CSS.
