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
To install your widget, you'll need your widget code snippet.
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.
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 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.
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>
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.