Installing Osano on Shopify

To ensure proper functionality of Osano's Cookie Consent on your Shopify site, you must use Shopify's Customer Privacy API in conjunction with Osano’s services.

Installation Overview

Follow these steps to add and configure a cookie banner on your Shopify site:

1. Install Osano
2. Enable Shopify Customer Privacy Settings
3. Configure Custom Trigger in Shopify

Note: Shopify Plus customers must also install the Osano CMP Shopify app.

Step 2: Using the Shopify API with Osano

To fully utilize Osano’s Cookie Consent on Shopify, you must integrate the Shopify Customer Privacy API. This API enables Osano to communicate consent preferences and control Shopify pixels. Due to framework restrictions, Osano cannot control Shopify Pixels without the use of the Shopify customer privacy API.

The customer privacy API is a browser-based, JavaScript API that enables developers to read and write Shopify cookies related to a buyer's consent to be tracked as well as to communicate consent preferences saved in Osano to Shopify. 

To limit tracking or obtain consent from your users, go to Online Store > Preferences > Customer Privacy. Here you can adjust how data is collected in different locations. See details in Shopify's documentation regarding configuring customer privacy settings as well as their docs on their general privacy settings for more details.

Note: If you are using a custom storefront, you must have the Shopify Customer Privacy API installed on that storefront so that Osano can communicate consent across both storefront and checkout pages. Checkout the custom storefront docs for additional context. 

Shopify API Setup

Navigate to Customer Privacy Settings:

• Go to your Shopify Admin Dashboard > Settings.
• Click Online Store > Preferences > Customer Privacy.

Select Regions for Data Collection:

• Choose the regions where marketing and analytics data will be collected upon obtaining consent. 
• Click Confirm to apply your selections.
• Important: Select ALL regions in which you do business to ensure compliance.

Remove Shopify's Default Cookie Banner (if applicable):

• Click Cookie Banner to see more actions: Here, turn off Shopify’s default cookie banner to prevent conflicts with Osano if applicable.

Your "Cookie Banner" setup MAY look similar to this after updating the above: (Example includes the Shopify App referenced below)

Now continue on to ensure Osano is able to interact with the Shopify API. 

Step 3: Interacting with the Shopify API

Access Theme Code:

• From your Shopify Admin, go to Online Store > Themes.
• Click Actions, then select Edit Code.

Create a New Snippet for Osano:

• Under the Snippets folder, click Add a new snippet.
• Name the snippet osano-shopify and click Create snippet.

Insert Osano-Shopify Script:

• Paste the following code into the new snippet:

  <script>
  window.Shopify.loadFeatures([{
  name: 'consent-tracking-api',   
  version: '0.1',
  }], function(error){
  if (!error) {
    try {
      window.Osano.cm.ready('shopify');
    } catch (error) {
      console.error('Osano must be loaded before initializing the Shopify API.');
    }
  }
  }); 
  </script>

• Click Save.

Include Osano Snippet in Your Theme

Open theme.liquid File:

• In the Layout folder of your Shopify theme, open the theme.liquid file.

Insert Osano Snippet Before Closing Body Tag:

• Scroll to the bottom of the theme.liquid file and find the closing </body> tag.
• Paste the following code just before the </body> tag:

{% render 'osano-shopify' %}

Save the Changes:

• Click Save to finalize the code update.

Osano will now be able to communicate privacy choices with the Shopify Privacy API, ensuring compliance with consent preferences while managing Shopify-controlled content like cookies, scripts, and pixels.

IMPORTANT

Consent will be stored in the cookie titled cmp_a. This Cookie is how Shopify and Osano pass consent to one another. This cookie MUST be classified as essential to run appropriately. 

Shopify and Osano Category Mapping

Osano's Cookie Consent Manager maps to Shopify Privacy categories as follows:

Installing Osano in Shopify Checkout (Extensibility UI)

Note: Only available for Shopify Plus members. REQUIRED with use of the Checkout Extensibility UI.

To install Osano in checkout:

Step 1: Install the Osano CMP app from the Shopify App Store: https://apps.shopify.com/osano-cmp

Step 2: Copy your osano.js URL, which includes the {customer_id} and {configuration_id} from Osano.

Example Script format: https://cmp.osano.com/{customer_id}/{config_id}/osano.js

{customer_id}

• This is generated by the Osano application when you create your osano.js. It is the first string of numbers in your Javascript and will be unique to your organization. All configurations in your account will have the same {customer_id}.

{configuration_id}

• This is generated by the Osano application when you create your osano.js. It is the second string of numbers in your Javascript and will be unique to each configuration you create. All configurations in your account will have a unique {configuration_id}.

Step 3: Go to Online Store > Themes > Customize 

Step 3 (contd.): In the dropdown in the top middle of the theme editor (the one that includes "Home Page" as an option) select Checkout and customer accounts

Step 4: In the Sections tab, click Add App Block under Footer 

Step 4 (contd.): Select Osano CMP (Checkout) from the available options.

Step 5: Enter your {customer_id} (referred to as "Account ID") and {configuration_id} and click Save.

Shopify FAQs

Q: Does Osano support Google Consent Mode?

A: Yes, Osano supports Google Consent Mode and Google Consent Mode may be required to ensure the appropriate triggering of events added via custom pixels - Google's "additional consent required" triggers may be necessary for subsequent tags.

For Shopify Pixels, the Shopify Customer Privacy API must be configured.

Q: How can I test if consent is passed?

A: Use the following console log to check the current consent on the Shopify API. 

window.Shopify.customerPrivacy.currentVisitorConsent();

To test the passage of events:

• On your storefront home page, set your initial consent
• Navigate to the checkout
• On the checkout page change the consent preferences and save
• Navigate BACK to your storefront homepage
• Open your developer tools and enter window.Shopify.customerPrivacy.currentVisitorConsent(); in the console. 
• Check the returned values to ensure that consent was passed to the Shopify API and that the consent preferences you saved on the checkout are mapped correctly. 

Q: Does Osano work with Custom Pixels

A: Yes, but...Osano can interact with Shopify Pixels via the Shopify customer privacy API. While Osano can read and pass the values to the Shopify API, however, Shopify is 100% responsible for Pixels and Custom Pixels and their functionality. If you experience issues with custom pixels, please reach out to your Shopify support team. 

Q: Why do I still see some Shopify Cookies placed even after consent has been revoked?

A: Some Shopify cookies (_shopify_y, shopify_s, _landing_page) will always load due to Shopify's framework restrictions. These cookies are outside Osano's control and will be set based on Shopify's determination of persistence or session length.