Cookie Consent

Create a custom cookie consent (that complies with GDPR law) directly in Shopify and customize it in Webflow.

Setup

1. Copy & paste the Manage Preferences button into your Webflow project. You can style the button however you like, with complete creative freedom.

Cookie Consent

Copy Webflow element

2. Go to your Shopify Panel > Settings > Customer Privacy and click on Cookie banner.

3. Click on Activate cookie banner button.

4. Then you can go to the Appearance section and click on Customize.

5. From the customize menu you can manage any aspect of your cookie consent banner, including text, colors, and layout.

6. You can also add 4 CSS Variables in Webflow to customize the banner (use the exact variable names below):

• Shopify-banner-border
• Shopify-banner- border-radius
• Shopify-banner-margin-vertical
• Shopify-banner-border-color

Custom CSS selectors

Below you can find all selectors Shopify uses for the main elements of the Cookie Banner, use the following snippet as a starting point for custom css customization:

/* Preference Dialog */
#shopify-pc__prefs__dialog {

}

/* Accept Prefs Button */
#shopify-pc__prefs__header-accept {

}

/* Decline Prefs Button */
#shopify-pc__prefs__header-decline {

}

/* Save Prefs Button */
#shopify-pc__prefs__header-save {

}

/* Prefs Title */
#shopify-pc__prefs__header-title {

}

/* Prefs Subtitle */
.shopify-pc__prefs__intro-main h3 {

}

/* Prefs Paragraph */
.shopify-pc__prefs__intro-main p {

}