How to customize the cookie banner?

Hi everyone,

I am fighting with my cookies banner.. would need some help if anyone available.

1 - To give more context, as there is no editable cookie banner in my template I had to inject some code.

Here is the code I injected within the footer (coming from another question on the forum):

For some reason, the banner doesn't remain at the bottom when I scroll down the site.It goes up as I scroll down.... any idea why?

2 - Is there any way I could customize the size/typo of the text and the "call to action" which asks the customer to click on "Continue"?

3- Any chance I can change the color of the banner ?From grey'ish to white ideally (transparency too)

4- Finally the banner doesn't cover the full width of the screen (this happens on desktop only)I guess it is linked to the length of the text within the banner but I was wondering if there was any way to customize this too so it covers the width

Hopefully it makes sense...

Thanks a lot in advance!

ps: I cannot share my website as it's not live yet. Hopefully not a blocker.

Hi @Tal,

Could you send a Screenshot of what this cookie banner looks like on your site? Which Theme are you using and if possible, send over the code you are using to create this cookie banner?

Hi @Tal,

Could you send a Screenshot of what this cookie banner looks like on your site? Which Theme are you using and if possible, send over the code you are using to create this cookie banner?

I suggest you post a link to your site so that we can see the code working. A trial site address of something.squarespace.com is fine.

Hi @kenwestphal, sure!I'm using Clay template. For some reason, the code didn't go through with my previous message...

Hi @kenwestphal,cannot post 2 attachments at the same time for some reason..

Here is a screenshot of the site.

Hi @Paul2009 unfortunately it will redirect you to the same password page.I'm planning to release it this week. Hopefully the screenshots I've posted previously can help you understand the situation...

Thanks @Tal

I do see you are using the code from the Squarespace Help guide for the Cookie Banner - https://support.squarespace.com/hc/en-us/articles/206545727-Adding-a-cookie-banner

I'm not an expert in JavaScript and I didn't find much info searching, but you'd have to add CSS to the JavaScript code to be able to do the customizations you want. Hopefully someone who knows JavaScript will be able to provide the code that can be used for this.

For anyone interested, best article which solved everything for me! (@kenwestphal fyi ;-) )https://www.soundfocus.co.uk/squarespace/adding-an-eu-cookie-law-banner-for-implied-consent

@Tal

Awesome, thanks! Here I was searching for the wrong thing the entire time ... I was searching for adding CSS to JavaScript but wasn't finding anything useful.

Is anyone know how to make the cookie banner scroll down the whole page like how that happened in square page home page? When the page is full load the banner push the page down and when you click continue or the x the page goes up again. Does anyone know how to do the same to my website? www.harrysdim.com

Is anyone know how to make the cookie banner scroll down the whole page like how that happened in square page home page? When the page is full load the banner push the page down and when you click continue or the x the page goes up again. Does anyone know how to do the same to my website? www.harrysdim.com

I followed the example above (Sound Focus) and it works perfectly, however my site uses a cover page in front of the main site. The cookie bar still had the default Squarespace look. I injected the same code into the header of the cover page but had display issues. Does anyone know if there is some code that will hide the cookie bar from a cover page while leaving intact everywhere else on the site?

@danjc

You should be able to add this line of code to the Cover Page "advanced" section within the Page Header Code Injection area to hide the cookie banner from the Cover Page only

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

Thanks for your reply @kenwestphal, but this code didn't work for me. Does it need to be in between tags or anything?

@danjc

My apologies - Yes you would need to put the CSS code in between Style tags. I assumed you knew that and/or already had Style tags in place. Hopefully the below helps you.

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

That's worked perfectly. Many thanks for your help!