Setup
Depict blocks
Customisation
Preparing your theme - <body>
What you will add inside the <body> 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 | ❌ | ✅ |
Choose one of the options below
First step
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.
Second step
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.
{% comment %}
Begin Depict <body> section
{% endcomment %}
<div id="depict-cards" style="display: none"
data-config="{{ shop.metafields.depict.config | escape }}"
data-currency-format="{% if settings.currency_code_enable %}{{ 123456 | money_with_currency }}{% else %}{{ 123456 | money }}{% endif %}"
data-currency-format-zero="{% if settings.currency_code_enable %}{{ 123400 | money_with_currency }}{% else %}{{ 123400 | money }}{% endif %}"
data-locale="{{ shop.locale }}"
data-depict-market="{{ localization.country.iso_code | downcase }}"
data-search-page-path="/search"
data-alternative-currency-format="{% if settings.currency_code_enable %}{{ 123456 | money }}{% else %}{{ 123456 | money_with_currency }}{% endif %}"
data-alternative-currency-format-zero="{% if settings.currency_code_enable %}{{ 123400 | money }}{% else %}{{ 123400 | money_with_currency }}{% endif %}"
data-image-aspect-ratio="{{ section.settings.image_ratio | default: '1' }}"
>
{% comment %}
Pre-generate a product card from the liquid template on the server with known "tracer" values, for the different variants of the product cards.
{% endcomment %}
{% for item in shop.metafields.depict.tracerproducts.value.items %}
<template class="depict-card" data-when="{{ item.when | escape }}" data-product="{{ item.product | json | escape }}">
{% comment %}
INSERT YOUR PRODUCT CARD RENDERING CODE HERE
{% endcomment %}
</template>
{% endfor %}
<script>
window.depict_product_card_generator = (product, get_card_element, insert_product_data) => {
// If something doesn't work quite right, this function can be used to fix things up.
const { card_element, tracer_data } = get_card_element(product);
insert_product_data(card_element, product, tracer_data);
return card_element;
}
</script>
</div>
{% comment %}
End Depict <body> section
{% endcomment %}
Click to enlarge
Third step
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:
- Style issues can be fixed using the style editor in the Depict app configuration.
- If your image already is in a container with a fixed aspect ratio, set
data-image-aspect-ratioin the snippet you pasted to"false", otherwise make sure it’s set to the correct aspect ratio - If your hover image doesn’t work, add the
depict-secondary-imageclass to the<img>element. You can also specify what image source should be used for an<img>tag by setting a data attribute like this:<img data-src-key="product.media[1].src" />
First Step
Add the following code to your theme.liquid file, directly after the <body> tag:
{% comment %}
Begin Depict <body> section
{% endcomment %}
<div id="depict-cards" style="display: none"
data-config="{{ shop.metafields.depict.config | escape }}"
data-currency-format="{% if settings.currency_code_enable %}{{ 123456 | money_with_currency }}{% else %}{{ 123456 | money }}{% endif %}"
data-currency-format-zero="{% if settings.currency_code_enable %}{{ 123400 | money_with_currency }}{% else %}{{ 123400 | money }}{% endif %}"
data-locale="{{ shop.locale }}"
data-depict-market="{{ localization.country.iso_code | downcase }}"
data-search-page-path="/search"
data-alternative-currency-format="{% if settings.currency_code_enable %}{{ 123456 | money }}{% else %}{{ 123456 | money_with_currency }}{% endif %}"
data-alternative-currency-format-zero="{% if settings.currency_code_enable %}{{ 123400 | money }}{% else %}{{ 123400 | money_with_currency }}{% endif %}"
data-image-aspect-ratio="{{ section.settings.image_ratio | default: '1' }}"
>
</div>
{% comment %}
End Depict <body> section
{% endcomment %}
Second Step
Click “Use example template” in the product card editor, then hit “Save”
The product card editor before being used
Third Step
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 for more details.
The product card editor containg a product card
Was this page helpful?