Product Thumbnail

Shopify Polaris-style product card showing optional image, title, vendor, SKU, price with optional compare-at strike-through, status badge, and tag chips. Adapted from Polaris ResourceItem + Thumbnail patterns.

Surfaces
webmeet-stageemailpdfapps-script-web
Degraded on
SurfaceNote
googlechatrenders as plain text with price; no image or badge styling
Fields
FieldType
titlestring. Product display name.required
vendorstring. Brand or supplier name.optional
skustring. Stock-keeping unit code.optional
pricestring. Formatted price, e.g. "$49.00".required
compare_at_pricestring. Strike-through original price.optional
statusstring. One of active | draft | archived. Default active.optional
image_urlstring. Product image URL.optional
tagsarray of strings. Flat tag list rendered as chips.optional
Example payload
{
  "type": "product_thumbnail",
  "title": "Product Thumbnail",
  "price": "$29/mo"
}
ARD catalog entry
{
  "identifier": "urn:air:a2uicatalog.ai:atom:product_thumbnail",
  "displayName": "Product Thumbnail",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/product_thumbnail",
  "capabilities": [
    "web",
    "meet-stage",
    "email",
    "pdf",
    "apps-script-web"
  ],
  "description": "Shopify Polaris-style product card showing optional image, title, vendor, SKU, price with optional compare-at strike-through, status badge, and tag chips. Adapted from Polaris ResourceItem + Thumbnail patterns.",
  "representativeQueries": [
    "show a product card with image, price, status badge, and tags",
    "shopify polaris-style product card showing optional image, title, vendor, sku, price with optional c",
    "render a product thumbnail"
  ]
}
← Full ARD catalog Try it live →
Deploy your own renderer

The renderer is open source. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd apps-script-surface/gas-schema-renderer
clasp push && clasp deploy
Full deploy guide →