How To Customise The New Squarespace Cookie Banner
I'm sure you’re all probably sick of hearing the words ‘cookie policy’ or anything relatively related to GDPR, however, we have a great little way to put your own spin on the Squarespace cookie banner. Squarespace initially introduced a not so lovely looking cookie banner which was quite honestly, hideous. Since then, there have been a number of revisions to the feature with options to alter the placement, colour scheme (black or white) and call to action format.
Although the new cookie banner looks much better today, it’s still very limited in terms of design. Here's how to customise it further with your own custom colour palette.
How To Activate The Squarespace Cookie Banner
The first thing you will need to do is head into the backend of your Squarespace website and head to the settings section. Here you will need to click on Cookies & Visitor Data and enable the Cookie Banner.
Squarespace has included default text for your cookie banner, however, we have decided to customise ours - how you want to play this is entirely up to you.
There are a number of options to select below the text box, you will need to choose the following:
COOKIE BANNER TYPE: Pop-Up
COOKIE BANNER POSITION: Bottom Left
COOKIE BANNER THEME: Light
COOKIE BANNER CTA TYPE: Button
COOKIE BANNER CTA TEXT: *whatever you want it to say on your button*
Click save once you are happy and head back to the backend landing page.
How To customise The Squarespace Cookie Banner
Now that you have activated your banner and saved your preferences, you will need to click on "Design" and then "Custom CSS". Here, you will need to paste the following code:
// COOKIE NOTICE //
// TEXT POSITION //
.sqs-cookie-banner-v2 p {
margin: 0 0 0 0 !important;
text-align: justify;
padding-top: 10px;
}// BOX //
.sqs-cookie-banner-v2 {
display: block !important;
background: #fff !important; // box background colour //
color: #000 !important;
border: solid 7px #bfada3 !important; // border colour //
line-height: 2 !important;
padding: 40px !important;
width: 350px !important;
position: fixed !important;
right: 0px !important;
left: 20px !important;
bottom: 20px !important;
top: auto !important;
}// BUTTON //
.sqs-cookie-banner-v2-accept {
background: #a29070 !important; // button background colour //
border: 0px !important;
font-weight:bold !important;
letter-spacing: 2px !important;
text-transform: uppercase;
margin-left: 0px !important;
width: 100% !important;
margin-top: 20px !important;
}// BUTTON TEXT COLOUR //
.sqs-cookie-banner-v2.LIGHT button {
color: #ffffff !important;
}
To change the colours, simply edit the hex codes which start with a hashtag! A simple way to customise your cookie banner and create a consistent look to the design of your website.
You can unsubscribe at any time. Read my full Privacy Policy.