How to Style Your Squarespace Cookie Banner

The passage of the GDPR marked the beginning of the age of data transparency online. And that means that now, more than ever, it’s important to disclose if you use cookies to track your website visitors. 

If you collect any kind of website usage data using Google Analytics, Squarespace Analytics, Quantcast, or another service, you need a cookie usage disclosure.

Luckily, Squarespace makes it easy to add an unobtrusive cookie banner to your website. In this tutorial, I’ll show you how to customize the Squarespace cookie banner to perfectly match your branding.

How to Enable the Squarespace Cookie Banner

To enable the cookie banner, login to your Squarespace account, go to your site panel and click Settings > Cookies & Visitor Data. Check Enable Cookie Banner.

You can customize your cookie banner message in the text box. You can add emojis, bold or italic text, and even link to your privacy policy if you want. 

Next, choose the banner type you want to display. You can choose a full-width bar or a small popup in the corner of your website. I personally prefer the less obtrusive corner popup. You can set the banner to appear at the top or bottom of your website and the popup to appear in any corner you choose. 

For the purposes of this tutorial, leave the cookie banner theme set to “dark.” We’re going to be customizing the color scheme using CSS.

How to Customize the Squarespace Cookie Banner

The first thing you’ll probably want to do is change the background color. You can also add a border if you want. To do that go to Design > Custom CSS and add the following code: 

.sqs-cookie-banner-v2.DARK {
background-color: #000000;
border: 2px solid #000000;
}

Replace 00000 with the hex code of your choice. You can also change the width and style of your border or delete that line of code altogether if you don’t want a border.

To change the color of the text, add this code snippet: 

.sqs-cookie-banner-v2.DARK p {
 color: #000000;
}

To change the color of a link within the text, use this code:

.sqs-cookie-banner-v2.DARK a {
color: #000000;
}

You can also make the link change color when someone hovers over it using this code:

.sqs-cookie-banner-v2.DARK a:hover {
color: #000000;
}

Finally, you can change the color of the X in the corner using this code:

.sqs-cookie-banner-v2.ICON .sqs-cookie-banner-v2-accept {
color: #000000;
}

Here’s what the end result looks like with my brand colors plugged in:

Have any questions, comments, or want to request a specific Squarespace tutorial? Leave a comment below!