Bundle Offer Card

Bundle card with three product tiles, bundle price and savings badge — swap the three photos, tile names, 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 Bundle Offer Card

Bundle Offer 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

BUNDLE & SAVE

titleText

The Complete Set

tile1NameText

Cleanser

tile2NameText

Serum

tile3NameText

Moisturiser

bundlePriceText

149

oldTotalText

$220

saveBadgeText

SAVE $71

ctaLabelText

Add bundle to cart

paperColorColor

#EEF3EE

inkColorColor

#13160F

accentColorColor

#1F5C3D

mutedColorColor

#6B7268

img1Media URL

pexels-photo-7772548.jpeg

img2Media URL

pexels-photo-7256136.jpeg

img3Media URL

pexels-photo-4735904.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-bundle",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#EEF3EE",
  "variables": {
    "eyebrow": "BUNDLE & SAVE",
    "title": "The Complete Set",
    "tile1Name": "Cleanser",
    "tile2Name": "Serum",
    "tile3Name": "Moisturiser",
    "bundlePrice": "149",
    "oldTotal": "$220",
    "saveBadge": "SAVE $71",
    "ctaLabel": "Add bundle to cart",
    "paperColor": "#EEF3EE",
    "inkColor": "#13160F",
    "accentColor": "#1F5C3D",
    "mutedColor": "#6B7268",
    "img1": "https://images.pexels.com/photos/7772548/pexels-photo-7772548.jpeg?auto=compress&cs=tinysrgb&w=1620",
    "img2": "https://images.pexels.com/photos/7256136/pexels-photo-7256136.jpeg?auto=compress&cs=tinysrgb&w=1620",
    "img3": "https://images.pexels.com/photos/4735904/pexels-photo-4735904.jpeg?auto=compress&cs=tinysrgb&w=1620"
  },
  "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='{{paperColor}}'/><rect x='40' y='40' width='1000' height='1000' rx='40' fill='none' stroke='{{inkColor}}' stroke-opacity='0.09' stroke-width='1.5'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 90,
      "y": 108,
      "width": 600,
      "anchor": "top-left",
      "track": 4,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "700",
        "letterSpacing": "0.28em",
        "color": "#1F5C3D"
      }
    },
    {
      "type": "TEXT",
      "x": 88,
      "y": 146,
      "width": 700,
      "anchor": "top-left",
      "track": 4,
      "style": {
        "fontFamily": "Bricolage Grotesque"
      },
      "html": "<div style='font-size:64px; font-weight:800; letter-spacing:-0.02em; line-height:1.0; color:{{inkColor}};'>{{title}}</div>"
    },
    {
      "type": "IMAGE",
      "src": "{{img1}}",
      "x": 88,
      "y": 300,
      "width": 286,
      "height": 330,
      "anchor": "top-left",
      "radius": {
        "tl": 26,
        "tr": 26,
        "bl": 26,
        "br": 26
      },
      "track": 2
    },
    {
      "type": "IMAGE",
      "src": "{{img2}}",
      "x": 397,
      "y": 300,
      "width": 286,
      "height": 330,
      "anchor": "top-left",
      "radius": {
        "tl": 26,
        "tr": 26,
        "bl": 26,
        "br": 26
      },
      "track": 2
    },
    {
      "type": "IMAGE",
      "src": "{{img3}}",
      "x": 706,
      "y": 300,
      "width": 286,
      "height": 330,
      "anchor": "top-left",
      "radius": {
        "tl": 26,
        "tr": 26,
        "bl": 26,
        "br": 26
      },
      "track": 2
    },
    {
      "type": "SVG",
      "x": 356,
      "y": 447,
      "width": 40,
      "height": 40,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'><circle cx='20' cy='20' r='20' fill='{{paperColor}}'/><circle cx='20' cy='20' r='19' fill='none' stroke='{{accentColor}}' stroke-opacity='0.4' stroke-width='1.4'/><path d='M20 11 L20 29 M11 20 L29 20' stroke='{{accentColor}}' stroke-width='3' stroke-linecap='round'/></svg>"
    },
    {
      "type": "SVG",
      "x": 665,
      "y": 447,
      "width": 40,
      "height": 40,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'><circle cx='20' cy='20' r='20' fill='{{paperColor}}'/><circle cx='20' cy='20' r='19' fill='none' stroke='{{accentColor}}' stroke-opacity='0.4' stroke-width='1.4'/><path d='M20 11 L20 29 M11 20 L29 20' stroke='{{accentColor}}' stroke-width='3' stroke-linecap='round'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 88,
      "y": 648,
      "width": 286,
      "anchor": "top-left",
      "track": 4,
      "text": "{{tile1Name}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "600",
        "textAlign": "center",
        "color": "#13160F"
      }
    },
    {
      "type": "TEXT",
      "x": 397,
      "y": 648,
      "width": 286,
      "anchor": "top-left",
      "track": 4,
      "text": "{{tile2Name}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "600",
        "textAlign": "center",
        "color": "#13160F"
      }
    },
    {
      "type": "TEXT",
      "x": 706,
      "y": 648,
      "width": 286,
      "anchor": "top-left",
      "track": 4,
      "text": "{{tile3Name}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "600",
        "textAlign": "center",
        "color": "#13160F"
      }
    },
    {
      "type": "SVG",
      "x": 88,
      "y": 716,
      "width": 904,
      "height": 2,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='904' height='2' viewBox='0 0 904 2' xmlns='http://www.w3.org/2000/svg'><rect width='904' height='1' fill='{{inkColor}}' fill-opacity='0.12'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 90,
      "y": 748,
      "width": 400,
      "anchor": "top-left",
      "track": 4,
      "text": "ALL THREE FOR",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "18px",
        "fontWeight": "700",
        "letterSpacing": "0.22em",
        "color": "#1F5C3D"
      }
    },
    {
      "type": "TEXT",
      "x": 86,
      "y": 776,
      "width": 420,
      "anchor": "top-left",
      "track": 4,
      "style": {
        "fontFamily": "Bricolage Grotesque"
      },
      "html": "<div style='color:{{inkColor}}; font-weight:800; letter-spacing:-0.03em;'><span style='font-size:44px; vertical-align:top;'>$</span><span style='font-size:104px;'>{{bundlePrice}}</span></div>"
    },
    {
      "type": "TEXT",
      "x": 344,
      "y": 850,
      "width": 200,
      "anchor": "top-left",
      "track": 4,
      "text": "{{oldTotal}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "34px",
        "fontWeight": "500",
        "textDecoration": "line-through",
        "color": "#6B7268"
      }
    },
    {
      "type": "SVG",
      "x": 700,
      "y": 742,
      "width": 200,
      "height": 46,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='200' height='46' viewBox='0 0 200 46' xmlns='http://www.w3.org/2000/svg'><rect width='200' height='46' rx='12' fill='{{accentColor}}' fill-opacity='0.14'/><text x='24' y='30' font-family='Space Grotesk, Arial' font-size='19' font-weight='700' fill='{{accentColor}}' letter-spacing='0.1em'>{{saveBadge}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 700,
      "y": 806,
      "width": 292,
      "height": 66,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='292' height='66' viewBox='0 0 292 66' xmlns='http://www.w3.org/2000/svg'><rect width='292' height='66' rx='33' fill='{{accentColor}}'/><text x='32' y='41' font-family='Space Grotesk, Arial' font-size='20' font-weight='600' fill='{{paperColor}}' letter-spacing='0.02em'>{{ctaLabel}}</text><path d='M244 33 L262 33 M255 26 L262 33 L255 40' fill='none' stroke='{{paperColor}}' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"
    }
  ]
}