How to I add a dark overlay to the shopify cookie banner

[michelle012]

how to I add a dark overlay to the shopify cookie banner?

when you continue to cookie preference the overlay is already implanted. I would like to also have that at the cookie banner itself when it first pop ups.

mysite: inchdealer.com

current cookie banner- no overlay

cookie preference with overlay already there.

[Moeed]

Hey @michelle012

I don’t see any cookie popup on your website, do you have it disabled or anything? If yes, then I would need you to enable it so I can provide you a quick solution.

Best,
Moeed

[michelle012]

Thanks for responding. its now visible

[tim_tairli]

You should be able to achieve this by adding a “Custom liquid”/“Custom code” section to your “Footer group” and pasting this code:

<style>
/* no scroll unless accepted -- begin */
body:has(#shopify-pc__banner[style*="block"]) {
  overflow: hidden; 
}
/* no scroll unless accepted -- end */

body:has(#shopify-pc__banner[style*="block"]):after {
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:10;
}
</style>

If you’d rather edit your assets/theme.css, then you can paste it at the very bottom as well, just skip the <style> and </style> lines.

[AnneLuo]

Hi, @michelle012
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
body:has(#shopify-pc__banner[style*="block"]):after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
</style>

Results:

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!

[Steve_TopNewYork]

Hi @michelle012,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

body:has(#shopify-pc__banner[style*="block"]):after {
    content: "'";
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
}

Thanks

[michelle012]

thankyou for your responds, This solution works only it does not cover the header when scrolling. Also on mobile the overlay isn’t fully covering the page. I hope you can help me out solving this issue.

[michelle012]

thankyou for your solution, This solution works only it does not cover the header when scrolling. Also on mobile the overlay isn’t fully covering the page. I hope you can help me out solving this issue.

[tim_tairli]

Looks like you’re on the way to sort this out – I guess upping the z-index was necessary (to about 10000).
Do not get used to !important everything – this is a bad habit and make it difficult to add further changes.

This part in my code was to prevent scrolling until cookie banner is closed – I do not see it on your site.
I doubt someone would want to scroll with the cookie banner fixed on top…

/* no scroll unless accepted -- begin */
body:has(#shopify-pc__banner[style*="block"]) {
  overflow: hidden; 
}

[michelle012]

unfortunately upping the z-index didnt solve the problem. The header still overlays when scrolling down. also the page is still not fully covered in mobile.

I did leave the part of the code that prevent scrolling down out, I do wanna be able to scroll.

[tim_tairli]

@tim_tairli

upping the z-index was necessary (to about 10000).

I see it is 99 right now, which is not enough for mobile.

As for scrolling – the cookie banner is fixed in the middle of the screen, the site is covered with dark overlay and unable to interact – what’s the use of scrolling?

When the banner is closed, then scroll will be back.

[AnneLuo]

Hi, @michelle012
So can you give me the access? I`ll check it and add the feature for you.