Skip to main content
If you update your theme to a never version, you might need to repeat this step
We need to make sure the Depict frontend script is loaded on all pages and has all the information it needs to work. This is done by adding a snippet of code to your theme.
1

First Step

Open the code editor

Guide to opening the code editor

2

Second Step

Locate your theme.liquid file

`theme.liquid` in the code editor

3

Third Step

Copy-paste the Depict head section after <head> (but before </head>).
{% comment %}
Begin Depict <head> section
{% endcomment %}
{% assign encoded_domain = shop.permanent_domain | url_encode %}
{% assign cache_id = shop.metafields.depict.script_and_style_cache_id %}
{% assign encoded_cache_id = cache_id | url_encode %}
{% assign depict_script_url = shop.metafields.depict.backend_url.value | append: "/api/script-and-style.json?shop=" | append: encoded_domain | append: "&cache_id=" | append: encoded_cache_id %}
<link rel="preload" href="{{ depict_script_url }}&modern=true" as="fetch" crossorigin="anonymous" />
<script type="text/javascript">!function(){var e,t,n,o,a,r=!1,p="DEPICT",i="setItem",c="{{ cache_id }}",d=p+"J_"+c,s=p+"S_"+c,u=sessionStorage,l=localStorage,v=new XMLHttpRequest,y=function(){new Function("cache_key","style",t)(c,n)};try{var E;r=!(null===(E=String.prototype.at)||void 0===E||!E.toString().includes("[native code]")),t=l[d],n=l[s]}catch(e){}v.addEventListener("load",(function(){var e=JSON.parse(v.responseText),o=e[0],a=e[1];t&&n||(t=o,n=a,y());try{l[d]=o,l[s]=a}catch(e){}})),v.open("GET","{{ depict_script_url }}&modern="+r),v.send(),t&&n&&y(),(e=window).dpq||(e.dpq=(a=function e(){var t=arguments;e.send_event?e.send_event.apply(this,t):e.queue.push(t)},a.queue=[],a)),(o=u.hasOwnProperty(i)?u:Storage.prototype)[i]=new Proxy(o[i],{apply:function(e,t,n){if("depict"!=(null==n?void 0:n[0]))return Reflect.apply(e,t,n);var o=n[1];dpq(o.name,o.data)}})}();</script>
{% comment %}
End Depict <head> section
{% endcomment %}

theme.liquid with the Depict script loader inside the <head> section

⌘I