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.
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 | ❌ | ✅ |
Option 1: Re-use existing .liquid product card template
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.
Code to insert
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:
data-image-aspect-ratio
in the snippet you pasted to "false"
, otherwise make sure it’s set to the correct aspect ratiodepict-secondary-image
class 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" />
Option 2: Implement product card using TSX and Sass in the product card editor
First Step
Add the following code to your theme.liquid
file, directly after the <body>
tag:
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
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.
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 | ❌ | ✅ |
Option 1: Re-use existing .liquid product card template
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.
Code to insert
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:
data-image-aspect-ratio
in the snippet you pasted to "false"
, otherwise make sure it’s set to the correct aspect ratiodepict-secondary-image
class 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" />
Option 2: Implement product card using TSX and Sass in the product card editor
First Step
Add the following code to your theme.liquid
file, directly after the <body>
tag:
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