How to Style Your Squarespace Cookie Banner
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.
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”.
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.
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.
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.
If you don't want a border at the top of the banner, you can combine the above text into the version below:
And if you don't want a hover effect, don't include the last bit of code:
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.