How to Customize the Squarespace Cookie Banner

UPDATE (September 21, 2018): Squarespace made some changes to the Squarespace Cookie Banner Code (again). The following code has been updated to reflect these changes. If you have any issues with this code, please leave a comment and let me know so I can update it ASAP. Thank you.


 How to Customize the Squarespace Cookie Banner - with code snippets

Does your website use cookies?

If you run a newsletter, allow comments on your blog posts, or use analytics, you probably use cookies on your website.

 A beautiful display of a stack of cookies on a platter, tied with a bow.

ā€œCookies are small bits of text that are downloaded to your browser as you surf the web. Their purpose is to carry bits of useful information about your interaction with the website that sets them.ā€

ā€” Joanna Geary from The Guardian

For example, cookies can be used to:

  • provide information about which pages your readers visit the most

  • show relevant ads to your visitors

  • store information about what products your readers have put into a shopping cart

For more information about cookies and how they can be used on your website, check out allaboutcookies.org.

 

Cookies and Privacy Issues

Cookies are useful for making your readers’ experiences better, but there are privacy issues because they track your readers’ browsing preferences and history.

Current guidelines recommend that you be completely up front and transparent about whether or not you use cookies and why.

 

Disclaimer: I am not a lawyer and this is not legal advice. Please seek appropriate counsel for your website legal needs. This post seeks to only provide you with a way to customize a cookie banner if you choose to use one on your website.

 

Squarespace EU Cookie Banner

Squarespace offers a built-in EU Cookie Banner where you can let your visitors know about the use of cookies on your website.

This setting is found in Settings > Website > Advanced > EU Cookie Banner.

 Screenshot of the Cookie Banner settings found in Squarespace.

There, you can choose to use the default Cookie Banner message or write your own. You also have the option of turning off Squarespace Analytics until your reader accepts the website cookies.

For more information on the Squarespace Cookie Banner and alternatives (plus another way to style it), check out Kerstin Martin’s post How to Customize Your Squarespace Cookie Banner.

 


 

 The default cookie banner stops about half way across the page and has very basic styling. It looks weird and not pleasant.

Update (August 2, 2018): The default cookie banner got an update! You can keep the new default if you like, but personally, I’d make at least a couple of changes.

 


 

Cookie Banner CSS Snippets

Before we get started, I just want to warn you that this is a code-heavy post.

If you’re not as interested in the code and just want something that will work today (no judgment), feel free to skip to the end and copy and paste those snippets into your Custom CSS (Design > Custom CSS). 

But if you have a bit of time to learn how to customize this code to fit your own brand, let’s get started.

 

Simple Cookie Banner

 Screenshot of a simple, but pleasant-looking, cookie banner.

This code center aligns the text and button. Place it in Design > Custom CSS.

.sqs-cookie-banner-v2 {
    justify-content: center !important;
}

 

Customizing Your Cookie Banner

Now, if you’re happy with the basic look, you can stop right there. But if you want to customize the banner so that it fits with your branding, read on.

To make the Cookie Banner fit in better with your brand, I recommend collecting colors from the color palette you’re already using on your website. You’ll need the following colors:

  • a color for the banner background

  • a color for the text on your banner

  • a color for the button on your cookie banner

  • a color for the button text

Check your Squarespace settings under Design > Style Editor to see what colors your website is currently using.

Once you have that information, here is a snippet you can use to customize your Squarespace Cookie Banner. All you need to do is fill in the blanks.

 

Customized Cookie Banner Template

// Change the background banner color
.sqs-cookie-banner-v2 {
    background-color: ___________ !important;
}

// Change the banner text color
.sqs-cookie-banner-v2-text p {
    color: ___________ !important;
}

// Change the link text color
.sqs-cookie-banner-v2 a {
    color: ___________ !important;
}

// Change the link text color when you hover over it
.sqs-cookie-banner-v2 a:hover {
    color: ___________ !important;
}

// Change the button backgrond color, border color, and text color.
.sqs-cookie-banner-v2-accept {
    border: ___________ !important;
    background-color: ___________ !important;
    color: ___________ !important;
}

 

Examples

Personally, I understand concepts better with examples. So now, I’m going to show you the code Iā€™m using for my banner.

Look at the code sample below to see how to add your own branding to your cookie banner.

My Cookie Banner

 Example of this website's cookie banner. It shows up across the bottom of the page, and uses a similar color scheme to the rest of the website.

This is the version I use on my own page. This design uses:

  • black (#0F1A26) background color
  • white (#FFFFFF) text color
  • a white (#FFFFFF) button background color
  • black (#0F1A26) button text color
  • a cookie icon (learn how to add an icon)
// Change the background banner color
.sqs-cookie-banner-v2 {
    background-color: #0F1A26 !important;
}

// Change the banner text color
.sqs-cookie-banner-v2-text p {
    color: white !important;
}

// Change the link text color
.sqs-cookie-banner-v2 a {
    color: white !important;
}

// Change the link text color when you hover over it
.sqs-cookie-banner-v2 a:hover {
    color: #ff596a !important;
}

// Change the button backgrond color, border color, and text color.
.sqs-cookie-banner-v2-accept {
    border: white !important;
    background-color: white !important;
    color: #0F1A26 !important;
}

This is the design I chose for my website, but you’re going to want a version that fits your branding.

 

Squarespace Cover Pages

Unfortunately, Squarespace Cover Pages do not use the same CSS and JavaScript found across the rest of your site.

In order to make your Cookie Banner look better on Cover Pages, you will need to add your chosen code snippets to the “Page Header Code Injection” section found in the Advanced settings of every Cover Page.

You’ll need to also add <style> tags to make it work.

<style>
    Custom CSS Code Goes Here
</style>

 

Alternatively, if you want to hide the Cookie Banner on your Cover Page, paste the following code in each Cover Page’s Settings > Advanced > Page Header Code.

<style>
  .cookie-notice {
      display: none !important;
  }
</style>

 

A Customized Cookie Banner is a Happy Cookie Banner

There are a lot of ways to display cookie banners to stand out or blend in. These are just a few examples of the styles you can apply to make your cookie banner fit in with your brand.

Feel free to experiment and share your version with me! I’d love to see what you come up with.

If you run into any troubles with this code, leave a comment and let me know. I’ll be happy to help you out and then update my post to reflect any changes.

Comments (21)

Leave a Comment

Your email address will not be published. Required fields are marked *

  1. Hey there!

    Thanks so much for this much needed update! Quick question – What about a code for media queries – having some issues with text being a tad squished together on my mobile.

    Many thanks for your expertise. šŸ™‚

    1. Hmmmm. I’m not seeing an issue on my devices, so I’m gonna fly by the seat of my pants on this one to see if it helps you. Bear with me! šŸ˜€

      Let’s try making the font-sizes on mobile a bit smaller. Then, we’ll make the font-size on the button a bit larger for readability.

      @media screen and (max-width: 600px) {
      .cookie-notice {
      font-size: 10px !important;
      max-width: 24em;
      }

      .cookie-notice #sqsp-cookie-banner-text p {
      font-size: 14px !important;
      }

      .cookie-notice #sqsp-cookie-banner-accept {
      font-size: 16px;
      }

      }

      You’ll need to place this code in Design > Custom CSS. If this doesn’t address your issue, would you mind sending me a screenshot? You can email me at heather@heathertovey.com or paste a link here.

  2. Thank god you posted this update! I opened up my squarespace site today and thought what the heck happened to my customized cookie banner :o!! So there is no way of indicating somehow in the code portion of the cookie banner to NOT show up on any of the cover pages?

    1. Good question! I just checked the code to see if I could target it on cover pages only, and it looks like I can.

      Try adding:
      .sqs-slide-wrapper[data-slide-type="cover-page"] ~ .cookie-notice {
      display: none !important;
      }

      to your Custom CSS.

      Let me know if that doesn’t work, and I can check out your website specifically to see if I can make it work for you.

      1. Hey Heather!

        Okay I may be doing this slightly wrong, cause if it’s working for you then I’m copying and/or pasting it in the wrong areas.

        I copied the custom code for the ‘Basic Black Banner’ and pasted it into Design > Custom CSS and it shows up perfectly on my main website.

        Now when I go to my cover page do I click oh the gear icon > Advanced > Page Header Code and paste the black banner code and that code you just provided just now? For whatever reason it’s not working properly and I’m wondering if i am pasting it in the wrong spot? I’d appreciate your help.

        1. With the new code I just provided, you want to also put it in Design > Custom CSS right underneath the original Black Banner code. You don’t need to put anything on your Cover Page Page Header Code to hide the cover page cookie banners.

          1. Thanks for providing the image. I pretty much made sure that i followed the image closely and the instructions, unfortunately it didn’t work šŸ™

          2. Okay So I followed your instructions and pasted the code you provided underneath the black banner code within design>custom css and it appears that my cover pages still have the cookie banner on them. Here’s a copy of the code in terms of what it looks like:

            .cookie-notice {
            justify-content: center !important;
            padding: 10px !important;
            line-height: 1.2em;
            font-size: 13px !important;
            /* Banner Colors */
            background: black;
            color: white;

            }

            .cookie-notice #sqsp-cookie-banner-text {
            display:flex;
            align-items:center;
            }

            .cookie-notice br {
            display:none;
            }

            .cookie-notice #sqsp-cookie-banner-accept {
            margin-left: 10px;
            line-height: 1;
            display:inline-block;
            text-transform: uppercase;
            padding: 10px !important;
            font-weight: bold;
            border: none;
            /* Button Colors */
            background: white;
            color: black;
            }

            .sqs-slide-wrapper[data-slide-type="cover-page"] ~ .cookie-notice {
            display: none !important;
            }

          3. Nevermind! Whoops! I’m being completely silly (I blame that I’m tired). Cover pages don’t use the same CSS that the rest of your pages do, so you’ll need to put this:

            .cookie-notice {
            display: none !important;
            }

            on each Cover Page > Advanced > Page Header Code.

            Apologies! I always forgot that even though I wrote about this issue on the original post. šŸ˜›

  3. Love the customisation, I’m hoping you get help with one area. When using the white banner the link for policy shows in the banner text. However when I use the black banner which is my preference, the text for the policy link is also in black which means a visitor cannot see this. How can I adjust this so the link to my policy can be seen in the black banner? Thank you

    1. Hey there! It sounds like you have some other CSS on your page that changes the color of links in general. To override that for just the cookie banner, you would use:

      .cookie-notice a {
      color: #FFFFFF;
      }

    1. You’re very welcome! I’ll very likely be providing another blog post with more design styles for the cookie banner in the near future. If you have any design preferences that aren’t covered here, let me know.

        1. Hey Heather,

          Thanks for this! The issue is that it should be placed in the "Footer" but in the tutorial you say to place it in the "Header" šŸ™‚