How to Customize the EU Cookie Banner in Squarespace
Note: This post has been updated to account for the latest Squarespace changes to the cookie banner in September 2018!
With the introduction of the GDPR in early 2018, talk of privacy policies and cookie banners went from “nice-to-haves” to “must-haves” overnight.
Thankfully Squarespace has you covered with a built-in cookie banner feature—just a simple button click and you can have it activated on your site.
Done deal, right!?
Unfortunately, the reality of Squarespace’s cookie banner is one of function-over-fashion.
Basically, it’s ugly.
Not even a visit to the Style Editor will save you this time, as there’s no option in sight to help you update the styling of the Squarespace's EU cookie banner.
Amen for CSS!
If you’re new to CSS, don’t stress it. It’s actually pretty straightforward but soooooo powerful when it comes to taking control over the look of your site. We’ve put together some super simple snippets for you to copy and paste below.
Activate your EU Cookie Banner
To get started editing your EU Cookie Banner, you’ll first need to activate it. From your Squarespace dashboard, go to Settings > Cookies and Visitor Data and check the option for Enable Cookie Banner.
You can customize the text in the provided text box, and don’t forget to add a link to your privacy policy.
Perfect. You’re all set with your oh-so-default cookie banner. But let’s freshen that up a bit, don’t you think?
Layout Options
In September 2018, Squarespace finally introduced some built in options for the EU cookie banner (hallelujah!). Here are your new options:
Cookie Banner Type
Bar: Creates a full width banner at the top or bottom of the page
Pop-up: Creates a floating box in either of the four corners of the screen
Cookie Banner Position
The available options depend on the Cookie Banner Type you set previously.
For Bar type:
Top: bar is appended to the top of the page
Botton: bar is sticky to the bottom of the browser window
For Pop-Up type:
Top-Left
Top-Right
Bottom-Left
Bottom-Right
Cookie Banner Theme
Light: Black text on a light grey background
Dark: White text on a black background
Cookie Banner CTA Type
Customize the appearance of the action “button” on the banner.
Text: Text of your choosing
Button: A rectangular button
Icon: An “X”
Custom CSS
Although we have some control over the appearance of the cookie banner, you may find that it just looks a bit too… default. Thankfully, we’ve put together a couple different CSS snippets to help you quickly and easily update your EU Cookie Banner.
Be sure to copy the snippets below and paste them into the box under Design > Custom CSS. Feel free to update any values you like to match your own unique brand.
General Banner and Button Typography
/*Banner text and button typography*/
.sqs-cookie-banner-v2 p,
.sqs-cookie-banner-v2 button {
color: #222!important;
font-family: futura-pt, arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 300;
letter-spacing: .01em;
line-height: 1.4em;
}Banner Background and Drop Shadow
/* Banner background color and drop shadow */
.sqs-cookie-banner-v2 {
background-color: #f6dccc!important;
-webkit-box-shadow: 0px 1px 3px 0px rgba(150,150,150,.3);
-moz-box-shadow: 0px 1px 3px 0px rgba(150,150,150,.3);
box-shadow: 0px 1px 3px 0px rgba(150,150,150,.3);
}Button Style
/*Button Style*/
.sqs-cookie-banner-v2.BUTTON .sqs-cookie-banner-v2-accept {
border: 2px solid #222!important;
color: #222;
background: #5c755f;
}And that’s it! You’ve not only improved your compliance with the GDPR, you’ve also done it with style. Who says you can’t have function with a little bit of fashion too?
Are you using the EU Cookie Banner on your site? How have you customized it, or are you having troubles achieving the look you're going for? Share a link to your site in the comments below so we can check it out!
You might also like…
