Integrate consent with checkout

This guide is designed to help customers gather consent when customers checkout from their Shopify shop.
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 Legal Monster 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 Legal Monster 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 Legal monster 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 monster Sven is proud of you. 
Install cookie widget
Next - System integrations
Google Tag Manager
Last updated 2 months ago