Openli
IntroductionGetting StartedTechnical DocumentationGet help
  • Getting started
    • Introduction
    • Dictionary
    • FAQ
      • IAB TCF v2.0
  • Privacy hub
    • How to create your privacy profile
    • How can I get an Openli Privacy Badge?
    • Vendor owners
    • Why are custom properties on vendors super valuable?
    • Setting up custom properties
  • Tasks
  • Cookie Consent Management
    • Quickstart
    • Checklist: Cookies
    • Cookie widget
      • Create a cookie policy
      • Create a cookie widget
      • Install the widget
      • Manually add any cookies
      • Customise your widget
      • How to get color codes
      • Set the widget language
      • Use custom link/button instead of Cookie Shield
      • Add company name to cookie pop-up
    • Categorise your cookies
    • Adding information to cookies
    • Adding information to your cookie providers
    • Blocking Cookies with Openli
    • Cookie expiration dates and lifespan
      • Changing expiration on Google Analytics cookies
  • Policy and agreement management
    • Generate your privacy policy
    • Changing an old cookie policy to a new on autopilot
    • Embed your policies and legal agreements
      • Embedding agreements without displaying a widget
    • Install the Privacy Badge
  • General Openli guides
    • Setting up SSO (Single Sign-On)
      • SSO with Azure AD (Microsoft)
      • SSO with Google
      • SSO with Okta
      • How to log in with SSO
    • Add a website to your Openli account
    • Using projects to handle multiple languages
    • Collect consents without storing IP addresses or user-agents
  • Technical documentation
    • Widget
      • Collect cookie consent
        • Blocking cookies
        • Blocking embedded media
        • Cookie-widget options
        • Consent state API
    • API
      • Services
        • Personal data
        • Subprocessors
    • Cookies set by Openli
  • System Specific Integration Guides
    • Cloudflare
  • Legacy integrations
    • Google Consent Mode
    • Google Tag Manager
      • Block cookies with GTM
      • Install Openli with GTM
      • Prevent triggers from firing in GTM
    • HubSpot
    • Pardot
    • Shopify
      • Install cookie widget
      • Integrate consent with checkout
    • Square Online
    • Squarespace
    • Webflow
    • Wix
Powered by GitBook
On this page
  • Before you start:
  • Step 1: Code snippet
  • Step 2: Add custom code
  • Step 3: Edit theme.liquid
  • Block Cookies
  • Done!
  1. Legacy integrations
  2. Shopify

Install cookie widget

This guide is designed to help customers install our cookie widget on their Shopify based website. Follow these few simple steps to get up and running quickly.

PreviousShopifyNextIntegrate consent with checkout

Last updated 8 months ago

This courtesy guide is no longer actively tested by Openli, although it might still work.

Our cookie-consent widget intentionally uses a highly-compatible, highly-generic approach to integration. In most cases, it will be possible for your developers to adapt this guide's steps to any changes that might have been made to the target platform, in combination with their own general documentation. Our might be useful for this.

Before you start:

Before following these steps, please be sure that you have:

Check step 1 - 4 in the guide to creating all of the above.

Step 1: Code snippet

To install your widget, you'll need your cookie widget code snippet.

To find your code snippet, go to the Openli dashboard and select "Widgets" in the side menu. Click on the cookie widget you previously created and copy the code.

It will look like this:

<script>
    !function(){var i,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="3.0.0",i="https://widgets.legalmonster.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.info&&console.info("legal.js: The initialisation snippet is included more than once on this page, and does not need to be.");else{for(s.invoked=!0,s.methods=["cookieConsent","document","ensureConsent","handleWidget","signup","user"],s.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(t),s.push(e),s}},e=0;e<s.methods.length;e++)t=s.methods[e],s[t]=s.factory(t);s.load=function(e,t){var n,o=document.createElement("script");o.setAttribute("data-legalmonster","sven"),o.type="text/javascript",o.async=!0,o.src=i,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}},s.widget=function(e){s.__project||s.load(e.widgetPublicKey),s.handleWidget(e)}}}();

    legal.widget({
        type: "cookie",
        widgetPublicKey: "xxxxxxxxxxxxxxxxx",
    });
</script>

Notice that the value for widgetPublicKey will be different in your code snippet

Step 2: Add custom code

To insert the code snippet on your page, go to your Shopify dashboard and select "Online store" in the side menu. From the dropdown menu select "Themes".

To add custom code to your theme, you must select "Edit code" from the actions menu:

You'll now enter Shopify's code editing interface.

Step 3: Edit theme.liquid

To correctly install the cookie widget, you must enter the widget code snippet in the file name "theme.liquid".

Select "theme.liquid" from the list of files in the editor:

The cookie widget code snippet will need to go right before the closing <body>-tag of your code. Navigate to the bottom of the code and insert your code snippet.

Remember to save once you've added the code snippet.

Block Cookies

Done!

Congratulations on completing your first step towards collecting compliant cookie consent. Pad your self on the back and know that our mascot Li is proud of you.

Finally it is important that you don't forget to block any non-necessary cookies. It is extremely important to do this as you would otherwise be setting cookies before you collect consent. You can block cookies in two different ways. Either manually or via GTM if you use that to set the cookies. Guides can be found here for GTM: And here for manual blocking:

Blocking Cookies with GTM
Blocking Cookies Manually
Created a cookie policy
Created a cookie widget
Get started with Openli
Block Cookies
consent-state events
Created cookie providers and categorised all cookies
Select Edit code from the dropdown menu
The editor screen when "theme.liquid" is selected
The highlighted code is your cookie widget code snippet.