Shopify: v2 CMP invisible after direct implementation

What happens?

After direct implementation of the Usercentrics privacy banner, the website where it is implemented on becomes unusable in situations where the banner needs to be displayed (new visits / initial visits / privacy banner updates and resurfaces).

What’s the cause?

This happens due to a CSS tag of diplay:none set as active within the main CSS page. This causes the banner to load but not be visible.

This is a CSS issue within the base.css file on the Shopify website. There are currently two workarounds to this issue:

 Solution

Workaround 1: Adjust the base.css page:

1. Locate the usercentrics-root in the base.css file

2. Remove the condition display:none

3. Alternatively remove the condition div:empty

Workaround 2: inline override within the header

1. Add the following line within your theme.liquid page:

→ This will override the information in the CSS file, allowing the banner to be shown.

Do you need further help?

Usercentrics Shopify Implementation Guide (CMP v2)

Shopify (EN)