> ## 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 What you will add inside the `` part of your `theme.liquid` file depends. To proceed, there are two entirely different paths to integrate using the shopify app. ## Overview of the two options | | Re-use existing product card template (1) | Implement product card using in product card editor (2) | | ---------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------- | | Can re-use existing product card without a developer | ✅ | ❌ | | Works with advanced product cards (color swatches, size pickers) | ❌ | ✅ | | Customisable without limitations | ❌ | ✅ | | Easy to inspect, debug and develop on | ❌ | ✅ | Need to know the technical details to make a decision? See the [reference](/reference/shopify-app/product-card-rendering#how-does-re-using-the-existing-product-card-template-work) section. ### Choose one of the options below Figure out what snippet in your theme is used to render a product card from a `product` object. This is usually called `product-card.liquid` or `product-grid-item.liquid`. If you can't find it, ask your theme developer. Insert the following code into theme.liquid as outlined in the screenshot below, inserting the code to call your existing product card rendering snippet. Make sure to pass `item.product` as product to your snippet. ```liquid theme={null} {% comment %} Begin Depict section {% endcomment %} {% comment %} End Depict section {% endcomment %} ``` Click to enlarge}> How the <body>-section of your theme.liquid should look

How the <body>-section of your theme.liquid should look

{ // 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%"; } }} /> Proceed with the next steps - inserting the Depict blocks into the page and then check if the product card looks like it should. The following might help fix minor issues: 1. Style issues can be fixed using the style editor in the Depict app configuration. 2. If your image already is in a container with a fixed aspect ratio, set `data-image-aspect-ratio` in the snippet you pasted to `"false"`, otherwise make sure it's set to the correct aspect ratio 3. If your hover image doesn't work, add the `depict-secondary-image` class to the `` element. You can also specify what image source should be used for an `` tag by setting a data attribute like this: `` Add the following code to your `theme.liquid` file, directly after the `` tag: ```tsx theme={null} {% comment %} Begin Depict section {% endcomment %} {% comment %} End Depict section {% endcomment %} ``` Click "Use example template" in the product card editor, then hit "Save"

{ const is_safari = typeof navigator === "undefined" ? false : /^((?!chrome|android).)*safari/i.test(navigator.userAgent); // Safari can't render this image for some reason if(is_safari && element) { element.src = element.src.replaceAll("product-card-editor-setup.svg", "product-card-editor-setup-png.png"); } // 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%"; } }} /> Adjust the type definitions at the bottom of the default ProductCard to the format of the data you receive from our API (we can help you out with those if you ping us on slack). On the left you can now edit the code and styling for the product card. On the right you can preview two states of the product card: the state with data (once loading has completed) and the placeholder state (shown while loading). To make sure that scroll restoration works, make sure your placeholder product card is the same size as your average product card with data. See [this page in the JS-UI guide](/js-ui-guide/setup/product-card) for more details.