Integrate consent with checkout
This guide is designed to help customers gather consent when customers checkout from their Shopify shop.
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.
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 snippetThe 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 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.
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 mascot Li is proud of you.
Last modified 1yr ago