Consent Management: Install Fides on your Shopify Checkout

In this tutorial, we'll be using Shopify custom pixels to load FidesJS on checkout pages.

Let's get started!

Prerequisites

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.
• An active GTM account.

Configure a FidesJS custom pixel

For this step, we'll configure a custom pixel on Shopify to load the FidesJS script.

1. In your Shopify admin, navigate to Settings.

2. Click on Customer Events.

3. Click on Add custom pixel.

4. Name it FidesJS or something similar.
5. Paste the following code in the HTML field:

 
function insertFidesScript() {
  const script = document.createElement('script');
  script.id = 'fides-js';
  script.src = 'https://my.privacy.center/fides.js';
  script.async = true;
 
  script.onerror = function() {
    console.error('Failed to load Fides script');
  };
 
  document.head.appendChild(script);
 
}
 
const currentURL = window.location.href;
 
const stringsToCheck = ["checkouts"];
 
const isCheckoutPage = stringsToCheck.some(str => currentURL.includes(str));
 
// Insert Fides.js on checkout pages
if (isCheckoutPage) {
  insertFidesScript();
}
 
 

6. Replace my.privacy.center with the custom domain of your privacy center, e.g. "privacy.example.com", "privacy.your-brand.com", or "privacy-your-brand.fides-cdn.ethyca.com". If you're not sure what to use, work with your Ethyca customer success team!

7. Notice the script checks if the current page is a checkout page and loads the FidesJS script if it is. We do this by checking string matches against the URL. Replace the stringsToCheck array with string(s) appropriate for your checkout page setup. E.g. if your checkout pages have /checkout in the URL, you can replace ["checkouts"] with ["checkout"].

The resulting pixel should look something like this:

6. Click Save to save the pixel.
7. Click Connect on the top right to connect the pixel to your site, then click Test to test the pixel.

Congrats! FidesJS is now installed on your Shopify checkout pages. You can now test the installation following the steps below.

Test FidesJS installation on checkout pages

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, or click Test in the custom pixel settings
2. Navigate to checkout page(s)
3. Open up the network tab. Reload the page to see https://my.privacy.center/fides.js is loading in appropriately