How to Add & Style the Squarespace Cookie Banner
Mmmm cookies.
Delicious chocolate chip or white chocolate macadamia…oh wait, we’re not talking about that kind of cookie.
We’re talking about internet cookies.
These cookies are small pieces of data sent by websites to your browser. They can let an ecommerce website remember what is in your shopping basket, let your browser remember your login information for a website or track the number of visitors on a website.
Cookies can also be used by the advertising industry to personalize ads for you (something I personally don’t really like).
Privacy concerns about these cookies, what information they were gathering and how they were being used, led to the European General Data Protection Regulation or GDPR. This regulation and others that followed meant that you would have to accept those cookies before they could be used.
And that’s why you see so many cookie banners.
How Do I Add a Cookie Banner to My Squarespace Website?
To turn on the cookie banner in both Squarespace 7.0 and 7.1:
From the Main Menu click the cog icon (Settings) > Website
Click Cookies and Data Privacy
Toggle Cookie Banner to the on position (green)
In the Cookies and Data Privacy settings you can now choose which buttons you would like. By default the banner displays the Accept Button. You can also choose to display the Decline Button and/or the Manage Button. The Manage button brings up a lightbox where the visitor can choose which cookies they will allow.
You can also change the default disclaimer text as well as the button labels.
*If you are using Squarespace 7.0 you will also see a few styling options. More on those in the next section.
Change Preferences
If you’ve added a Manage Button or a Decline Button to your cookie banner you can give your website visitors the option of changing their cookie preferences at any time.
Under Saved Preferences you can choose to display a small button or banner that visitors can click to bring up the Manage Cookies lightbox or you can hide this item from your visitors.
How to Style the Squarespace Cookie Banner
When I started on Squarespace, the cookie banner was a grey box in the bottom left corner of your website. That was it, your only option. If you wanted to style it in any way you had to use CSS code.
Now you have a few more built in options for styling the cookie banner in Squarespace 7.0 and even more in Squarespace 7.1.
Style the Squarespace 7.0 Cookie Banner
You can style your Squarespace 7.0 Cookie banner right from the Cookies and Data Privacy settings (Settings > Website > Cookies and Data Privacy).
From here you can choose the position of your cookie banner (top, bottom, top right, top left, bottom right or bottom left). You can also choose whether you want the light or the dark version of the banner.
Style the Squarespace 7.1 Cookie Banner
Styling for your cookie banner in Squarespace 7.1 is done through Site Styles.
1. From the Main Menu click Styles (under Websites) or click the paintbrush icon in the top right corner of your page
2. Click Accessories, then click Cookie Banner
Now you can choose which colour theme the banner will use, the position of your cookie banner (top, bottom, top right, top left, bottom right or bottom left) and the size of the your disclaimer text.
Each button can have a different colour on your banner. The Accept Button has the colour and style of your primary button. Decline has the colour and style of the secondary button and Manage has the styles of the tertiary button.
You can edit the button styles by clicking on Styles > Buttons.
You can also change the colour of the buttons, text or background of your cookie banner.
Click Styles > Colors
Choose the theme you chose for the cookie banner
Choose a new colour for the buttons, text or background
*Just remember, any change you make to the items in that theme will show anywhere you have used the theme. So you may want to choose a theme you don’t use often in your site.
You can still make your cookie banner even more personalized using custom code, but now you don’t have to!
Enjoy your delicious cookies, um, cookie banner!
