How to style your cookie banner
Squarespace cookie banners
If you're using Squarespace, you can enable your cookie banner and stop cookies being collected until the user has consented; keep in mind that your analytics may take a hit after doing this as not all users will consent to cookies being used, but it is the best way to ensure you are GDPR compliant.
With your Squarespace cookie banner enabled, you'll want to add some CSS asap because it wont have kept the style of your site.
To add custom CSS you need to go to the 'design' tab and then 'custom css'; once you start adding custom CSS Squarespace customer service can't help you with any issues that arise, so it's best to contact a Squarespace designer if you aren't 100% sure about what you're doing.
It's completely up to you how you want to style your Squarespace cookie banner. I've listed below some elements I would change first:
- Position: have a look at your site and think about where the cookie banner is best suited. This can be anywhere from top, bottom and even in one of the corners. The banner should be visible to users (remember, we want them to consent as that's better for our analytics) but not disruptive to the rest of the site.
- Colour: what is the colour scheme for your website? You can change the background colour as well as the border colour of the cookie banner but make sure both of these colours are within your brands colour palette.
- Size: the width will need to be changed as the standard cookie banner is an awkward half legth. With my clients I tend to go for 90% (and then pad out either site to make it central) or 250px which will fit nicely into one of the corners.
- Font: font size, font colour and font type should be changed. They should be kept consistent to the rest of your site.
- Padding: I like to change the padding of the banner to ensure it's not carrying too much empty space. Empty space in the cookie banner can make it bulkier and ideally we want it only as big as it needs to be.
- Accept: in your cookie banner you will have a button which takes consent from the user, this might be titled 'accept' or 'continue'. We can change the shape, width, colour and font of this button and should do so to keep the brand style consistent.
- Multiple views: Just like with the rest of the site, we need to take into consideration that users will be viewing from an array of devices. I tend to make my cookie banners a little narrower and change the font size to a percentage as opposed to a set number (12px for example).
Got any questions about styling your cookie banner? Get in touch!