How to Customize Your Squarespace Cookie Banner Design

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 backend > 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!

 
Change-the-Design-of-your-Squarespace-Cookie-Banner.jpg
 

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

 
Customize your Squarespace Cookie Banner.png
 

 

But that’s what I’m here for!

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 can't get it back, and you want to view it again to preview what you are doing, open your browser in an Incognito window (just don’t click the button and leave the pop up active). When you make edits to the code, you can refresh this page and preview your changes.
 

Here’s the exact piece of code I use (the first section is the actual banner, the second section is the button)


.cookie-notice {
background: #fff !important;
color: #333 !important;
border: solid 5px #e3ff17 !important;
position: fixed !important;
top: auto !important;
bottom: 20px !important;
left: 20px !important;
right: auto !important;
padding: 30px !important;
width: 250px;
font-size: 14px !important;
line-height: 170% !important;

}


.cookie-notice .accept {
width: 100% !important;
text-transform:uppercase !important;
font-weight: 600 !important;
letter-spacing: 2px;
font-size: 14px !important;
color: #fff  !important;
background: #e28aff  !important;
border: 0px  !important;
padding: 10px !important;
margin-top: 0px !important;

}
 

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

 
 

 

If you’re not a code whiz and don’t want to have to change much, I recommend just changing the color of the button (background: #e28aff  !important; ) and the border (border: solid 5px #e3ff17 !important;) and leaving the rest as it (copy it all over but don’t edit it).

Remember to just change the numbers (they indicate sizes) or the colors (eg #fff, hex codes) and don’t remove the “!important;” otherwise your code won’t work!

If you are pretty familiar with CSS, take that code and edit it to your hearts content!

I hope this was a quick fix for your naturally-hideous cookie banner, and if you have any questions leave me a comment! 

If you've completely pimped out your cookie banner to look #hellafresh make sure you drop it in the comments below and show me! 
 

 

Related Posts