Shopify

How to integrate Shopify and Legal Monster.
legal.js
Our Shopify integration is based on our legal.js library, so you can extend this integration with all the features and settings that it supports.
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".
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 following code where you want the consent collection to happen.
<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: "Your widget's public key",
        targetElementSelector: "#cart-consent",
        submitButtonsSelectors: '[name="checkout"]',
        locale: "en-us",
    });
</script>
<div id="cart-consent"></div>
The target element for consent collection (the <div> in the example above) must be within the cart's form element, and you must set the value of the widgetPublicKey option to the public-key of the signup widget you want to use.
The language of the widget can be set by changing the locale option. The default is US English, and other languages are available.​
Saving additional consent 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 customize and insert the following code, replacing <<PROJECT PUBLIC KEY>> with your project's public-key:
<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 }}",
    });
    legal.ensureConsent();
</script>
System integrations - Previous
Pardot
Next - API
Getting started
Last updated 1 week ago