<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
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
item.product
as product to your snippet.Code to insert
Click to enlarge
Third step
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
theme.liquid
file, directly after the <body>
tag:Second Step
The product card editor before being used
Third Step
The product card editor containg a product card