How to Customize Your Squarespace Cookie Banner?
Squarespace's default cookie banner is very basic and offers only two color options: light or dark. In this blog post, you'll learn how to better match the cookie banner to your website's colors.
But first things first:
Different Types of Cookies
Your website (or, more specifically, Squarespace) places cookies on your website visitors’ computers, tablets, or phones. There are different types of cookies; for some, you do not need your website visitors’ consent to place them (functional cookies), but for others, you do (analytical cookies).
If you're interested in visitor statistics and Squarespace analytics, you'll need to allow analytical cookies to be set. These are enabled by default in Squarespace. You can disable them by going to Settings > Cookies & Visitor Data > Disable Squarespace Analytics Cookies.
If you've also linked Google Analytics to your site, you're definitely collecting analytical cookies, so you must have your cookie banner enabled.
If you only use functional cookies, then you don't need a cookie banner.
According to the GDPR, you must give website visitors the option to accept or reject cookies. You can therefore include two buttons in the cookie banner: "Accept" and "Reject." In Squarespace settings, this is called " Opt-in & Out."
Cookie Policy
Include a link to your cookie policy in the text of your cookie banner. Place this policy on a page in the "Not Linked" section of your site. On the SEO tab of your cookie policy page, set it to be hidden from search engines.
For your cookie banner, you can choose between a full-width bar or a smaller “block” in one of the corners of your site. It can be dark or light. The default setting is the dark theme (Dark).
Furthermore, you can't customize this cookie banner in the Squarespace settings (i.e., change the color, font, or button, etc.). This can only be done with CSS. All the code is listed below.
CSS for the cookie banner
You can add CSS via Design > CSS.
You can, of course, change the colors and fonts yourself. Use the appropriate hex code for the colors.
/* Lijntje om cookiebanner*/
.sqs-cookie-banner-v2 {
border: 1px solid red;
}
/* Lettertype en kleur bannertekst */
.sqs-cookie-banner-v2 p {
font-family: 'Raleway';
color: blue!important;
}
/* Lettertype en kleur button */
.sqs-cookie-banner-v2 button {
font-family: ‘Raleway’;
color: blue!important;
border-color: red!important;
border-radius: 20px;
}
/* Kleur van link in bannertekst */
.sqs-cookie-banner-v2 p a {
color: green!important;
}
/* Achtergrond kleur banner */
.sqs-cookie-banner-v2.DARK {
background-color: white;
}
Hide the cookie banner on one page
For example, do you want to hide the cookie banner on your Instagram page (link in bio)?
If so, add this code to the "Code Header Page Injection" section of the relevant page:
<style>
.sqs-cookie-banner-v2 {
display: none !important;
}
</style>
Disclaimer: I am not a lawyer. For the most up-to-date information, consult a lawyer who deals with these matters on a daily basis.
