Integrate consent with checkout

This guide is designed to help customers gather consent when customers checkout from their Shopify shop.

This integration is no longer actively supported or tested by Openli.

Before you start:

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

• Created a privacy policy and terms of service agreement

• Created a signup for a service widget

Step 1: Code snippet

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

The code snippet is in the text area in the lower right corner

To find your code snippet, go to the Openli dashboard and select "Widgets" in the side menu. Click on the Signup-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: "signup",
        widgetPublicKey: "xxxxxxxxxxxxxx",
        targetElementSelector: "#legalmonster-signup-xxxxxxxxxxxx",
    });
</script>

<div id="legalmonster-signup-xxxxxxxxxxxxxxxx"></div>

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

The code snippet consists of two elements: the <script> code and a <div> element. The <div> element is replaced by our consent element, and thus must be placed where you wish to collect consent.

Your code snippet might need customisation to fit your page. Make sure you've about read all the options available in the consent widget.

Step 1: Integrate with your cart

There are a few places you need to hook into to enable Openli to work with Shopify. The first place is your cart, which you must edit in the theme code. Go to "Online Store", then "Themes", and then click "Actions" and select "Edit code".

Select Edit Code from the dropdown menu.

Where your cart's template code is stored depends on the theme. In the default theme "Debut" it is located in a file called cart-template.liquid.

When you have located the template code for your cart, you should add the code snippet:

The highlighted code is the Openli code snippet.

The target element for consent collection (the <div> in the example above) must be within the cart's form element.

Remember to save your changes.

Extra: Saving additional details after checkout

To reliably identify the user and ensure that their consent is properly associated with them, we need to add some code to your checkout completion page. This is done under "Settings", then "Checkout", where you should find the section called "Order processing".

You should see an input field for "Additional scripts", and that is where you should customise and insert the following code:

<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.load("Your widget's public key", {
        identifier: "{{ customer.id }}",
        locale: "en-us",
    });
    legal.user({
        name: "{{ customer.name }}",
        email: "{{ customer.email }}",
    });
</script>

Done!

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