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.

Squarespace_default_cookie_banner-1200x595.png

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:

 
squarespace cookie banner.png
 

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;
}
CSS Cheat Sheet

Free CSS Cheat Sheet

Overcome your fear of CSS + start customizing!

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!

 
 
Station SevenComment