How to customize your cookie banner in Squarespace

While a cookie banner is a must for your website thanks to GDPR compliance rules and Squarespace does have a setting for this, it could use a little help in the custom coding department to make it a little bit more aesthetically appealing.

Through this blog post I am going to walk you through how to activate your cookie banner and tweak a few things in your CSS window to get it on brand and updated how you like!

Turn on your Cookie Banner Settings

Through your Settings menu, select Cookies and Visitor Data. From this window click Enable Cookie Banner. Once you’ve accessed this page and turned on your cookie banner, customize your text in the confirmation text section.

Select your layout

Underneath the confirmation text settings, you can update the layout settings as well. You can review the screenshot below to see my settings, this is also what would be best for the custom code we will be using later.

Here is an overview of what’s below. I have selected Bar as my banner type with the banner position set as Bottom. I’ve also picked Light as the banner theme with Text as the call to action type for my cookie banner as well. You can customize the CTA text, but I just kept it as the default OK.

Customizing your banner

Now for the fun part, using the custom code below, you can update the color settings of your cookie banner. Visit your Design menu and select Custom CSS. Paste in the code below into the Custom CSS window!

// Cookie Banner
.sqs-cookie-banner-v2 {
background: #eab634 !important;
}
.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2 a {
color: #fff !important;
}
.sqs-cookie-banner-v2-accept {
color: #fff !important;
}

The portions of the code bolded are the ones that you can update and change to your branded colors or whatever you like!

If you have any trouble with the code, feel free to shoot me a message!