How to Customize your Squarespace Cookie Banner

 How to Customize your Squarespace Cookie Banner・Kerstin Martin Squarespace Studio
Update August 14, 2018: Squarespace announced that there will be further changes to the cookie banner which will likely interfere with the styling below. I will update this page as and when this happens. 

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.

Squarespace made some changes to their cookie banner code in August 2018 and my previously published CSS does not work anymore. Below is my updated code!

Turn on the Cookie Banner

  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.
  6. If someone clicks on Continue on the Cookie Notice they won't see the notice again for 30 days.
  7. Generally be prepared for your Analytics Data to be less accurate from now on. 
  8. How Squarespace uses cookies.
 Squarespace Cookie Banner Settings・Kerstin Martin Squarespace Studio

Style the Cookie Banner

 Cookie banner before styling it.

 Customize your Squarespace Cookie Banner・Kerstin Martin Squarespace Studio

Full width banner at bottom

I decided to change my previous look as I actually like the full-width of the new banner. But I  changed the position of the cookie banner to be at the bottom of the page rather than the default top position as I did not like how that covered the navigation bar. Other changes include background colors, font settings and centering the content. Simply copy and paste the code into your Custom CSS section and adjust the style settings, like the color and fonts, in accordance with your own branding.

// Cookie Banner
.cookie-notice {
  background: #139fae !important;
  border-top: 2px solid #fff;
  font-family: aktiv-grotesk;
  font-size: 100% !important;
  font-weight: 300 !important;
  line-height: 1.6em !important;
  letter-spacing: 0.05em !important;
  justify-content: center !important;
  align-items: center !important;
  position: fixed !important;
  top: auto !important;
  bottom: 0px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.cookie-notice a {
  color: #fff;
}
#sqsp-cookie-banner-accept {
  background: #e6b40f !important;
  font-family: museo-sans-rounded;
  font-size: 90%;
  font-weight: 300;
  line-height: 1.6em;
  letter-spacing: 0.2em;
  border-radius: 5px;
}
// Cookie Banner on Tablets
@media only screen and (min-width: 641px) and (max-width: 780px) {
  .cookie-notice {
    font-size: 80% !important;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
// Cookie Banner on Phones
@media only screen and (max-width: 640px) {
  .cookie-notice {
    font-size: 85% !important;
    padding: 30px !important;
    font-size: 75%;
    text-align: center;
  }
  #sqsp-cookie-banner-accept {
    margin-top: 20px !important;
  }
}

 Squarespace Cookie Banner Customization
 

Banner Box in Bottom Left

// Cookie Notice
.cookie-notice {
  background: #139fae !important;
  border: 1px solid #fff !important;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  color: #fff !important;
  width: 350px !important;
  font-family: Aktiv-Grotesk !important;
  font-size: 90% !important;
  letter-spacing: 0.03em;
  line-height: 1.6em;
  top: auto !important;
  bottom: 30px !important;
  left: 30px !important;
  right: auto !important;
  padding: 40px !important;
  flex-direction: column !important;
  
}
.cookie-notice p {
  width: 100%;
}
.cookie-notice a {
  color: #fff;
}
.cookie-notice .accept {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 15px !important;
  background: #e6b40f !important;
  color: #fff;
  font-family: aktiv-grotesk !important;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 90%;
  letter-spacing: 0.1em;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-top: 20px !important;
  border: 1px solid #fff !important;
}
@media only screen and (max-width: 640px) {
  .cookie-notice {
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: 0px !important;
    border-radius: 0;
  }
}

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>

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>
.cookie-notice {
  display: none !important;
</style>

More Styling Options

I decided that I like the full-width banner at the bottom, however you may prefer to have a smaller box to the left or right, in this case head over to Heather Torvey's blog where she shares more CSS code for different banner styles.

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 good 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