How to Customize the Squarespace Cookie Banner (Updated)

Updated September 5th for the new, new Squarespace cookie banner:

I often count myself lucky that I’ve chosen a forward thinking platform like Squarespace to build my business around. 

They’ve always been mindful of the importance of SEO; they were forward thinking with respect to responsive, mobile-friendly design and they were totally on the ball about new GDPR regulations. They made it easy for us website solopreneures to implement that annoying (but necessary) cookie banner on our own websites.

I’ve only just turned it on on my own website, but was shocked to see this:

😳...this hasty gray dump of a cookie banner that doesn’t appear to follow any of Squarespace’s other UI cues—thoughtlessly crammed up in the top left corner of my carefully designed website. 

My first thought was, “are you freakin' kidding me with this thing? Then, realizing that Squarespace is probably busy with more important stuff, I quickly moved to the design panel to mess around with the CSS for nearly an hour to make it presentable.

As of August 2nd, Squarespace updated their own CSS to change the cookie banner to this:

---

The New Banner

Admittedly, the first update was a huge improvement over the original design-wise, but it spanned the whole width of the page, anchored to the top and completely covering up your branding and navigation!

It's totally bananas that Squarespace's "world class designers" would allow this to happen, but anyway—they later updated it again to this new design and added some options that allow you to choose the placement and style, a HUGE improvement to say the least.

If the options Squarespace provides don’t match the style of your site, a small amount of additional CSS can help you customize it.

First, turn on the cookie banner

1. Navigate to Settings > Cookies & Visitor Data and check "Enable cookie banner."

2. Check "Disable Squarespace Analytics Cookies" to comply with the GDPR regulations. This will turn off analytic cookies unless the user clicks on the pop-up button to provide consent.

3. Keep "Always" unchecked (if you want to). If you check Always, you'll disable Squarespace Cookies for everyone, well—always, which will mess up your website analytics. At this stage in my business, I'm choosing to chance this one. If it becomes a problem in the future, I can always turn it on. You can decide what you want to do here. My personal thoughts on this is that there is a lot of noise about GDPR right now, but that it'll do little to change the thought processes around privacy with respect to traffic analytics and tracking in the long run.

4. Add a cookie message into the text box. I chose to keep mine light-hearted and fun. One of the core principals behind the new regulations is to cut down on the 'legalese' in privacy policies to make them easier to understand. As long as there's a link to your privacy policy (which you should definitely get you don't have one), you should be covered.

You can read more about the Squarespace cookie banner here.

Customize the Cookie Banner

In the service of saving my fellow Squaremates some time and frustration, here’s a bit of code marked up with comments to guide you through the customization process. 

This CSS will give the banner a more polished look. I’ve chosen the pop-up style. This particular code makes it look like this:

The Code:

.sqs-cookie-banner-v2 {
  background-color: #FFF !important;
  /* this line controls the weight and colour of the border */
  border: 1px solid #6C7A89 !important;
  /* edit these values to add rounded corners */
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2 button {
  /* edit these values to style the font */
  font-family: 'Montserrat', Helvetica, Sans-serif;
  font-size: 13px;
  color: #6C7A89 !important
}

/* this section chages link text colour, 
you can delete this section if you dont need it */
.sqs-cookie-banner-v2 a {
  color: #013243 !important
}

/* this section styles the accept button */
.sqs-cookie-banner-v2-accept {
  border: 1px solid #6C7A89 !important;
  /* this bit adds a nice fade effect on hover */
  -webkit-transition: 0.35s background-color linear, 0.35s color linear;
  -moz-transition: 0.35s background-color linear, 0.35s color linear;
  -o-transition: 0.35s background-color linear, 0.35s color linear;
  transition: 0.35s background-color linear, 0.35s color linear
}

/* determines button hover background & text color */
.sqs-cookie-banner-v2-accept:hover {
  background-color: #6C7A89;
  color: #FFF !important
}

Prefer a simpler look?

If you like the look of the bar style, this same code will work for that style too and make it look like this. Mine would look like this in the bar style:

Play around with the code to match your style. If you mess it up, just come back and copy it again. Happy coding! Share this post if you found it helpful.

---

---

Related Articles: