How to customize your Squarespace cookie banner design
The advent of GDPR ushered in an era of increased online data transparency. It underscores the crucial need to transparently communicate the use of cookies for tracking website visitors. Whether you gather website usage data through Google Analytics, Squarespace Analytics, Quantcast, or any other service, a clear cookie usage disclosure is essential.
Fortunately, Squarespace provides a straightforward solution by allowing you to seamlessly integrate a subtle cookie banner into your website. In this tutorial, I'll guide you on customizing the Squarespace cookie banner to align perfectly with your brand aesthetics.
How To Activating the Squarespace Cookie Banner
To activate the cookie banner, access your Squarespace account, navigate to the site panel, and select Settings > Cookies & Visitor Data. Tick the box that says "Enable Cookie Banner."
Personalize your cookie banner message in the provided text box. Enhance it with emojis, bold or italic formatting, and incorporate a link to your privacy policy if desired.
Next, decide on the banner style you prefer. Opt for a full-width bar or a discreet popup in the corner of your website. Personally, I lean towards the less intrusive corner popup. Specify whether you want the banner at the top or bottom of your site and choose the corner for the popup.
For this tutorial's purpose, keep the cookie banner theme as "dark." We'll be delving into customizing the color scheme using CSS.
Customizing the Squarespace Cookie Banner
Begin by adjusting the backdrop color - this is typically your first customization. If desired, incorporate a border. Navigate to Design > Custom CSS and insert the code below:
CSS:
.sqs-cookie-banner-v2.DARK {
background-color: #000000;
border: 2px solid #000000;
}
Replace #000000 with your preferred hex code. Modify the border's width and style or omit the line for a border-free look.
For text color alteration, employ this code snippet:
CSS:
.sqs-cookie-banner-v2.DARK p {
color: #000000;
}
If you wish to change link color within the text, utilize:
CSS:
.sqs-cookie-banner-v2.DARK a {
color: #000000;
}
To add a hover effect to the link, use:
CSS:
.sqs-cookie-banner-v2.DARK a:hover {
color: #000000;
}
Finally, adjust the color of the 'X' in the corner with this code:
CSS:
.sqs-cookie-banner-v2.ICON .sqs-cookie-banner-v2-accept {
color: #000000;
}
