How to position the Cookie Consent Bar in the middle of the screen?

Brand identity has a major role in the world of the Shopify merchant. That is why, we focus our efforts on providing better customization options for the  GDPR/CCPA + Cookie Management app and help keep your store on point with the latest trends.

One of the most frequently asked questions we receive these days is whether there is an option for positioning the Cookie Consent Bar in the middle of the screen. The answer is YES, and in this blog post, we will show you how quickly and easily you can do that on your own. 

Position is important

The first thing you should do is select the right position of the Cookie Bar. That way, the script that you will apply afterward will work correctly.

1. Navigate to the Design Settings tab
2. Click on Position and choose Top or Bottom option

        3. Up next is the CSS code that will help you with positioning the Consent Bar. You need to copy the CSS code below and paste it into the Custom CSS field.

.cc-window.cc-banner { background-color: rgba(0, 0, 0, 0.6)!important; }

.cc-window {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0) !important;
top: 50% !important;
padding: 0px 25% !important;
left: 50% !important;
transform: translate(-50%, -50%);
}

#cookieconsent\:desc { text-align: center; }

#cookieconsent\:settings, div.cc-window { overflow: auto; }

.cookieconsent-wrapper {
background: black; /* SET CONSENT BAR BACKGROUND COLOR HERE */
padding: 20px;
border-radius: 5px;
}

.cc-banner>.cookieconsent-wrapper {
flex-wrap: wrap;
justify-content: space-around;
}

.cc-compliance {
flex-wrap: wrap;
}

@media ( max-width: 875px ) {
div > button.cc-btn.cc-allow {
margin-top: 0.5em;
}
}

@media (max-width: 875px) {
div.cc-window {
width: 90%;
padding: 0px !important;
}

          4. Click the Save button when you are done with the changes

Navigate to your storefront in order to preview the final result

This is how the applied changes look like:

Different styles of the Cookie Bar

After you finish with the positioning, you can customize the Cookie Bar in a way to completely match your brand.

Let's try changing the background color.

1. Locate the background: black; line of the code
2. Set the color that you would like to use. Here is how we changed it: 

Default CSS code

We chose this color #1C764A

Make sure to Save the changes and go to your storefront in order to check the result.

Here is how the changed background of the Consent Bar looks like:

You are able to remove the blurring of the background as well. For this purpose you should delete the first line of the CSS code

 .cc-window.cc-banner { background-color: rgba(0, 0, 0, 0.6)!important; }

and then Save the changes again.

Here is a preview of how the Cookie Consent Bar will look like without the blurred background:

If you want to add a Close button to your Cookie Consent Bar, follow these steps:

1. Navigate to the Cookie Consent Bar tab
2. Scroll down to the Close Button section and select Show 

This is how the Consent Bar looks like with Close button:

Note: We recommend changing the background color of the Cookie Consent Bar only from the Custom CSS field. The other elements like Text Color, Button Color, Font Family can be customized from the selectors in the Design Settings tab.

To facilitate your work with the app, we have created a video tutorial showing the whole process step-by-step:

And that is all for the positioning of the Cookie Consent Bar. 

Stay tuned! Some great articles are coming up.

What other topics you are interested in?  Feel free to share your ideas in the comments below.