Flash Sale Banner

High-energy full-bleed flash-sale post with promo-code chip and deadline — swap product photo, headline, code 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 Flash Sale Banner

Flash Sale Banner 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.

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

brandText

VOLT SUPPLY

eyebrowText

48 HOURS ONLY

line1Text

FLASH

line2Text

SALE

offerText

UP TO 50% OFF SITEWIDE

promoLabelText

USE CODE

promoCodeText

FLASH50

deadlineText

Ends Sunday · 11:59 PM

accentColorColor

#F6B93B

inkColorColor

#0E0C08

textColorColor

#FFFFFF

productImageMedia URL

photo-1628834673318-62bd8be938c8

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-flash-sale",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#0E0C08",
  "variables": {
    "brand": "VOLT SUPPLY",
    "eyebrow": "48 HOURS ONLY",
    "line1": "FLASH",
    "line2": "SALE",
    "offer": "UP TO 50% OFF SITEWIDE",
    "promoLabel": "USE CODE",
    "promoCode": "FLASH50",
    "deadline": "Ends Sunday · 11:59 PM",
    "accentColor": "#F6B93B",
    "inkColor": "#0E0C08",
    "textColor": "#FFFFFF",
    "productImage": "https://images.unsplash.com/photo-1628834673318-62bd8be938c8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3w3MDgwMTZ8MHwxfHNlYXJjaHwzfHxwcm9kdWN0JTIwb24lMjBwaW5rJTIwYmFja2dyb3VuZHxlbnwwfHx8fDE3ODM1MjY5MTN8MA&ixlib=rb-4.1.0&q=80&w=1600"
  },
  "visuals": [
    {
      "type": "IMAGE",
      "src": "{{productImage}}",
      "width": 1080,
      "height": 1080,
      "position": "center-center",
      "resize": "cover",
      "track": 0
    },
    {
      "type": "SVG",
      "width": 1080,
      "height": 1080,
      "position": "center-center",
      "track": 1,
      "svg": "<svg width='1080' height='1080' viewBox='0 0 1080 1080' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='sy' x1='0' y1='1' x2='0' y2='0'><stop offset='0' stop-color='#0E0C08' stop-opacity='0.95'/><stop offset='0.5' stop-color='#0E0C08' stop-opacity='0.55'/><stop offset='1' stop-color='#0E0C08' stop-opacity='0.15'/></linearGradient><radialGradient id='gl' cx='0.15' cy='0.85' r='0.75'><stop offset='0' stop-color='#F6B93B' stop-opacity='0.24'/><stop offset='1' stop-color='#F6B93B' stop-opacity='0'/></radialGradient></defs><rect width='1080' height='1080' fill='url(#sy)'/><rect width='1080' height='1080' fill='url(#gl)'/></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 74,
      "width": 232,
      "height": 46,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='232' height='46' viewBox='0 0 232 46' xmlns='http://www.w3.org/2000/svg'><rect x='0.75' y='0.75' width='230.5' height='44.5' rx='22.25' fill='#FFFFFF' fill-opacity='0.06' stroke='#FFFFFF' stroke-opacity='0.22' stroke-width='1.2'/><circle cx='26' cy='23' r='6' fill='{{accentColor}}'/><text x='46' y='30' font-family='Space Grotesk, Arial' font-size='18' font-weight='700' fill='#FFFFFF' letter-spacing='2.5'>{{brand}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 74,
      "y": 470,
      "width": 700,
      "anchor": "top-left",
      "track": 5,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "27px",
        "fontWeight": "700",
        "letterSpacing": "0.3em",
        "color": "#F6B93B"
      }
    },
    {
      "type": "TEXT",
      "x": 70,
      "y": 508,
      "width": 900,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Anton"
      },
      "html": "<div style='font-size:200px; font-weight:400; line-height:0.86; letter-spacing:-0.01em; color:{{textColor}}; text-transform:uppercase;'>{{line1}}<br><span style='color:{{accentColor}};'>{{line2}}</span></div>"
    },
    {
      "type": "TEXT",
      "x": 74,
      "y": 872,
      "width": 700,
      "anchor": "top-left",
      "track": 5,
      "text": "{{offer}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "34px",
        "fontWeight": "600",
        "letterSpacing": "0.02em",
        "color": "#FFFFFF"
      }
    },
    {
      "type": "SVG",
      "x": 74,
      "y": 936,
      "width": 372,
      "height": 62,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='372' height='62' viewBox='0 0 372 62' xmlns='http://www.w3.org/2000/svg'><rect width='372' height='62' rx='12' fill='{{accentColor}}'/><text x='22' y='38' font-family='Space Grotesk, Arial' font-size='16' font-weight='700' fill='#0E0C08' letter-spacing='0.1em'>{{promoLabel}}</text><line x1='148' y1='16' x2='148' y2='46' stroke='#0E0C08' stroke-opacity='0.35' stroke-width='1.5'/><text x='168' y='40' font-family='Space Grotesk, Arial' font-size='27' font-weight='700' fill='#0E0C08' letter-spacing='0.06em'>{{promoCode}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 470,
      "y": 952,
      "width": 540,
      "anchor": "top-left",
      "track": 5,
      "text": "{{deadline}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "500",
        "letterSpacing": "0.04em",
        "color": "#E7E2D6"
      }
    }
  ]
}