Gift Guide Card

Warm festive gift-guide cover with serif headline and editor's-pick tag — swap product photo, title, price and accent.

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

Variablesphoto

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

Customize Gift Guide Card

Gift Guide 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.

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.

eyebrowText

2026 EDIT · FOR HER

titleAText

Gifts they'll

titleBText

adore

subtitleText

Hand-picked treats, all under $100.

tagLabelText

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-gift-guide",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#5A1F1F",
  "variables": {
    "eyebrow": "2026 EDIT · FOR HER",
    "titleA": "Gifts they'll",
    "titleB": "adore",
    "subtitle": "Hand-picked treats, all under $100.",
    "tagLabel": "EDITOR'S PICK",
    "priceLabel": "From $48",
    "brand": "MAISON NOIR",
    "bgColor": "#5A1F1F",
    "creamColor": "#F6EDE1",
    "goldColor": "#C9A24B",
    "mutedCream": "#D8C6B6",
    "productImage": "https://images.pexels.com/photos/13534508/pexels-photo-13534508.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'><defs><radialGradient id='g' cx='0.85' cy='0.2' r='0.8'><stop offset='0' stop-color='#C9A24B' stop-opacity='0.3'/><stop offset='1' stop-color='#C9A24B' stop-opacity='0'/></radialGradient></defs><rect width='1080' height='1080' fill='{{bgColor}}'/><rect width='1080' height='1080' fill='url(#g)'/><rect x='38' y='38' width='1004' height='1004' rx='8' fill='none' stroke='{{goldColor}}' stroke-opacity='0.45' stroke-width='1.4'/></svg>"
    },
    {
      "type": "SVG",
      "x": 88,
      "y": 104,
      "width": 320,
      "height": 46,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='320' height='46' viewBox='0 0 320 46' xmlns='http://www.w3.org/2000/svg'><rect x='0.75' y='0.75' width='318.5' height='44.5' rx='22.25' fill='none' stroke='{{goldColor}}' stroke-opacity='0.7' stroke-width='1.3'/><circle cx='26' cy='23' r='5' fill='{{goldColor}}'/><text x='44' y='30' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='{{goldColor}}' letter-spacing='3'>{{eyebrow}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 86,
      "y": 208,
      "width": 470,
      "anchor": "top-left",
      "track": 4,
      "style": {
        "fontFamily": "DM Serif Display"
      },
      "html": "<div style='font-size:96px; font-weight:400; line-height:0.98; letter-spacing:-0.01em; color:{{creamColor}};'>{{titleA}}<br><span style='font-style:italic; color:{{goldColor}};'>{{titleB}}</span></div>"
    },
    {
      "type": "TEXT",
      "x": 88,
      "y": 520,
      "width": 430,
      "anchor": "top-left",
      "track": 4,
      "text": "{{subtitle}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "26px",
        "fontWeight": "400",
        "lineHeight": "1.4",
        "color": "#D8C6B6"
      }
    },
    {
      "type": "IMAGE",
      "src": "{{productImage}}",
      "x": 594,
      "y": 300,
      "width": 398,
      "height": 560,
      "anchor": "top-left",
      "radius": {
        "tl": 30,
        "tr": 30,
        "bl": 30,
        "br": 30
      },
      "track": 2
    },
    {
      "type": "SVG",
      "x": 540,
      "y": 326,
      "width": 220,
      "height": 44,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='220' height='44' viewBox='0 0 220 44' xmlns='http://www.w3.org/2000/svg'><rect width='220' height='44' rx='22' fill='{{goldColor}}'/><polygon points='22,13 24.1,19.1 30.6,19.2 25.4,23.1 27.3,29.3 22,25.6 16.7,29.3 18.6,23.1 13.4,19.2 19.9,19.1' fill='#5A1F1F'/><text x='48' y='29' font-family='Space Grotesk, Arial' font-size='17' font-weight='700' fill='#5A1F1F' letter-spacing='1.5'>{{tagLabel}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 620,
      "y": 792,
      "width": 180,
      "height": 52,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='180' height='52' viewBox='0 0 180 52' xmlns='http://www.w3.org/2000/svg'><rect x='0.75' y='0.75' width='178.5' height='50.5' rx='25.25' fill='#5A1F1F' fill-opacity='0.72' stroke='{{goldColor}}' stroke-opacity='0.6' stroke-width='1.2'/><text x='24' y='33' font-family='Space Grotesk, Arial' font-size='20' font-weight='600' fill='{{creamColor}}'>{{priceLabel}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 88,
      "y": 918,
      "width": 400,
      "anchor": "top-left",
      "track": 4,
      "text": "{{brand}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "600",
        "letterSpacing": "0.22em",
        "color": "#C9A24B"
      }
    }
  ]
}