How to Customize Your Squarespace Cookie Banner Design (Copy + Paste CSS)

Attention: This original post (June 2018) has been officially UPDATED! It seems like Squarespace has finally settled with one cookie banner and stopped changing the settings on us, so I felt confident to finally make some much needed updates to this post!

With the GDPR coming into action recently, a lot of us small biz owners have had to make some big changes (don’t even get me started on the opt-in forms!).

One of the easier changes (thanks to Squarespace) was to add a pop up form alerting our visitors that our site uses cookies.

This pop up banner is super easy to implement, just head to your Squarespace Settings > Cookies & Visitor Data then check Enable Cookie Banner. Voila! You’ve got yourself a Cookie banner. You can even use their sample text (though, it seems a bit vague, so I recommend using your own).

Easy? Yeah!

Ugly? Ummm, heck yeah!

 
How to Edit the Design of Your Squarespace Cookie Banner with Basic CSS Code - Big Cat Creative #squarespace #tips
 

Yup, even though Squarespace blessed us with the ease of adding a cookie banner, they didn’t exactly make it cute, and they didn’t give us any simple options to make it cute, either.

This is the OG (first) version of the Cookie Banner, and it is truly hideous, as you can see…

 
Customize your Squarespace Cookie Banner.png

And as of September 2018, they improved it quite a lot (see the black bar at the bottom of the website):

How to Customize Your Cookie Banner in Squarespace | Big Cat Creative

With the September 2018 update, they went even further and gave us some editing options (possibly after lots of complaints) which is great. Now you can update the Type (either Bar or Pop-Up), the Position, if it’s Dark or Light and the style of button.

 
How to Customize Your Cookie Banner in Squarespace | Big Cat Creative
 
 

This is sufficient enough for a lot of people, honestly, I’ve been rocking the standard Dark + Pop-Up version for a while now (mostly because I was waiting for the updates to stop…)

But even though it’s sufficient, it’s not particularly on brand, and if you’re into the little details like me, follow along and let’s get started with some (basic) CSS!

Custom CSS for your Cookie Banner

Just copy and paste the following code into your Custom CSS (Design > Custom CSS) and edit it however you want. Don’t worry, I’m keeping it super basic so you pretty much can't screw anything up! 😂

TIP: If the cookie banner is gone and you want to view it again to preview what you are doing, open your browser in an Incognito window. When you make edits to the code, you can refresh this page and preview your changes.
 

Here are the exact pieces of code I use:

Please note that the button CSS will work best if you set your “Cookie Banner CTA Type” to “button” (see screenshot above)


Banner Font Settings:


.sqs-cookie-banner-v2 p,  {
color: #ffffff !important;
font-family: stolzl, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 200;
letter-spacing: .7px;
line-height: 150%;
}

Banner Background Color + Padding:


.sqs-cookie-banner-v2 {
background-color: #3b3b3b!important;
padding:20px;
}

Banner Button Color and Font Settings


.sqs-cookie-banner-v2.BUTTON .sqs-cookie-banner-v2-accept {
font-family: stolzl, sans-serif;
font-weight: 200;
border: 0px !important;
color: #fff !important;
background: #fdaeaa;
}

If you copy that code directly, your going to get a cookie form that looks a lot like this (see it in the bottom left corner):

 
How to Customize Your Cookie Banner in Squarespace | Big Cat Creative
 

 

If you’re not a code whiz and don’t want to have to change much, I recommend just changing the colors and fonts to make it on-brand for you, and leave the rest as is. Make sure you don’t remove the “!important;” otherwise your code won’t work properly.

If you are pretty familiar with CSS, take that code and edit it to your hearts content! You can definitely get more creative with it! You could add borders, drop shadows, button hover styles etc. The options are basically endless.

I hope this was a quick fix to equip you with an on-brand and not-so-ugly cookie banner. Thanks for reading and good luck!
 

 

Related Posts