# Implement with Shopify

***

### 1. Open the code edition of your Shopify template

In Shopify :

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

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2FwZDFVKw7nyncCnfsRUam%2Fshopify-open-code-editor.png?alt=media&#x26;token=95bde927-b025-41bf-94ea-d11723223673" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2FkxqFK4UbFItSz7wXKDbH%2Fshopify-edit-theme.png?alt=media&#x26;token=0e70e2a0-fb5e-445d-8345-0a3d26416d24" alt=""><figcaption></figcaption></figure>

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

```

{% hint style="info" %}
**INFO**

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

4. 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.
5. Delete the text "PUT THE CODE OF CMP IMPLEMENTATION HERE" from the shopify implementation and paste the code from the web implementation instead
6. 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'
  }
</script>
<script src="https://cdn.appconsent.io/tcf2-clear/current/core.bundle.js" defer async></script>

</div>
```
