Usercentrics Consent Tool not showing up on Shopify Websites

Source: https://usercentrics.atlassian.net/wiki/spaces/SKB/pages/2504687622/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.