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.

Enabling the Squarespace Cookie Banner:

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.

Customizing Your Cookie Banner Message

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.

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.

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

Conclusion:

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.

FAQs-Customize Squarespace Cookie Banner