How to Style Your Squarespace Cookie Banner

 
Blog post image for How to Style Your Cookie Banner in Squarespace by The Qurious Effect, Squarespace web designer
 
 

Over the past few months, since the GDPR went into effect, Squarespace has worked to enhance their cookie banner feature. It started out bare bones and a bit unlike the high quality design the platform is known for. Then they improved it and then they improved it again. As of September 06, 2018, we’ve got the latest (and hopefully last) iteration of the cookie banner.

Squarespace’s cookie banner feature has been greatly enhanced and now has multiple style options.


What are the new Squarespace Cookie Banner Style Options?

You can select to use a bar or a pop up style cookie banner. You can select from a light or dark theme as well as selecting between using a button, icon or text for the CTA. And you can determine the cookie banner’s placement. If you select pop up, you can have it appear in either the top left, top right, bottom left or bottom right. If you opt for the bar, you can select top or bottom.

Here’s a look at the new options for cookie banners. To check them out on your site, head to your site’s Settings > Cookies & Visitor Data.

 
 
Image showing Squarespace's native Cookie Banner options. By The Qurious Effect, Sqaurespace website design studio.
 

 

You will see four new fields:

  • Cookie Banner Type
  • Cookie Banner Position
  • Cookie Banner Theme
  • Cookie Banner CTA Type

 

If you select CTA Type: Text, you’ll get another dropdown menu where you can change the text from the default “OK” to something else like “CONTINUE”.

 

 
Image showing Squarespace's Cookie Banner CTA type options by The Qurious Effect | Squarespace web designer
 

 

If you select CTA Type: Button, the button style will default to the button style you designated in the style editor or any other CSS you’ve added to your site that may affect your buttons. You can also change the text here to be something other than the default.

 

 
Image of Squarespace Cookie Banner CTA Type Button | The Qurious Effect
 

 

Note: The new native style options will likely decrease the amount of CSS code needed to get the banner set up to your liking.
 


And while the new cookie bar style options will work for lots of Squarespace users, a lot of us want to style and customize our cookie banners to more closely resemble our site design and branding.


If you’d like to customize the style of your Squarespace cookie banner to more closely match your site design, read on!


What are the New Squarespace Cookie Banner HTML elements?

When Squarespace made changes to the Cookie Banner, the HTML element names changed. If you  previously made changes to the old elements, you’ll find they no longer work and that your site now has a new default cookie banner.

 

Here’s the cookie banner's new element name:

.sqs-cookie-banner-v2

 

When you’ve selected the light theme, the elements get the addition of LIGHT:

  • .sqs-cookie-banner-v2.LIGHT
  • .sqs-cookie-banner-v2.LIGHT p
  • .sqs-cookie-banner-v2.LIGHT a
  • .sqs-cookie-banner-v2.LIGHT button
  • .sqs-cookie-banner-v2.ICON

 

And when you’ve selected the dark theme, the elements get the addition of DARK:

  • .sqs-cookie-banner-v2.DARK
  • .sqs-cookie-banner-v2.DARK p
  • .sqs-cookie-banner-v2.DARK a
  • .sqs-cookie-banner-v2.DARK button
  • .sqs-cookie-banner-v2.DARK

 


How to style the Squarespace Cookie Banner with CSS

Here you’ll find code that works for both the pop up cookie banner and the bar pop up cookie banner.

 

Before adding any custom code, make sure you’ve got the cookie banner set up the way you’d like based on the available options in the Cookies & Visitor Data panel.

For example, if you’re going to use a pop up in the lower left corner with an icon, get the native Squarespace settings set up for that.

NOTE: I recommend selecting the light theme if you’re going to end up using a light color background and the dark theme if you’ll be using a dark background.

While testing the new HTML element .sqs-cookie-banner-v2, I’ve found that I did not have to specify the type of cookie banner (pop up or bar) within the element in order to have the changes apply to both versions. I could toggle between the two in the Cookie panel and have the code apply to either.

 
 
Image of the Squarespace Cookie Banner bottom right Pop Up banner option. Via The Qurious Effect.
 
Image of the Squarespace Cookie Banner bottom banner option with button CTA. Via The Qurious Effect.
 
Image of the Squarespace Cookie Banner bottom banner option with text CTA. Via The Qurious Effect.
 
Image of the Squarespace Cookie Banner bottom banner option with icon. Via The Qurious Effect.
 

 

For my own cookie banner, I used the bar, placed at the bottom and I decided to go with the icon for the CTA. What I wanted to change were the background color, font and font size. I also wanted to add a simple hover effect to the CTA X. Because I have full width images on my site, I also wanted a thin white border to separate the images from the cookie banner.

 

Here’s the code you can copy and paste into your CSS panel within the Design menu. Once placed into the panel, adjust the style settings to match your own branding and site design. Get creative or refer back to any previous code you may have used in a prior cookie banner version.

 
/* Cookie Notice */
div.cookie-notice {
  background: #edf4f8 !important;
  color: #000;
  border: 2px solid #fff;
  font-family: futura-pt;
  line-height: 1.6em;
  font-size: 90%;
  bottom: 0;
  top: auto
}

div.cookie-notice #sqsp-cookie-banner-accept {
  font-size: 90%;
  background-color: #000;
  border: none;
  padding: 15px;
  margin-top: 5px;
  width: 125px
}

div.cookie-notice #sqsp-cookie-banner-accept:hover {
  background-color: #fff;
  color: #000
}
 

If you don't want a border at the top of the banner, you can combine the above text into the version below:

/* Cookie Notice */
.sqs-cookie-banner-v2.LIGHT,.sqs-cookie-banner-v2 p  {
    background-color: #edf4f8 !important;
    color: #000;
    font-family: "brandon-grotesque" !important;  
    font-weight: 300;    
    line-height: 1.6em;
    font-size: 90%;}
    bottom: 0;
    top: auto
}

.sqs-cookie-banner-v2.ICON .sqs-cookie-banner-v2-accept:hover {
    color: #fff
}

And if you don't want a hover effect, don't include the last bit of code:

.sqs-cookie-banner-v2.ICON .sqs-cookie-banner-v2-accept:hover {
    color: #fff
}

And there you have it. You can check out Squarespace's new native options to style your cookie banner or you can grab the custom code needed to make it match your own branding and website design. 


DID YOU FIND THIS POST HELPFUL? PLEASE SHARE IT ON PINTEREST!

 
Looking for help customizing your Squarespace cookie banner after the September update? Want to style your cookie banner using the new options? Squarespace just updated their Cookie Banner. Read the post to learn about the new options and get the custom code to change your cookie banner. Via The Qurious Effect | Squarespace Web Design
 

 
Image for the book your free Squarespace web design consultation with The Qurious Effect.
 

ABOUT WORKING WITH ME?

Click the button below to sign up for your free 20 minute consultation – and we'll find out whether we're the perfect fit.

 
squarespacesharon newsom