Cookie Consent

How to set custom cookie consent banner

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

Smootify Docs

Copy & paste the component

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

Cookie Consent

The Preferences button allows users to set Shopify cookie preferences. You can style the button however you like, with complete creative freedom.

Copy Element

Go to Shopify Panel

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

Click on Activate cookie banner button. Smootify Docs

Go to Appearance

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

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

Add CSS Variables

ou 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

    Smootify Docs

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 {
 
}

Previous

Analytics

Next

Integrations

On this page