Blur the page until the customer gives consent

In order to blur out the page until the customer gives his consent, please paste the following CSS code in Design > Custom CSS:

.cc-window {
    width: 100%!important;
    -ms-flex-direction: row!important;
    flex-direction: row!important;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center!important;
    padding: 0 25%!important;
    border-radius: 5px;
    background-color: rgba(0,0,0,.6)!important;
}
.cc-window .cc-btn.cc-allow {
    min-width: 100px;
}
.cc-window.cc-close-icon .cookieconsent-wrapper, .cc-window.cc-close-icon .cookieconsent-wrapper {
    position: relative;
}
.cookieconsent-wrapper {
    background: black; /\* SET CONSENT BAR BACKGROUND COLOR HERE \*/
    border-radius: 5px;
    margin-right: 0px!important;
    padding: 20px 35px 20px 20px;
}
/\* tablet, landscape iPad, lo-res laptops ands desktops \*/ 
@media (max-width: 875px) {
div.cc-window {
    padding: 5%!important;
 }
}
 /\* smartphones, Android phones, landscape iPhone \*/
@media (max-width: 400px) {
div.cc-window.cc-default .cc-compliance {
    flex-direction: column;
}
div.cc-window.cc-default .cc-compliance button {
    width: 100%;
    margin-bottom: 0.5em;
    margin-left: 0;
 }
}

Here is a preview of how it would look like:



Important: Make sure that in the Design tab > Position you have to select "Bottom" or "Top" in order for the script to apply correctly!

If you want the Cookie bar to be showing on the bottom or on top of the website when the content is blurred out, you can use the codes in the text files below.

Bottom of the page: - Download

Top of the page: - Download

Note: This codes applies only to the Default layout. If you use any of the other layouts you can blur the content by editing the position to "Center Blocked Content" in the Design tab > Position section.


If you are running any of our paid plans, you can refer to the automated option for blurring the store before consent, mentioned here:

Blur Page Before Cookie Bar Consent?

In need of assistance with this, you can always reach out to our support team at support@consentmo.com or clicking on the "Chat" button on the bottom right of the page, so they can help with the process.

Updated on: 15/10/2024