Consent Management: Install Fides on your Shopify store

Introduction

This tutorial currently reviews loading FidesJS on Shopify storefront (non-checkout) pages. To configure FidesJS for checkout pages, follow the tutorial here.

In this tutorial, we'll configure Shopify to both install FidesJS and respect the end-user consent choices provided by Fides. This includes compliance with Shopify's native customer privacy API.

Shopify’s Customer Privacy API defines their own standard categories of consent and provide a standard way to collect, record, and enforce consent on the platform. This privacy API can be seen as similar to Google’s “Consent Mode” API.

The Customer Privacy API includes a way to:

1. Collect consent from cookie banners: both the Shopify-native banner, as well as including an API for 3rd-party banners to use
2. Record consent in five standard categories, defined by Shopify: Required, Personalization, Marketing, Analytics, and Data Sales
3. Enforce consent on Shopify-managed apps & pixels

Main Steps

This tutorial covers 3 main steps:

1. Disable Shopify's consent banner
2. Configure a FidesJS Shopify code section
3. Add the FidesJS section to your Shopify theme

Let's get started!

Prerequisites

In order for Fides.js to be served on your Shopify storefront, you must first add your Shopify store domain to the allowed list. Read the guide for adding domains to the allowed list here.

For this tutorial you'll need:

• A Fides Cloud or Fides Enterprise account
• The role of Owner or Contributor for your Fides organization.
• Access to your Shopify store admin to make updates to the theme.
• At least one system with a data use on your Data Map. Read how to add systems to the Data Map now.
• At least one privacy notice configured. Read how to configure privacy notices now.
• At least one privacy experience configured. Read how to configure privacy experiences now.

Disable Shopify's cookie banner

Shopify includes a default cookie banner that you may want to disable to avoid conflicts with FidesJS. Here's how to disable it.

1. Navigate to your Shopify admin dashboard and click on Settings tab.
2. Navigate to Customer Privacy.
3. In the Privacy Settings section, click on Cookie banner:
4. Click on Remove cookie banner if you see the following UI:

Otherwise, using the More actions dropdown, click on Remove cookie banner in the dropdown:

Configure a FidesJS Shopify code section

Fides.js is the JavaScript package that powers Fides privacy and consent experiences on your website. It needs to be installed into the source code of your Shopify store to function.

1. Navigate to your Shopify admin dashboard and click on Online Store → Themes:

2. Click on the ... menu → Edit code:

3. Click on Add a new section:

4. Select the liquid option and name the section fides. Click Done.

5. Replace the default code with the following code snippet:

   Fides.js Shopify installation

   <script>
     (function() {
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = 'path/to/fides.js'; // You will need to change this to your fides.js URL
     script.async = true;
   

script.onload = function() { if (typeof Fides !== 'undefined' && typeof Fides.shopify === 'function') { Fides.shopify({ sale_of_data_default: true }); } else { console.error('Fides or Fides.shopify is not available'); }

// Begin optional Google Tag Manager (GTM) integration if (typeof Fides !== 'undefined' && typeof Fides.gtm === 'function') { Fides.gtm(); } else { console.error('Fides or Fides.gtm is not available'); } // End optional Google Tag Manager (GTM) integration };

script.onerror = function() { console.error('Failed to load Fides script'); };

document.head.appendChild(script); })(); {% schema %} { "name": "FidesJS", "settings": [] } {% endschema %}

6. Modify this template with:
- Replace `path/to/fides.js` with your actual fides.js URL.
- Optionally, remove the Google Tag Manager section if you do not use it.
- Optionally, if you wish for the Shopify `sale_of_data` default to be `false`, change the value to `false` or leave out the config object entirely.
7. Your resulting `fides.liquid` section should look something like this:
8. Click **Save** to save the changes.

## Add the FidesJS section to your Shopify theme
Now we need to add your FidesJS section to your theme. We do this by including it in the Footer.

1. Navigate to your Shopify admin dashboard and click on **Online Store** → **Themes**, then click on **Customize**:
2. Navigate to the home page customizations:
3. Scroll down to the **Footer** area, then click on **Add section** in the footer:
4. Select your custom FidesJS section:
5. Click **Add** to add the FidesJS section to the footer, then click **Save** to save the changes.

## Test Fides.js Installation
Once you have installed the `fides.js` script on your Shopify store, you can do some quick tests before fully configuring your consent solution. Here are three easy checks:

1. Open your updated Shopify store in your web browser.
2. Inspect the source code of your website and ensure that the `<script src="path/to/fides.js"></script>` is present.
3. Open the Developer Console and run `window.Fides` to ensure you see a valid Javascript object.

### What's next?
Now that you have FidesJS installed on your Shopify store, you can move on to [configuring Google tags to respect consent](/content/docs/consent/guides/google-tag-manager/index.html).