Short codes
Product Card (in loop)
15 tokens under the product.* namespace. Drop these anywhere the SSR layer can see them — HTML, attribute values, JS, or CSS.
Overview
15 tokens under the product.* scope. Resolves on loop:product-card pages only.
Usage
Drop a token anywhere the SSR layer will see it — HTML body, attribute value, inline JS, or inline CSS.
Inline in markup
<mmm-pdp-title>{{product.title}}</mmm-pdp-title>
<!-- rendered -> -->
<mmm-pdp-title>Peace Lily Plant</mmm-pdp-title>Inside attribute values
<a href="/p/{{pdp.slug}}" title="Buy {{pdp.title}} for {{pdp.price}}">Shop</a>Identity & flags 9
TokenPage bindingComponentDescription & sample
{{product.title}}loop:product-cardproduct-title.jsProduct name within a card loopSample:
Peace Lily Plant{{product.slug}}loop:product-cardproduct-card.jsProduct slug for the PDP linkSample:
peace-lily-plant-indoor{{product.label}}loop:product-cardproduct-card.jsPromotional label badgeSample:
Exclusive{{product.price}}loop:product-cardproduct-price.jsSelling price (formatted) currencySample:
₹ 1,000{{product.image}}loop:product-cardproduct-media.jsPrimary product image (full size) urlSample:
https://cdn.commmerce.com/.../image.webp{{product.rating}}loop:product-cardproduct-rating.jsAverage ratingSample:
4.5{{product.available}}loop:product-cardproduct-card.jsIn-stock flag booleanSample:
Yes{{product.has_variants}}loop:product-cardproduct-variants.jsWhether the product has variant options booleanSample:
Yes{{product.wishlisted}}loop:product-cardproduct-wishlist.jsWishlist state booleanSample:
NoCart 1
TokenPage bindingComponentDescription & sample
{{product.cart.qty}}loop:product-cardproduct-add-to-cart.jsQuantity already in cart numberSample:
0Image 1
TokenPage bindingComponentDescription & sample
{{product.image.thumb}}loop:product-cardproduct-media.jsPrimary product image (thumbnail) urlSample:
https://cdn.commmerce.com/.../thumb.webpPrice 3
TokenPage bindingComponentDescription & sample
{{product.price.selling}}loop:product-cardproduct-price.jsSelling price (raw number) numberSample:
1000{{product.price.original}}loop:product-cardproduct-price.jsOriginal price (formatted) currencySample:
₹ 2,000{{product.price.discount}}loop:product-cardproduct-discount-badge.jsDiscount percentageSample:
50% OFFRating 1
TokenPage bindingComponentDescription & sample
{{product.rating.count}}loop:product-cardproduct-rating.jsTotal ratings numberSample:
328Tips
- Tokens are case-sensitive —
{{product.title}}resolves;{{PRODUCT.TITLE}}does not. - Whitespace inside the braces is tolerated:
{{ product.title }}works identically. - Unresolvable tokens fall through as empty strings rather than rendering the raw placeholder, so missing-data states stay clean.