> For the complete documentation index, see [llms.txt](https://docs.sfbx.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sfbx.io/configuration/step-3-notice-implementation-web-app-tv/web-cmp/implement-with-shopify.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
