Iubenda logo
Start generating

Documentation

Table of Contents

How to add Consent Solution on Shopify

Have you generated a website using Shopify and need to meet GDPR consent requirements?

Well, you’re in the right place. In this guide, we’ll take a look at GDPR consent proof requirements and how to add iubenda’s Consent Solution to your Shopify site. 

→Jump to How to add a Consent Solution on Shopify

To put it simply, you do need GDPR proof of Consent Solution for your Shopify site, and here’s why: 

Consent records are specifically required under the GDPR. Keeping a complete and thorough record of consent is required and is an essential part of privacy compliance. The records of proof are managed by you, the Data Controller. As a result, the GDPR requires you to keep “proofs” or records of consent that contain specific details that might prove that the consent received is genuine and therefore valid under the GDPR. Consent must be explicit, freely provided, and verifiable under the GDPR. You can read up more on iubenda’s Consent Solution here.

These records should include a way of identifying the user, proof of consent, record of the consenting action, and the legal documents available to the user at the time of consent, among other things.

The following information should be recorded:

  • who provided the consent; 
  • when and how consent was obtained from the particular user; 
  • the consent collecting form they were presented with at the time of collection; and 
  • whatever conditions and legal documents were in effect at the time the consent was obtained.

You can read about the full requirements here.

iubenda’s consent solution automatically records and manages GDPR & LGPD consent and privacy preferences for each of your users. You can read up more on iubenda’s Consent Solution here.

How to add iubenda’s Consent Solution 

Here’s a quick overview of the steps you’ll need to take to install your iubenda Consent Solution on a basic Shopify form:

  • Create a contact page;
  • Add Javascript script in the <head> tag
  • Customize “Load” or “Submit” JS Function and add it after the </form> tag

To get started first head over to your iubenda dashboard, click on [Your website] > Consent Solution > Embed.

How to add Consent Solution on Shopify

Then copy your iubenda Consent Solution code by clicking on COPY.

How to add Consent Solution on Shopify

After that, we need to create a Contact Page to do this, head over to your Shopify Dashboard click on Online Store on the menu on the left the select Pages, and click on the Add page button.

How to add Consent Solution on Shopify

Now, give your page the title “Contacts”.

How to add Consent Solution on Shopify

Please choose “contact” from the Theme template drop-down menu on the right of your screen and click Save. This procedure is explained also here.

How to add Consent Solution on Shopify

After that, you need to create a new snippet in the Snippets folder and name it init_cons_script.liquid to do this: 

  1. Access your Shopify store’s admin panel and go to Online Store > Themes. Once there, click on Actions on the right, then Edit Code.
How to add Consent Solution on Shopify

2. Create a new snippet in the Snippets folder by scrolling down the “edit code for Dawn” menu on the left. under the section named ‘Snippets’ select Add a new snippet. 

How to add Consent Solution on Shopify

3. Name your new snippet “init_cons_script.liquid” and select Create snippet.

How to add Consent Solution on Shopify

4. Then paste your script from the iubenda Consent Solution dashboard and click on Save.

5. Next, open the theme.liquid layout (inside the Layout folder) and add {% include 'init_cons_script' %}between {{ content_for_header }} and </head> closing tag.

How to add Consent Solution on Shopify

Please note (For step 6): If you are using the OS2 Theme, the page.contact.liquid may not exist.

In this case, you will have a file named page.contact.json, which contains a JSON schema like the following image.
Here, we see “sections” at the top of this snippet.

How to add Consent Solution on Shopify

Now, in the menu on the left scroll down until you find the folder “Sections” and here you will find contact-form.liquid. Please continue with step 6. 

How to add Consent Solution on Shopify

6. After that, we need to add an id attribute to the submit button, open page.contact.liquid (inside the Templates folder)

How to add Consent Solution on Shopify

7. Then, add the id=“submit_button_contact” after <input type=“ submit”

How to add Consent Solution on Shopify

Click on save in the top right of your page. 

Please note the next step is just an example. For a detailed procedure on customization please refer to our JavaScript installation method.

Checkbox 

If we want to add a checkbox to accept Privacy Policy and terms like this example image then please follow the steps below. 

How to add Consent Solution on Shopify

For a simple checkbox, copy this HTML code.

<input type="checkbox" id="privacy_consent" name="privacy_consent_checkbox">
<label for="privacy_consent"> I accept Privacy Policy and Terms</label><br>

and add it in the page.contact.liquid before the submit button we previously added.

How to add Consent Solution on Shopify

Next, go to the Snippets folder and create a new snippet for the Load Function and name it load_cons_script.liquid.

How to add Consent Solution on Shopify

After that, paste in the load function: 

<script type="text/javascript">_iub.cons_instructions.push(["load",{
submitElement: document.getElementById("submit_button_contact"),
form: {
selector: document.getElementById("ContactForm"),
map: {
subject: {
first_name: "contact[name]",
email: "contact[email]"
},
preferences: {
privacy_acceptance: "privacy_consent_checkbox",}
}
},
consent: {
legal_notices: [
{
identifier: 'privacy_policy',
},
{
identifier: 'cookie_policy',
},
{
identifier: 'terms',
}
],
}
}]);
</script>

Without Checkbox 

For no checkbox: “Clicking send, I accept Privacy Policy and Terms” please follow the steps below.

How to add Consent Solution on Shopify

If we want to add a paragraph to accept Privacy Policy and terms (please copy the HTML below).

<p>By Clicking Send, I accept <a href="linkTerms">Terms</a> and <a href="link_pp">Privacy Policy</a></p>

We can add it to the page.contact.liquid before the submit button as shown below.

How to add Consent Solution on Shopify


Next, go to the Snippets folder and create a new snippet for the Load Function and name it load_cons_script.liquid.

How to add Consent Solution on Shopify

After that paste the Submit function: 

<script type="text/javascript">
document.getElementById("submit_button_contact").onclick=function(e){
e.preventDefault();  
_iub.cons_instructions.push(["submit ",{   
form: {
selector: document.getElementById("ContactForm"),
map: {  
subject: {  
first_name: "contact[name]",
email: "contact[email]"
},  
}
},
consent: {
preferences: {
privacy_acceptance: true,  
},
legal_notices: [
{
identifier: 'privacy_policy',
},  
{
identifier: 'cookie_policy',
}],}},
{success:function(response){console.log(response);
document.getElementById("ContactForm").submit()},}])}
</script>

Now, add Load/Submit the JavaScript function before the </form> closing tag in Theme.Liquid. Add the following HTML {% include 'cons_load_script' %} right before the  </body> closing tag.

How to add Consent Solution on Shopify

Click on save and then check out your iubenda consent solution on your Shopify! 

See also