Every website needs a cookie banner but they’re not always the most visually appealing website feature.

Whilst Squarespace’s native cookie banners actually don’t look that bad, sometimes clients will want more customised options, adding elements such as borders or different colours.

With a little bit of custom CSS styling, you can make a more bespoke and visually exciting cookie banner for your Squarespace website. To find out how to add custom CSS styling to a cookie banner, keep reading…

How to add custom CSS to a cookie banner on Squarespace

First of all you can head to your settings and select cookies & data. Here you actually have some customisation options already, including where the banner is positioned and if it has a light or dark background.

It’s your custom CSS panel within your design dashboard however where you can really get creative with your cookie banner.

First you need to add the below lines of code:

.sqs-cookie-banner-v2 {

}

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

You can customise your cookie banner by changing the colour of your background and border within the code itself, as well as altering the weight and radius of the border to change its shape and thickness.

.sqs-cookie-banner-v2 {

background: #fafafa !important;

border: solid 1px lightgray !important;

border-radius: 10px;

}

This code will target the whole cookie banner, allowing you to add elements such as a border. If you want to target the text of the code, you’ll need to first get the ID from Google Chrome Developer Tools.

You can then add the below code:

.sqs-cookie-banner-v2 * {

color: black !important;

}

Within this code you can alter the colour and size of the font depending on your preferences.

Like with any customisation, you’ll need to have a play around with the custom code, changing elements such as colour and weight, in order to achieve your desired aesthetic.

Cookie banners may be essential and serious website features, but that doesn’t mean they need to be ugly. With this code, you can customise yours to ensure it fits with the rest of your website branding.