How to Customize your Squarespace Cookie Banner

 How to Customize your Squarespace Cookie Banner・Kerstin Martin Squarespace Studio

Cookie banners became a hot topic when the Europeans decided to introduce stricter privacy laws via the GDPR which came into effect in May 2018. You can read all about it here. At the time Squarespace offered a rather unsightly cookie banner and it took three months and two revisions for them to finally give us some styling options! Which is a vast improvement on what we used to have. You can now choose from the following in > Settings > Cookie Banner:

  • A bar or a pop-up window. 
  • Placement in any corner of your website.
  • A light or dark color scheme.
  • An icon, button or text CTA (Call To Action) type.

Squarespace Analytics settings

Cookies are data bites that are placed on your visitors' browsers so that your website can run more efficiently and to improve your visitors' experience by remembering their preferences for instance. Furthermore, cookies provide important statistical information to us website owners which helps us analyse website traffic and make respective business decisions.

Generally cookies are harmless but nonetheless, we want and need to be transparent about how we use our site visitors' data and with that in mind the GDPR requires us to inform our site vistors about cookies and get their consent to use them. If a visitor does not consent (i.e. does not close down the cookie banner) then cookies need to be disabled.

This is how I configured my cookie banner:

 Squarespace Cookie Banner Settings
  1. Check Disable Squarespace Analytics Cookies.
  2. Keep Always unchecked unless you want to disable Squarespace Cookies for everyone regardless of their consent.
  3. I kept the Activity Log enabled for now as the data here is used for certain Analytics sections, such as Geography and Traffic Sources. I spoke to Squarespace support about having an 'Always' option for the Activity Log as well so that disabling it doesn't disable the data for everyone. Hopefully they will do this. Activity Log data is removed after 7 days, that's why I am taking a chance with this. 
  4. Add your Cookie Notice message into the text field. Make sure you include a link to your Privacy or Cookie Policy.
  5. If someone clicks on Continue on the Cookie Notice they won't see the notice again for 30 days.
  6. Generally be prepared for your Analytics Data to be less accurate from now on. 
  7. How Squarespace uses cookies.

Style the Cookie Banner

The cookie banner looks much better now with the new styling options and I think it is perfectly acceptable as it is. However, you know me, I still like to customize it just a bit more! Not too much though, I just changed the background color and put a border around it. And I pushed the position up a bit on mobile view so that my chat icon in the bottom right does not interfere with visitors' ability to close the cookie banner. And that's it! Here is the code:

// Cookie Banner
.sqs-cookie-banner-v2 {
  background: #139fae !important;
  border: 5px solid #e6b40f;
  border-radius: 10px;
}
.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2 a {
  color: #fff !important;
}
.sqs-cookie-banner-v2-accept {
  color: #fff !important;
}
@media only screen and (max-width: 640px) {
  .sqs-cookie-banner-v2 {
    bottom: 50px !important;
  }
}

Before / After:

Hide Cookie Banner on Cover Pages

Cover pages live in their own environment so they need to be coded separately. I decided to hide the code on my cover page (I use one for my course logins) as it's just not necessary on this page, plus people will see the cookie banner *again* once they log into a course from this page, which feels a bit too much! 

Click on the Cover Page settings tab and add this to > Advanced > Page Header Code Injection:

<style>
.sqs-cookie-banner-v2 {
  display: none !important;
</style>

Are you on Pinterest?

If you enjoyed this post I'd be thrilled if you shared it, thank you!

 
 Customize Your Squarespace Cookie Banner・Kerstin Martin Squarespace Studio
 

Squarespace BizBox 

You can make a great living designing Squarespace websites! Here I share ALL my tools that helped me be successful & grow.

Ask Me Anything!

You can literally ask me anything about Squarespace, your website, SEO, e-courses, or your own web design business. 


More Posts You Might Enjoy