How to Customize Your Cookie Banner in Squarespace

 

If you’ve been apart of the online business world for a while now, I’m sure you have heard about the importance to following GDPR in your business.

But in case you haven’t heard, last year the EU set new regulations to protect the privacy of EU residents and anyone with a business online needs to follow these rules. To learn more about what GDPR is you can read this article posted on Forbes.
When using Squarespace’s cookie banner on your website it isn’t exactly pretty. But you know the importance of following GDPR on your blog and understand that a cookie banner is crucial. Learn how to customize your website’s cookie banner in Squarespace with these easy to follow instructions with copy and paste code included! #squarespace #blogging #blogdesign #websitecookiebanner

Because of this it is important to have your Privacy Policy updated with these new regulations. And then you need to use a cookie banner on your website to let anyone who visits your website know that you collect cookies and to read your Privacy Policy for more information.

Luckily, like everything else, Squarespace makes this super easy to set up.

The downside is that it isn’t very pretty looking or branded. It’s just so generic and well ugly.

Thankfully, you can enter in a little bit of CSS and it will fit in with your website and brand!

If you don’t know how to use CSS, don’t worry! I will be providing you with code snippets that you can copy and paste!

Here are the simple steps you can follow:



1. Enable Your Cookie Banner

Before we can customize anything, we first need to actually enable your cookie banner on your website.

To do this you’ll start at your Squarespace dashboard, go to Settings -> Cookie and Visitor Data and click the little white circle next to Enable Cookie Banner.

 
Enable your Squarespace cookie banner
 

Then you can customize the text that shows up or use the default text that is already there. But either way you will want to add a link to your Privacy Policy so visitors can easily read more about how you use cookies.



2. Customize Your Cookie Banner Using Squarespace’s Settings

When you scroll down past the cookie banner text box you will see that there are some built-in customization features available for you to choose from.

While changing the settings you will be able to see the changes happen live so you can immediately know if that’s the setting you want or not. I recommend playing around with the options to see what you like best.

You can select if you want to have a cookie bar or pop-up. The bar will create a full-width banner and the pop-up will create a floating box in one of the corners.

 
Squarespace Tip - select the cookie banner type, bar or pop-up
 

Next, you can select the position of your cookie bar or pop-up. For the bar it can either be positioned at the top or bottom of the screen. And the pop-up can be in the top left, top right, bottom left, or bottom right corner.

 
Squarespace tip - select the position of your cookie banner
 

Then you can choose if you want a dark or light theme. The dark theme will be white text on a black background and the light theme will be black text on a light grey background.

 
Squarespace tip - choose which cookie banner theme you want to use
 

Finally, you will select one of the three Cookie Banner CTA Types. Again, each time you select one you will be able to see the changes happen immediately so you can tell if it’s the option that you want.

 
Squarespace tip - select which type of CTA you want for your banner
 

Text you can choose the text that shows up to close out of the cookie banner. Button will show up as a rectangular button, again with the text of your choice. And icon will show up as an “x” to close out of the banner.



3. Customize With CSS

You can just copy and paste this code into your CSS of your website. To do this from your Squarespace dashboard go to Design -> Custom CSS then paste this code in the text box there.

/*To change the background and drop shadow of Cookie Banner*/
.sqs-cookie-banner-v2 {
   background: #ebebeb; !important;
   box-shadow: 0px -2px 8px rgba(0,0,0,0.1);
}

/*To style the text*/
.sqs-cookie-banner-v2 p, 
.sqs-cookie-banner-v2 button {
   color: #ffffff; !important;
   font-size: 14px; !important;
   font-family: sans-serif; !important;
   font-style: normal;
   font-weight: 400px;
}

/*To style any links inside the text of the banner*/
.sqs-cookie-banner-v2-text p a {
   color: #ffffff; !important;
   border-bottom: 2px solid;
}

You can play around and make some changes so that it matches your brand. Here are some recommendations of things to change:

In the first section you will probably want to change the background color to one of your brand colors. Hopefully you know the hex-code of your brand colors so you always get the same exact color every time. Enter one of your colors here and see which one you like best with your website.

In the second section you will want to change the text to match your brand as well. You can change the font family to serif if that fits your brand better, or type in the exact name of your chosen font.

You can play around with the font weight by entering different numbers like 300 or 600.

Just be careful not to change too much if don’t know how code. You can easily “break” the code and it won’t work. Squarespace will usually tell you if something doesn’t work. There will be a little error message in the bottom right corner of the code text box.

And that’s it! Now you have enabled the cookie banner on your website and customized it to match your brand using a little CSS!

High five to you!



Do you want to see this step by step in action? Click to watch the video tutorial:



If you found this article to be helpful, be sure to share it with your friends!


 
profile-photo.png

I am Amanda and I am the wearer of all hats at Blondepreneur. This blog is here to help creative online entrepreneurs, like you, design and grow the successful business of your dreams. You can find blogging and business tips on the blog.