Comparison Card

Two-product A-vs-B card with tick/cross feature rows and a winner pill — swap both photos, names, feature rows 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 Comparison Card

Comparison 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.

14 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.

titleText

Which one wins?

productANameText

PRO X · $59

productBNameText

STANDARD · $39

row1Text

Fast wireless charging

row2Text

Water resistant to 50m

row3Text

2-year warranty

verdictText

WINNER · PRO X

bgColorColor

#0E1116

accentColorColor

#C6F24E

textColorColor

#F3F5EE

mutedColorColor

#7C828C

crossColorColor

#565C66

productAImageMedia URL

pexels-photo-23940099.jpeg

productBImageMedia URL

pexels-photo-6476115.jpeg

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-comparison",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#0E1116",
  "variables": {
    "title": "Which one wins?",
    "productAName": "PRO X · $59",
    "productBName": "STANDARD · $39",
    "row1": "Fast wireless charging",
    "row2": "Water resistant to 50m",
    "row3": "2-year warranty",
    "verdict": "WINNER · PRO X",
    "bgColor": "#0E1116",
    "accentColor": "#C6F24E",
    "textColor": "#F3F5EE",
    "mutedColor": "#7C828C",
    "crossColor": "#565C66",
    "productAImage": "https://images.pexels.com/photos/23940099/pexels-photo-23940099.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "productBImage": "https://images.pexels.com/photos/6476115/pexels-photo-6476115.jpeg?auto=compress&cs=tinysrgb&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'><rect width='1080' height='1080' fill='{{bgColor}}'/><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": "TEXT",
      "x": 0,
      "y": 74,
      "width": 1080,
      "anchor": "top-left",
      "track": 4,
      "style": {
        "fontFamily": "Archivo"
      },
      "html": "<div style='font-size:48px; font-weight:800; letter-spacing:-0.02em; color:{{textColor}}; text-align:center;'>{{title}}</div>"
    },
    {
      "type": "IMAGE",
      "src": "{{productAImage}}",
      "x": 80,
      "y": 156,
      "width": 430,
      "height": 340,
      "anchor": "top-left",
      "radius": {
        "tl": 28,
        "tr": 28,
        "bl": 28,
        "br": 28
      },
      "track": 2
    },
    {
      "type": "IMAGE",
      "src": "{{productBImage}}",
      "x": 570,
      "y": 156,
      "width": 430,
      "height": 340,
      "anchor": "top-left",
      "radius": {
        "tl": 28,
        "tr": 28,
        "bl": 28,
        "br": 28
      },
      "track": 2
    },
    {
      "type": "SVG",
      "x": 490,
      "y": 276,
      "width": 100,
      "height": 100,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='48' fill='{{bgColor}}' stroke='{{accentColor}}' stroke-width='2'/><text x='50' y='64' font-family='Archivo, Arial' font-size='38' font-weight='800' fill='{{accentColor}}' text-anchor='middle' letter-spacing='-1'>VS</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 80,
      "y": 512,
      "width": 430,
      "anchor": "top-left",
      "track": 4,
      "text": "{{productAName}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "700",
        "letterSpacing": "0.06em",
        "textAlign": "center",
        "color": "#C6F24E"
      }
    },
    {
      "type": "TEXT",
      "x": 570,
      "y": 512,
      "width": 430,
      "anchor": "top-left",
      "track": 4,
      "text": "{{productBName}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "700",
        "letterSpacing": "0.06em",
        "textAlign": "center",
        "color": "#7C828C"
      }
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 588,
      "width": 920,
      "height": 68,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='920' height='68' viewBox='0 0 920 68' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='67' width='920' height='1' fill='#FFFFFF' fill-opacity='0.1'/><path d='M204 34 L212 43 L228 25' fill='none' stroke='{{accentColor}}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><text x='460' y='40' font-family='Space Grotesk, Arial' font-size='22' font-weight='500' fill='{{textColor}}' text-anchor='middle'>{{row1}}</text><path d='M694 34 L702 43 L718 25' fill='none' stroke='{{accentColor}}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 656,
      "width": 920,
      "height": 68,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='920' height='68' viewBox='0 0 920 68' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='67' width='920' height='1' fill='#FFFFFF' fill-opacity='0.1'/><path d='M204 34 L212 43 L228 25' fill='none' stroke='{{accentColor}}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><text x='460' y='40' font-family='Space Grotesk, Arial' font-size='22' font-weight='500' fill='{{textColor}}' text-anchor='middle'>{{row2}}</text><path d='M695 24 L715 44 M715 24 L695 44' fill='none' stroke='{{crossColor}}' stroke-width='3.5' stroke-linecap='round'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 724,
      "width": 920,
      "height": 68,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='920' height='68' viewBox='0 0 920 68' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='67' width='920' height='1' fill='#FFFFFF' fill-opacity='0.1'/><path d='M204 34 L212 43 L228 25' fill='none' stroke='{{accentColor}}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><text x='460' y='40' font-family='Space Grotesk, Arial' font-size='22' font-weight='500' fill='{{textColor}}' text-anchor='middle'>{{row3}}</text><path d='M695 24 L715 44 M715 24 L695 44' fill='none' stroke='{{crossColor}}' stroke-width='3.5' stroke-linecap='round'/></svg>"
    },
    {
      "type": "SVG",
      "x": 340,
      "y": 838,
      "width": 400,
      "height": 74,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='400' height='74' viewBox='0 0 400 74' xmlns='http://www.w3.org/2000/svg'><rect width='400' height='74' rx='37' fill='{{accentColor}}'/><text x='200' y='47' font-family='Archivo, Arial' font-size='26' font-weight='800' fill='#0E1116' text-anchor='middle' letter-spacing='0.04em'>{{verdict}}</text></svg>"
    }
  ]
}