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.
| Surface | Note |
|---|---|
| googlechat | renders as plain text with price; no image or badge styling |
| Field | Type | |
|---|---|---|
| title | string. Product display name. | required |
| vendor | string. Brand or supplier name. | optional |
| sku | string. Stock-keeping unit code. | optional |
| price | string. Formatted price, e.g. "$49.00". | required |
| compare_at_price | string. Strike-through original price. | optional |
| status | string. One of active | draft | archived. Default active. | optional |
| image_url | string. Product image URL. | optional |
| tags | array of strings. Flat tag list rendered as chips. | optional |
{
"type": "product_thumbnail",
"title": "Product Thumbnail",
"price": "$29/mo"
}
{
"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"
]
}
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 →