The Cookie bar is blocked by other widgets I have in the store. What can I do?
If you have any other services in the store that are using widgets in the storefront, there is a high chance that they may overlap with the Cookie bar, as shown in the example below:
In such cases, the easiest way to avoid or fix this is to change the positioning of each widget on the page so they all have their own space.
If repositioning is not an option, you would have to use the CSS code for changing the z-index of the Cookie bar in a way so it can go on top of all other widgets.
You can find this in our FAQ section:
The bar is overlapping with other widgets on my store. How to fix that?
However, from our experience, we have noticed that there are many widgets set from different apps used in the Shopify stores, that upon installation are coming with the highest possible z-index by default. In such cases, our secret weapon is again the Custom CSS section in the Consent banner tab > Design section of our app.
What you need to do is locate the selector for the widget that needs to go behind the Cookie bar. You can do that from the dev tools of the page, as shown below:
In this case, the CSS code that you need to use should look like this:
If it is still not working, you can reach out to our support team at support@consentmo.com for further assistance. They will be happy to check this for you.
In such cases, the easiest way to avoid or fix this is to change the positioning of each widget on the page so they all have their own space.
If repositioning is not an option, you would have to use the CSS code for changing the z-index of the Cookie bar in a way so it can go on top of all other widgets.
You can find this in our FAQ section:
The bar is overlapping with other widgets on my store. How to fix that?
However, from our experience, we have noticed that there are many widgets set from different apps used in the Shopify stores, that upon installation are coming with the highest possible z-index by default. In such cases, our secret weapon is again the Custom CSS section in the Consent banner tab > Design section of our app.
What you need to do is locate the selector for the widget that needs to go behind the Cookie bar. You can do that from the dev tools of the page, as shown below:
In this case, the CSS code that you need to use should look like this:
#example-selector (the one for the other widget) {
z-index: 2147483646 !important;
}
div.cc-window {
z-index: 2147483647;
}If it is still not working, you can reach out to our support team at support@consentmo.com for further assistance. They will be happy to check this for you.
Updated on: 24/11/2024
Thank you!