Best Seller Card

Best-seller card with #1 seal, star-rating row and ribbon — swap product photo, name, rating, review count, price and accent.

Type: Image
Format: Instagram Post · 1:1
Orientation: Square

Variablesphoto

Open in editor

Free template · opens in the editor, no account required.

Customize Best Seller Card

Best Seller Card is a ready-to-render E-commerce image design formatted for Instagram Post · 1:1 and support for variables, photo. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

16 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.

eyebrowText

CUSTOMER FAVOURITE

rankLabelText

ribbonLabelText

BEST SELLER

productNameText

Halo Aroma Diffuser

ratingValueText

4.9

reviewCountText

2,481 reviews

currencyText

priceText

centsText

.00

ctaLabelText

Shop best seller

bgColorColor

#0B0B10

accentColorColor

#E4B85C

textColorColor

#F4F1EA

mutedColorColor

#8F8B99

starColor

#E4B85C

productImageMedia URL

photo-1664959784172-fafcb579808b

The exact JSON payload

This is the full render config — POST it to the API, or open it in the editor to tweak.

Open in editor ↗

{
  "type": "image",
  "name": "img-ecom-best-seller",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#0B0B10",
  "variables": {
    "eyebrow": "CUSTOMER FAVOURITE",
    "rankLabel": "#1",
    "ribbonLabel": "BEST SELLER",
    "productName": "Halo Aroma Diffuser",
    "ratingValue": "4.9",
    "reviewCount": "2,481 reviews",
    "currency": "$",
    "price": "89",
    "cents": ".00",
    "ctaLabel": "Shop best seller",
    "bgColor": "#0B0B10",
    "accentColor": "#E4B85C",
    "textColor": "#F4F1EA",
    "mutedColor": "#8F8B99",
    "star": "#E4B85C",
    "productImage": "https://images.unsplash.com/photo-1664959784172-fafcb579808b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3w3MDgwMTZ8MHwxfHNlYXJjaHw1fHxwcm9kdWN0JTIwb24lMjBwaW5rJTIwYmFja2dyb3VuZHxlbnwwfHx8fDE3ODM1MjY5MTN8MA&ixlib=rb-4.1.0&q=80&w=1600"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1080,
      "height": 1080,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1080' height='1080' viewBox='0 0 1080 1080' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='g' cx='0.2' cy='0.15' r='0.8'><stop offset='0' stop-color='#E4B85C' stop-opacity='0.2'/><stop offset='1' stop-color='#E4B85C' stop-opacity='0'/></radialGradient></defs><rect width='1080' height='1080' fill='{{bgColor}}'/><rect width='1080' height='1080' fill='url(#g)'/><rect x='40' y='40' width='1000' height='1000' rx='40' fill='none' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/></svg>"
    },
    {
      "type": "IMAGE",
      "src": "{{productImage}}",
      "x": 88,
      "y": 176,
      "width": 430,
      "height": 728,
      "anchor": "top-left",
      "radius": {
        "tl": 32,
        "tr": 32,
        "bl": 32,
        "br": 32
      },
      "track": 2
    },
    {
      "type": "SVG",
      "x": 452,
      "y": 150,
      "width": 132,
      "height": 132,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='132' height='132' viewBox='0 0 132 132' xmlns='http://www.w3.org/2000/svg'><circle cx='66' cy='66' r='64' fill='{{accentColor}}'/><text x='66' y='88' font-family='Syne, Arial' font-size='58' font-weight='800' fill='#0B0B10' text-anchor='middle' letter-spacing='-2'>{{rankLabel}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 560,
      "y": 224,
      "width": 250,
      "height": 44,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='250' height='44' viewBox='0 0 250 44' xmlns='http://www.w3.org/2000/svg'><path d='M0 0 H222 L250 22 L222 44 H0 Z' fill='{{accentColor}}'/><text x='20' y='29' font-family='Space Grotesk, Arial' font-size='19' font-weight='700' fill='#0B0B10' letter-spacing='2.5'>{{ribbonLabel}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 560,
      "y": 300,
      "width": 430,
      "anchor": "top-left",
      "text": "{{eyebrow}}",
      "track": 4,
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "21px",
        "fontWeight": "600",
        "letterSpacing": "0.24em",
        "color": "#E4B85C"
      }
    },
    {
      "type": "TEXT",
      "x": 558,
      "y": 340,
      "width": 440,
      "anchor": "top-left",
      "track": 4,
      "style": {
        "fontFamily": "Syne"
      },
      "html": "<div style='font-size:60px; font-weight:800; line-height:0.98; letter-spacing:-0.02em; color:{{textColor}};'>{{productName}}</div>"
    },
    {
      "type": "SVG",
      "x": 560,
      "y": 512,
      "width": 190,
      "height": 32,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='190' height='32' viewBox='0 0 190 32' xmlns='http://www.w3.org/2000/svg'><polygon points='16,1 19.5,11.2 30.3,11.4 21.7,17.9 24.8,28.1 16,22 7.2,28.1 10.3,17.9 1.7,11.4 12.5,11.2' fill='{{star}}'/><polygon points='54,1 57.5,11.2 68.3,11.4 59.7,17.9 62.8,28.1 54,22 45.2,28.1 48.3,17.9 39.7,11.4 50.5,11.2' fill='{{star}}'/><polygon points='92,1 95.5,11.2 106.3,11.4 97.7,17.9 100.8,28.1 92,22 83.2,28.1 86.3,17.9 77.7,11.4 88.5,11.2' fill='{{star}}'/><polygon points='130,1 133.5,11.2 144.3,11.4 135.7,17.9 138.8,28.1 130,22 121.2,28.1 124.3,17.9 115.7,11.4 126.5,11.2' fill='{{star}}'/><polygon points='168,1 171.5,11.2 182.3,11.4 173.7,17.9 176.8,28.1 168,22 159.2,28.1 162.3,17.9 155.7,11.4 166.5,11.2' fill='{{star}}'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 764,
      "y": 512,
      "width": 240,
      "anchor": "top-left",
      "track": 4,
      "style": {
        "fontFamily": "Space Grotesk"
      },
      "html": "<div style='font-size:24px; font-weight:700; color:{{textColor}};'>{{ratingValue}} <span style='font-weight:500; color:{{mutedColor}};'>&#183; {{reviewCount}}</span></div>"
    },
    {
      "type": "TEXT",
      "x": 558,
      "y": 616,
      "width": 300,
      "anchor": "top-left",
      "track": 4,
      "style": {
        "fontFamily": "Syne"
      },
      "html": "<div style='color:{{textColor}}; font-weight:800; letter-spacing:-0.02em;'><span style='font-size:36px; vertical-align:top;'>{{currency}}</span><span style='font-size:92px;'>{{price}}</span><span style='font-size:32px; color:{{mutedColor}};'>{{cents}}</span></div>"
    },
    {
      "type": "SVG",
      "x": 560,
      "y": 800,
      "width": 300,
      "height": 64,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='300' height='64' viewBox='0 0 300 64' xmlns='http://www.w3.org/2000/svg'><rect width='300' height='64' rx='32' fill='{{accentColor}}'/><text x='34' y='40' font-family='Space Grotesk, Arial' font-size='21' font-weight='600' fill='#0B0B10' letter-spacing='0.02em'>{{ctaLabel}}</text><path d='M256 32 L274 32 M267 25 L274 32 L267 39' fill='none' stroke='#0B0B10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"
    }
  ]
}