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 Database to your Shopify site.
→Jump to How to add a Consent Database on Shopify
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 Database 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:
You can read about the full requirements here.
iubenda’s Consent Database automatically records and manages GDPR & LGPD consent and privacy preferences for each of your users. You can read up more on iubenda’s Consent Database here.
Here’s a quick overview of the steps you’ll need to take to install your iubenda Consent Database on a basic Shopify form:
To get started first head over to your iubenda dashboard, click on [Your website] > Consent Database > Embed.
Then copy your iubenda Consent Database code by clicking on COPY.
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.
Now, give your page the title “Contacts”.
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.
After that, you need to create a new snippet in the Snippets folder and name it init_cons_script.liquid to do this:
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.
3. Name your new snippet “init_cons_script.liquid” and select Create snippet.
4. Then paste your script from the iubenda Consent Database 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.
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.
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.
6. After that, we need to add an id attribute to the submit button, open page.contact.liquid (inside the Templates folder)
7. Then, add the id="submit_button_contact" after <input type=" submit"
Please note that the code may not be the same in all templates. For example, some templates may use a different code, such as <button type="submit"
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.
If we want to add a checkbox to accept Privacy Policy and terms like this example image then please follow the steps below.
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.
Next, go to the Snippets folder and create a new snippet for the Load Function and name it load_cons_script.liquid.
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>
For no checkbox: “Clicking send, I accept Privacy Policy and Terms” please follow the steps below.
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.
Next, go to the Snippets folder and create a new snippet for the Load Function and name it load_cons_script.liquid.
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 'load_cons_script' %} right before the </body> closing tag.
Click on save and then check out your iubenda Consent Database on your Shopify!