# 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="/files/eJde6ym0INjeuNqmHFqA" 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="/files/DQzBGO1XFJT4qHB4JCG0" 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sfbx.io/configuration/step-3-notice-implementation-web-app-tv/web-cmp/implement-with-shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
