How to Customize your Squarespace Cookie Banner

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

Cookies make life better, right??

Of course they do. Except when you abstain from sugar, or when they force you to place an ugly pop-up banner on your website! 

As someone who is all about clean web design it pains me considerably that to comply with the GDPR I now have to display a cookie notice box. I don't even really like the Announcement Bar that you can place at the top of your Squarespace website. I use it occasionally because it works for when I want to bring attention to certain topics, but it always feels a little cluttered to me.

The cookie notice, however, is no longer optional. Well, actually, that is not entirely true. If you don't have any visitors from the EU then you don't need to show it. Or if your cookie notice has coding that only shows it to EU visitors then at least non-EU people will not have to see it. Wish Squarespace could do that! If you want to look at an option like that check out this website. Their advanced solution can make a source country distinction but this requires Java coding and at this point I am not interested in adding more plug-ins to my site so I stick with what Squarespace gives me for now.

To add insult to injury, the Squarespace cookie notice is kinda ugly. So not aligned with their usual sense of style. Squarespace are still working on a lot of GDPR related stuff and maybe that includes more styling options for the cookie banner, like the marketing pop-up for instance.

In the meantime I took matters into my own hand and wanted to share what I did with regards to the Cookie Banner.


Turn on the Cookie Banner

 
 Squarespace Cookie Banner Settings・Kerstin Martin Squarespace Studio
 
  1. Go to > Settings > Cookies & Visitor Data and enable the cookie banner.
  2. Check Disable Squarespace Analytics Cookies.
  3. Keep Always unchecked unless you want to disable Squarespace Cookies for everyone regardless of their consent.
  4. 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. 
  5. Add your Cookie Notice message into the text field. Make sure you include a link to your Privacy or Cookie Policy. Fellow designer Kerstin Begley spoke with James at Disclaimer Template and he recommended to copy the Cookies part of the Privacy Policy and paste it into its own page on your website and link to that.
  6. If someone clicks on Continue on the Cookie Notice they won't see the notice again for 30 days. Click here to learn more about the cookie banner in Squarespace.

Generally be prepared for your Analytics Data to be less accurate from now on. 


Style the Cookie Banner

I placed the following code into my Custom CSS section, simply adjust some of the style settings, like the color and fonts, in accordance with your own branding. I also changed the position of the cookie banner to be in the bottom left corner and made its position fixed. Additionally I made it smaller and put it at the top of the screen in mobile view (because it was obstructing the links on my Instagram link tree page).

Please note: This code does not work for cover pages as they 'live' in a separate environment. In this case you have to add it to the page header code injection, using the <style> tag. I only have one cover page for my course logins and I decided to disable the cookie banner because even if someone clicks on Continue they will get another cookie banner as soon as they have logged in and 're-entered' my main website.

// Cookie Notice
.cookie-notice {
  background: hsla(43, 9%, 94%, 0.98) !important;
  border: 1px solid #ddd !important;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  color: hsl(0, 1%, 45%) !important;
  width: 250px;
  font-family: Aktiv-Grotesk !important;
  font-size: 85% !important;
  letter-spacing: 0.03em;
  line-height: 1.6em;
  position: fixed !important;
  top: auto !important;
  bottom: 30px !important;
  left: 30px !important;
  right: auto !important;
  padding: 30px !important;
}
.cookie-notice a {
  color: hsl(0, 1%, 45%);
}
.cookie-notice .accept {
  width: 100%;
  padding: 10px !important;
  background: #e6b40f;
  color: #fff;
  font-family: proxima-nova;
  text-transform: uppercase;
  font-size: 90%;
  letter-spacing: 0.1em;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-top: 0 !important;
  border-top-style: none !important;
  border-right-style: none !important;
  border-bottom-style: none !important;
  border-left-style: none !important;
  border: 1px solid #fff !important;
}
@media only screen and (max-width: 640px) {
  .cookie-notice {
  width: 150px;
  font-size: 70% !important;
  top: 10px !important;
  bottom: auto !important;
  left: 10px !important;
  right: auto !important;
  padding: 10px !important;
}
}

Want to change the text on the cookie banner button?

Inject this code into your website header > Settings > Advanced > Code Injection and then replace 'X' with whatever wording you prefer. 

<script type="text/javascript">
 Static.EU_COOKIE_BUTTON_LABEL = 'X';
</script>

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 

Learn from an experienced & successful web designer how to make a great living designing Squarespace websites!

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