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

Go to Online Store → Themes
Click on the "..." button
Click on "Edit code"

2. Add the web CMP in the theme code

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

And add the following code


<div data-gb-custom-block data-tag="unless" data-0='Shopify.designMode' data-1='Shopify.designMode'>

// PUT THE CODE OF CMP IMPLEMENTATION HERE

</div>

INFO

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

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.
Delete the text "PUT THE CODE OF CMP IMPLEMENTATION HERE" from the shopify implementation and paste the code from the web implementation instead
Save your theme page, and you should have an implementation that looks like this:


<div data-gb-custom-block data-tag="unless" data-0='Shopify.designMode' data-1='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>

</div>

PreviousWeb CMP NextPrivacy Center Kit

Last updated 1 year ago

hashtag1. Open the code edition of your Shopify template

hashtag2. Add the web CMP in the theme code

1. Open the code edition of your Shopify template

2. Add the web CMP in the theme code