> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Preparing your theme -
This page does not apply to installs made in 2025 or later of the Depict Shopify apps
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.
Open the code editor
{
// In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
const direct_parent = element?.parentElement;
if(direct_parent?.matches?.("[data-rmiz-content]")) {
Object.assign(direct_parent.style, {
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
})
}
const parents_parent = direct_parent?.parentElement;
if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
parents_parent.style.width = "100%";
}
}}
/>
Locate your theme.liquid file
{
// In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
const direct_parent = element?.parentElement;
if(direct_parent?.matches?.("[data-rmiz-content]")) {
Object.assign(direct_parent.style, {
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
})
}
const parents_parent = direct_parent?.parentElement;
if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
parents_parent.style.width = "100%";
}
}}
/>
Copy-paste the Depict head section after `` (but before ``).
```liquid theme={null}
{% comment %}
Begin Depict 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 %}
{% comment %}
End Depict section
{% endcomment %}
```
theme.liquid with the Depict script loader inside the {""} section}>
{
// In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
const direct_parent = element?.parentElement;
if(direct_parent?.matches?.("[data-rmiz-content]")) {
Object.assign(direct_parent.style, {
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
})
}
const parents_parent = direct_parent?.parentElement;
if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
parents_parent.style.width = "100%";
}
}}
/>
{
// In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
const direct_parent = element?.parentElement;
if(direct_parent?.matches?.("[data-rmiz-content]")) {
Object.assign(direct_parent.style, {
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
})
}
const parents_parent = direct_parent?.parentElement;
if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
parents_parent.style.width = "100%";
}
}}
/>
{
// In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
const direct_parent = element?.parentElement;
if(direct_parent?.matches?.("[data-rmiz-content]")) {
Object.assign(direct_parent.style, {
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
})
}
const parents_parent = direct_parent?.parentElement;
if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
parents_parent.style.width = "100%";
}
}}
/>
{
// In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
const direct_parent = element?.parentElement;
if(direct_parent?.matches?.("[data-rmiz-content]")) {
Object.assign(direct_parent.style, {
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
})
}
const parents_parent = direct_parent?.parentElement;
if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
parents_parent.style.width = "100%";
}
}}
/>