/ /

Installing Osano on Shopify

Updated 16 days ago

To use Osano's Cookie Consent on a Shopify store, you install Osano in your theme and connect it to Shopify's Customer Privacy API. The API connection is what lets Osano control Shopify's own cookies, scripts, and Pixels. Without it, Osano cannot govern Shopify-controlled content.

Before you start

You will need:

  • An Osano account with a published configuration. Plans are at osano.com/plans.

  • A published privacy policy in Shopify. Shopify requires this before any cookie banner can be used. Set it at Settings > Customer privacy > Privacy policy.

  • The Osano CMP Shopify app, only if you are installing in checkout. For a storefront-only install you do not need it.

What you will do

Step

Where

1. Create and publish your Osano configuration

Osano

2. Add osano.js to your theme

Shopify theme code editor

3. Configure Shopify's privacy settings

Shopify admin

4. Connect the Customer Privacy API

Shopify theme code editor

5. Install in checkout (optional)

Shopify checkout and accounts editor

6. Verify

Browser console

Steps 1 through 4 are required for every install. Step 5 applies only if you need consent enforced in checkout.

Step 1: Create and publish your Osano configuration

  1. In Osano, go to the Cookie Consent tab and create a new configuration.

  2. Fill in:

    • Name. An internal identifier.

    • Domain. Your root domain only. If you own example.com but your store is at www.example.com, enter example.com. Osano covers subdomains automatically.

    • Policy Link URL. The full URL of your privacy policy.

  3. Click Create Configuration.

  4. Publish the configuration.

  5. Click Get Code and copy your osano.js script tag.

Your script URL looks like this:

<https://cmp.osano.com/{customer_id}/{configuration_id}/osano.js>

Value

What it is

{customer_id}

The first string of numbers. Unique to your organization, and identical across every configuration in your account.

{configuration_id}

The second string of numbers. Unique to each configuration you create.

Keep both. You will need them again in Step 5 if you are installing in checkout.

Step 2: Add osano.js to your theme

This covers your storefront outside of checkout.

  1. From your Shopify admin, go to Online Store > Themes.

  2. Next to the theme you want to edit, click the ⋯ icon (three horizontal dots), then click Edit code.

    1. Screenshot 2026-07-30 at 11.49.50 AM.png

  3. In the file list, open the Layout folder and click theme.liquid.

  4. Find the <head> section. Some themes use a variation such as {head}, [header], or [head].

  5. Paste your osano.js script tag inside <head>, before every other <script> on the page.

  6. Click Save.

Screenshot 2026-07-30 at 11.51.27 AM.png

Osano must load first. If any other script loads ahead of it, Osano cannot block that script before it runs, and cookies may be set before the visitor consents.

You can now manage your banner's appearance and behavior at my.osano.com.

Notes

  • Editing theme.liquid is one way to add the code. You can also use a Shopify app that injects custom code into the header. Whichever method you use, Osano must still load before other scripts.

  • The Osano CMP Shopify app does not add osano.js to your storefront. It provides the checkout extension only, so this step is required whether or not the app is installed.

Step 3: Configure Shopify's privacy settings

Two things happen here. You remove Shopify's own cookie banner so it does not compete with Osano's, and you tell Shopify which regions require consent before it collects data.

3a. Open your cookie banner settings

Go to Settings > Customer privacy. You will see the Privacy settings section listing Privacy policy, Cookie banner, and Data sharing opt out page.

Screenshot 2026-07-30 at 11.42.41 AM.png

Click Cookie banner.

3b. Turn off automated settings

With automated settings on, the page shows a Regions and content section containing a single Use automated settings toggle. Shopify keeps regions and content in sync with its own recommendations, which means it will show its banner in regions it decides require one.

Screenshot 2026-07-30 at 11.42.59 AM.png

Turn Use automated settings off.

Two Edit rows appear underneath, Regions and Content. You do not need to configure either one, but the toggle must be off before Shopify will let you remove the banner.

3c. Remove Shopify's cookie banner

With automated settings off, click More actions. The menu now offers Remove cookie banner.

Screenshot 2026-07-30 at 11.43.16 AM.png

Click Remove cookie banner. Shopify confirms with a dialog that describes exactly this scenario:

The cookie banner will be removed from your store. Make sure that you've set up an app to show a cookie banner in the regions that require it. Automated settings will be turned off.

Screenshot 2026-07-30 at 11.43.32 AM.png

Click Remove. This is the action that stops Shopify's banner.

3d. Set your regions

After removal, the Cookie banner page may change shape entirely. The Regions and content section is gone, replaced by Visibility and Regions. You may also see the same screen but with new options under the More Actions menu such as 'Set custom banner regions'.

Screenshot 2026-07-30 at 11.43.56 AM.png

The Regions section controls where Shopify requires consent before collecting customer data. Click Edit to change it.

Screenshot 2026-07-30 at 11.45.01 AM.png

Select every region in which you do business. Shopify gates its own data collection on consent only in the regions selected here. Leaving a region out means Shopify does not wait for the consent Osano gathered there.

Screenshot 2026-07-30 at 11.44.15 AM.png

Click Save.

Note: Do not click "Set up banner." The Visibility section offers a Set up banner option. That recreates Shopify's own banner, not Osano’s.

Step 4: Connect the Customer Privacy API

Shopify's framework does not let Osano control Shopify Pixels directly. Consent has to pass through Shopify's Customer Privacy API, which is what this step sets up.

4a. Create the snippet

  1. Go to Online Store > Themes.

  2. Click the ⋯ icon next to your theme, then Edit code.

  3. Right-click the Snippets folder and select New file. If your editor shows an Add a new snippet link, you can use that instead.

  4. Name the snippet osano-shopify.

  5. Paste this into the editor, in full:

    <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>

  6. Click Save.

4b. Render the snippet in your theme

  1. In the Layout folder, open theme.liquid.

  2. Scroll to the closing </body> tag.

  3. Paste this immediately before it:

    {% render 'osano-shopify' %}

  4. Click Save.

Osano can now pass privacy choices to Shopify, which applies them to Shopify-controlled content including Shopify cookies, scripts, and Pixels.

4c. How Osano categories map to Shopify

Osano

Shopify

Personalization

Preferences

Marketing

Marketing

Analytics

Analytics

Do Not Sell

Sale of Data

Step 5: Install in checkout

Skip this step if you do not need consent enforced in checkout.

Shopify Plus Plan requirement. Availability depends on your Shopify plan and on where in checkout the Osano block is placed. Shopify restricts apps on the information, shipping, and payment pages to Shopify Plus. Confirm coverage for your plan with your Shopify representative.

5a. Install the app

Install the Osano Cookie Consent app from the Shopify App Store.

Screenshot 2026-07-30 at 11.45.36 AM.png

5b. Add the Osano block

  1. Go to Settings > Checkout.

  2. In the Configurations section, click Edit next to the configuration you want to customize. The checkout and accounts editor opens.

  3. Use the page selector at the top to choose the page you want the banner on.

  4. Click the Sections icon in the left sidebar.

  5. Click ⊕ Add block in the section where Osano should appear.

    1. Screenshot 2026-07-30 at 11.47.16 AM.png

  6. Select Osano CMP (Checkout).

  7. In the block settings, enter:

    • Account ID = your {customer_id}

    • Configuration ID = your {configuration_id}

    • Screenshot 2026-07-30 at 11.47.30 AM.png

  8. Click Save.

You can also add the block from the Apps sidebar: click the Apps icon, click ⊕ next to Osano CMP (Checkout), then choose the page.

5c. Repeat for every checkout configuration

Shopify supports multiple checkout configurations, including drafts and per-market configurations on Advanced and Plus plans.

Add the Osano block to every configuration you intend to publish. A configuration without the block runs checkout with no consent enforcement, and Shopify does not warn you. Re-check this whenever you create a new configuration or duplicate an existing one.

This is easy to miss because it usually works when you test it. If you test in one market and the block is missing from another market's configuration, consent silently fails only for customers in that other market.

Step 6: Verify the integration

Do this before you consider the install finished.

  1. Open your storefront home page and set a consent preference in the Osano banner.

  2. Go to checkout.

  3. Change your consent preferences at checkout and save.

  4. Go back to your storefront home page.

  5. Open your browser's developer tools and run this in the console:

    window.Shopify.customerPrivacy.currentVisitorConsent();

  6. Confirm the returned values match your consent choices

An Accept All response looks like this:

{marketing: 'yes', analytics: 'yes', preferences: 'yes', sale_of_data: 'yes'}

Value

Meaning

'yes'

The visitor granted consent

'no'

The visitor declined consent

''

The visitor has not chosen yet

If the values do not match what you set, or the call returns an error, see the Shopify and Osano Troubleshooting Guide.

Frequently asked questions

Why am I seeing two cookie banners?
Shopify's automated privacy settings are still on. See Step 3a.

Does Osano support Google Consent Mode?
Yes. Google Consent Mode may also be required for events added through Shopify custom pixels to fire correctly, because Google's "additional consent required" triggers can gate subsequent tags. For Shopify Pixels specifically, the Customer Privacy API must be connected per Step 4.

Does Osano work with custom pixels?
Osano reads consent and passes it to the Shopify Customer Privacy API, and Shopify Pixels respond to that signal. Shopify owns pixel and custom pixel functionality end to end. If a custom pixel misbehaves after consent is passing correctly, that is a Shopify support issue.

Why do some Shopify cookies still load after consent is revoked?_shopify_y, _shopify_s, and _landing_page always load because of Shopify framework restrictions. They are outside Osano's control, and Shopify determines their persistence and session length.

I am using a custom or headless storefront. Does this apply?
Partly. You must install the Customer Privacy API on your custom storefront directly so Osano can pass consent across both storefront and checkout. See Shopify's custom storefront installation guidance.

Do I need the Osano CMP Shopify app?
Only for the checkout install. A storefront-only install does not need it, and installing it does not add osano.js to your storefront.

Was this article helpful?
Subscribe to receive updates on this article