This page answers more in-depth questions about the product card rendering in the shopify app.
DEPICT_TRACER_TITLE
). On every page, the server renders a product card using your provided .liquid product card code for every permutation of features. These product cards are the children of the hidden #depict-cards
element. The JavaScript on the client which runs our SDK then picks the right pre-rendered product card and replaces all the data in it with the data of the actual product.
<div />
is the same as document.createElement("div")
). You can use solid-js’ powerful signals and reactivity to create interactive features. Every ProductCard
runs in a solid-js context so just use onCleanup
if you need to clean up any event listeners or other resource. When you press save in the product card or style editor, a bundle is built specifically for your site for both legacy and modern browsers and, once finished saving, will be served from our CDN for your pages’ visitors.
When using the product card editor, the #depict-cards
element should not have children and is only used for getting essential data about the page via data-attributes.