Preparing your theme - <head> - Depict AI Documentation

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.

First Step

Open the code editor

Guide to opening the code editor

Second Step

Locate your theme.liquid file

`theme.liquid` in the code editor

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

Overview

Setup

Depict blocks

Customisation

Preparing your theme - <head>