Product sale card — starter template

A product on sale: the store, a product name that shrinks to fit, the price, the old price or any note, a star and review line, a Shop now button, the photo on the right and a starburst sticker. Every word is a variable, so it localises and works from a signed URL.

Make it yours

Copy the starter into your account once; from then on it is a template id you render with new variables. Creating and reading templates is free.

curl -s https://api.imageapis.com/v1/starters/product-sale -H 'X-API-Key: YOUR_KEY' | jq .template > product-sale.json
curl -X POST https://api.imageapis.com/v1/templates -H 'X-API-Key: YOUR_KEY' \
  -H 'Content-Type: application/json' -d @product-sale.json
# → { "id": "tpl_…", "object": "template", … }

Change any layer by name at render time with modifications, or change the design itself in the editor and save it back with PUT /v1/templates/<id>.

Layers

Name	Type	x, y	Size	Content
`photo`	image	600, 0	600 × 630	{{photo}}
`store`	text	64, 56	480 × 32	{{store}}
`product`	text	64, 108	480 × 200	{{product}}
`price`	text	64, 330	400 × 84	{{price}}
`note`	text	64, 418	480 × 32	{{note}}
`star`	icon	64, 474	26 × 26
`rating`	text	100, 474	444 × 26	{{rating}}
`cta`	text	64, 528	210 × 54	{{cta}}
`sticker`	shape	640, 40	188 × 188
`badge`	text	666, 92	136 × 84	{{badge}}

The template

Show the JSON (10 layers)

{
  "name": "Product sale",
  "width": 1200,
  "height": 630,
  "background": "#ffffff",
  "layers": [
    {
      "name": "photo",
      "type": "image",
      "x": 600,
      "y": 0,
      "width": 600,
      "height": 630,
      "src": "{{photo}}",
      "fit": "cover"
    },
    {
      "name": "store",
      "type": "text",
      "x": 64,
      "y": 56,
      "width": 480,
      "height": 32,
      "text": "{{store}}",
      "font": "Inter",
      "weight": 700,
      "size": 20,
      "color": "#475569",
      "transform": "uppercase",
      "letter_spacing": 2,
      "valign": "middle"
    },
    {
      "name": "product",
      "type": "text",
      "x": 64,
      "y": 108,
      "width": 480,
      "height": 200,
      "text": "{{product}}",
      "font": "Inter",
      "weight": 800,
      "size": 56,
      "color": "#0b1220",
      "line_height": 1.08,
      "letter_spacing": -1,
      "fit": "shrink",
      "max_lines": 4,
      "min_size": 28
    },
    {
      "name": "price",
      "type": "text",
      "x": 64,
      "y": 330,
      "width": 400,
      "height": 84,
      "text": "{{price}}",
      "font": "Inter",
      "weight": 800,
      "size": 76,
      "color": "#0b1220",
      "letter_spacing": -2,
      "fit": "shrink",
      "max_lines": 1,
      "valign": "middle"
    },
    {
      "name": "note",
      "type": "text",
      "x": 64,
      "y": 418,
      "width": 480,
      "height": 32,
      "text": "{{note}}",
      "font": "Inter",
      "weight": 500,
      "size": 24,
      "color": "#64748b",
      "valign": "middle",
      "fit": "shrink",
      "max_lines": 1
    },
    {
      "name": "star",
      "type": "icon",
      "icon": "tabler-filled:star",
      "x": 64,
      "y": 474,
      "width": 26,
      "height": 26,
      "color": "#f59e0b"
    },
    {
      "name": "rating",
      "type": "text",
      "x": 100,
      "y": 474,
      "width": 444,
      "height": 26,
      "text": "{{rating}}",
      "font": "Inter",
      "weight": 500,
      "size": 19,
      "color": "#475569",
      "valign": "middle",
      "fit": "shrink",
      "max_lines": 1
    },
    {
      "name": "cta",
      "type": "text",
      "x": 64,
      "y": 528,
      "width": 210,
      "height": 54,
      "text": "{{cta}}",
      "font": "Inter",
      "weight": 700,
      "size": 22,
      "color": "#ffffff",
      "background": "#0b1220",
      "radius": 27,
      "align": "center",
      "valign": "middle"
    },
    {
      "name": "sticker",
      "type": "shape",
      "shape": "starburst",
      "points": 18,
      "x": 640,
      "y": 40,
      "width": 188,
      "height": 188,
      "fill": "#ef4444",
      "rotation": -10
    },
    {
      "name": "badge",
      "type": "text",
      "x": 666,
      "y": 92,
      "width": 136,
      "height": 84,
      "text": "{{badge}}",
      "font": "Inter",
      "weight": 900,
      "size": 42,
      "color": "#ffffff",
      "align": "center",
      "valign": "middle",
      "rotation": -10,
      "line_height": 1,
      "fit": "shrink",
      "max_lines": 2
    }
  ]
}