How to customize Squarespace cookie banner

How to Customize Squarespace Cookie Banner [Copy+Paste]

Navigating the landscape of GDPR compliance can be challenging for small business owners, with adjustments required in various aspects of their online presence. One notable change involves implementing a cookie banner, and thanks to Squarespace, this process has become more accessible. In this tutorial, we’ll guide you through the steps to not only enable a cookie banner seamlessly but also to enhance its aesthetics to align with your brand. By the end of this guide, you’ll be able to customize Squarespace cookie banner effortlessly.

Log in to your Squarespace account and navigate to your site panel.

Navigate to Website Tools> “Settings” and then select “Cookies & Visitor Data. “Check the box that says “Enable Cookie Banner” to activate this feature on your website.

How to Customize Squarespace Cookie Banner [Copy+Paste]How to Customize Squarespace Cookie Banner [Copy+Paste]

In the provided text box, craft a personalized cookie banner message. You have the flexibility to include emojis, apply formatting such as bold or italic text, and even link to your privacy policy for additional transparency.

How to Customize Squarespace Cookie Banner [Copy+Paste]

Choosing Banner Type and Placement

  1. Banner Type Options: Select the banner type that suits your preference—either a full-width bar or a small popup in the corner of your website.
  2. Adjusting Placement: For the popup, decide whether it appears in the top or bottom corner of your website. Customize the appearance further by choosing the specific corner for the popup to display.
  3. Personalization Preferences: Tailor the cookie banner to your liking by opting for a less obtrusive corner popup. This choice ensures a user-friendly experience for your visitors.

Setting the Theme for Customization

Maintain the default “dark” theme for your cookie banner. This theme will serve as the foundation for further customization using CSS.

By following these straightforward steps, you can effortlessly enable and customize the Squarespace cookie banner to align with your branding and comply with GDPR.

Once you’ve enabled your Squarespace cookie banner, the next step is to customize its appearance to seamlessly integrate it with your website’s design. In this tutorial, we’ll walk you through the process of using Custom CSS to modify the background color, text color, link color, and even the close button (X) color on your cookie banner.

Customization Steps:

Changing Background Color and Adding a Border:

    • Navigate to Website Tools > Custom CSS.
    • Add the following code to change the background color and add a border:
      .sqs-cookie-banner-v2.DARK {
        background-color: #000000;
        border: 2px solid #000000;
  • Replace “000000” with your preferred hex code. Adjust border width, style, or delete the line for no border.

Modifying Text Color:

        • To change the color of the text, use the following code snippet:
          .sqs-cookie-banner-v2.DARK p {
            color: #000000;

Substitute “000000” with your desired text color.

Adjusting Link Color:

  • To change the color of a link within the text, employ the following code:
.sqs-cookie-banner-v2.DARK a {
  color: #000000;
  • Customize the color by replacing “000000” with your chosen link color.

Implementing Hover Effect for Links:

  • If you want the link to change color on hover, add the following code:
.sqs-cookie-banner-v2.DARK a:hover {
  color: #000000;
  • Adjust the hover color as needed.

Customizing Close Button (X) Color:

  • To change the color of the close button, use this code:
.sqs-cookie-banner-v2.ICON .sqs-cookie-banner-v2-accept {
  color: #000000;
  • Replace “000000” with your preferred color for the close button.

How to Customize Squarespace Cookie Banner [Copy+Paste]

By incorporating these Custom CSS snippets into your Squarespace website, you can effortlessly tailor the appearance of your cookie banner to match your branding. Feel free to experiment with different color codes and styles to create a visually appealing and cohesive design.

You May Like:

How to link social media accounts in Squarespace

How to Add Social Media Icons to Squarespace Website


In conclusion, this guide simplifies the process of implementing and customizing a GDPR-compliant cookie banner on Squarespace. By enabling the banner and using Custom CSS, you can effortlessly tailor its appearance to match your brand, ensuring both compliance and a visually cohesive user experience. Enhance your website’s aesthetics while adhering to data transparency regulations with these straightforward customization steps.

Does Squarespace track cookies?

Some of the non-essential cookies are built into your website. For example, Squarespace sites have a built-in analytics feature that uses cookies to track visitors. 
A cookie banner, also known as a cookie consent banner, is a pop-up or notification that appears on a website when a user visits it for the first time. It informs users about the use of cookies on the site and typically requests their consent for cookie usage.
 Yes, if your website uses cookies – both your own and from third parties – you need a cookie banner.

Why are they called cookies?

The term “cookie” was derived from an earlier programming term, “magic cookie,” which was a packet of data programs that kept data unchanged even after being sent and received several times.

Should I delete cookies?

The cache and cookies should be cleared regularly for several reasons. Depending on your settings, the cache can grow quite big, use a lot of disk space on your computer, and cause slow web browsing. The cache can also cause issues when viewing new versions of previously visited web pages.