Skip to main content

How to implement the web cmp with shopify

On this page you'll find instructions on how to implement AppConsent CMP with Shopify.

1. Open the code edition of your shopify template​

In shopify :

  1. Go to Online Store → Themes
  2. Then click on the ... button
  3. The click on "Edit code"

Open the edit mode

2. Add the web cmp in the theme code​

  1. In the side menu, open the theme file containing your site's html base. For our example theme, we'll use theme.liquid
  2. Then place yourself before the end of the <head> tag.

Open theme file

  1. And add the following code
{% unless content_for_header contains "Shopify.designMode" %}

// PUT THE CODE OF CMP IMPLEMENTATION HERE

{% endunless %}
Information

We have to wrap the cmp implementation code, as shopify's customization mode is not compatible with the CMP code.

  1. Retrieve the implementation code for your notice, by going to the Notices tab in the configuration interface, then under the notice you wish to integrate, copy the integration code using the "Copy" button.

Quick start copie code

  1. Delete the text "PUT THE CODE OF CMP IMPLEMENTATION HERE" from the shopify implementation and paste the code from the web implementation instead
  2. Save your theme page, and you should have an implementation that looks like this:
{% unless content_for_header contains "Shopify.designMode" %}
<!-- MANDATORY: BEGIN IAB STUB -->
<script type="text/javascript">
  !function(){var e=function(){var e,t="__tcfapiLocator",a=[],n=window;for(;n;){try{if(n.frames[t]){e=n;break}}catch(e){}if(n===window.top)break;n=n.parent}e||(!function e(){var a=n.document,r=!!n.frames[t];if(!r)if(a.body){var s=a.createElement("iframe");s.style.cssText="display:none",s.name=t,a.body.appendChild(s)}else setTimeout(e,5);return!r}(),n.__tcfapi=function(){for(var e,t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];if(!n.length)return a;if("setGdprApplies"===n[0])n.length>3&&2===parseInt(n[1],10)&&"boolean"==typeof n[3]&&(e=n[3],"function"==typeof n[2]&&n[2]("set",!0));else if("ping"===n[0]){var s={gdprApplies:e,cmpLoaded:!1,cmpStatus:"stub"};"function"==typeof n[2]&&n[2](s)}else a.push(n)},n.addEventListener("message",(function(e){var t="string"==typeof e.data,a={};try{a=t?JSON.parse(e.data):e.data}catch(e){}var n=a.__tcfapiCall;n&&window.__tcfapi(n.command,n.version,(function(a,r){var s={__tcfapiReturn:{returnValue:a,success:r,callId:n.callId}};t&&(s=JSON.stringify(s)),e&&e.source&&e.source.postMessage&&e.source.postMessage(s,"*")}),n.parameter)}),!1))};"undefined"!=typeof module?module.exports=e:e()}();
</script>
<!-- MANDATORY: END IAB STUB -->

<script type="text/javascript">
  const configSFBXAppConsent = {
    appKey: 'YOUR APPKEY'
    // targetCountries: ['FR', 'UK', 'US'],
    // forceGDPRApplies: true,
  }
</script>
<script src="https://cdn.appconsent.io/tcf2-clear/current/core.bundle.js" defer async></script>
{% endunless %}
Last updated on