Best Seller Spotlight

#1-badge intro, star rating, verified-buyer quote card (toggleable) and CTA.

Type: Video
Format: Instagram Reel · 9:16
Orientation: Portrait
Duration: 15.7s
Scenes: 4
Render cost: $0.00392 / render

VariablesConditional scenesgif

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

Customize Best Seller Spotlight

Best Seller Spotlight is a ready-to-render E-commerce video design formatted for Instagram Reel · 9:16 with 4 scenes and support for variables, conditional scenes, gif. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

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

brandNameText

AURAL

productNameText

Studio One Headphones

badgeTextText

#1 BEST SELLER

ratingText

4.9

reviewCountText

12,400+

sellingPointText

The five-star sound everyone keeps talking about.

quoteText

I own three pairs of premium headphones. These are the only ones I actually reach for.

quoteAuthorText

Maya R. — verified buyer

showQuoteToggle

on

ctaTextText

See why it's #1

productImageMedia URL

pexels-photo-7772548.jpeg

darkImageMedia URL

pexels-photo-8597722.jpeg

musicUrlMedia URL

audio_3f375fdf97.mp3

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 ↗

{
  "name": "ecom-best-seller",
  "resolution": "instagram-reel",
  "frameRate": 30,
  "backgroundColor": "#0E1626",
  "outputFormat": "mp4",
  "variables": {
    "brandName": "AURAL",
    "productName": "Studio One Headphones",
    "badgeText": "#1 BEST SELLER",
    "rating": "4.9",
    "reviewCount": "12,400+",
    "sellingPoint": "The five-star sound everyone keeps talking about.",
    "quote": "I own three pairs of premium headphones. These are the only ones I actually reach for.",
    "quoteAuthor": "Maya R. — verified buyer",
    "showQuote": true,
    "ctaText": "See why it's #1",
    "productImage": "https://images.pexels.com/photos/7772548/pexels-photo-7772548.jpeg?auto=compress&cs=tinysrgb&w=1620",
    "darkImage": "https://images.pexels.com/photos/8597722/pexels-photo-8597722.jpeg?auto=compress&cs=tinysrgb&w=1620",
    "musicUrl": "https://cdn.pixabay.com/audio/2026/02/24/audio_3f375fdf97.mp3"
  },
  "scenes": [
    {
      "id": "crown",
      "duration": 3.4,
      "backgroundColor": "#0E1626",
      "transition": "circleopen",
      "transitionId": "product",
      "transitionDuration": 0.6,
      "visuals": [
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 3.4,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='bsGlow' cx='0.5' cy='0.45' r='0.8'><stop offset='0' stop-color='#1B2A45'/><stop offset='1' stop-color='#0E1626'/></radialGradient></defs><rect width='1080' height='1920' fill='url(#bsGlow)'/><circle cx='540' cy='860' r='300' fill='none' stroke='rgba(217,164,65,0.5)' stroke-width='2'/><circle cx='540' cy='860' r='340' fill='none' stroke='rgba(217,164,65,0.18)' stroke-width='1.5'/><path d='M470 806 L510 846 L540 776 L570 846 L610 806 L598 872 L482 872 Z' fill='#D9A441'/></svg>"
        },
        {
          "type": "GIF",
          "src": "https://media.giphy.com/media/qsJrFdy5Jo1ln1ifHe/giphy.gif",
          "x": 540,
          "y": 860,
          "width": 720,
          "height": 720,
          "anchor": "center-center",
          "opacity": 0.55,
          "track": 1,
          "enterBegin": 0.2,
          "enterEnd": 0.5,
          "enterAnimation": "fade",
          "exitEnd": 3.4
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 940,
          "width": 900,
          "anchor": "top-center",
          "track": 2,
          "enterBegin": 0.3,
          "enterEnd": 0.75,
          "enterAnimation": "circleopen",
          "exitEnd": 3.4,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='text-align:center; color:#F5F1E8; font-size:72px; line-height:1.05; font-weight:800; letter-spacing:-1px;'>{{badgeText}}</div><div style='margin-top:16px; text-align:center; color:#8DA0BF; font-size:28px; font-weight:600; letter-spacing:4px;'>{{brandName}} · AUDIO</div>"
        }
      ]
    },
    {
      "id": "product",
      "duration": 5.2,
      "backgroundColor": "#0E1626",
      "transition": "fade",
      "transitionId": "review",
      "transitionDuration": 0.55,
      "visuals": [
        {
          "type": "IMAGE",
          "src": "{{productImage}}",
          "width": 1080,
          "height": 1920,
          "position": "center-center",
          "resize": "cover",
          "zoom": true,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 5.2
        },
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 1,
          "enterBegin": 0,
          "exitEnd": 5.2,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bsShade' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='#0E1626' stop-opacity='0.45'/><stop offset='0.45' stop-color='#0E1626' stop-opacity='0.02'/><stop offset='1' stop-color='#0E1626' stop-opacity='0.94'/></linearGradient></defs><rect width='1080' height='1920' fill='url(#bsShade)'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 140,
          "anchor": "top-center",
          "track": 2,
          "enterBegin": 0.15,
          "enterEnd": 0.55,
          "enterAnimation": "smoothdown",
          "exitEnd": 5.2,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='display:inline-block; background:#D9A441; color:#0E1626; border-radius:999px; padding:14px 36px; font-size:27px; font-weight:800; letter-spacing:3px;'>★ {{badgeText}}</div>"
        },
        {
          "type": "SVG",
          "x": 80,
          "y": 1300,
          "width": 420,
          "height": 72,
          "anchor": "top-left",
          "track": 4,
          "enterBegin": 0.9,
          "enterEnd": 1.3,
          "enterAnimation": "smoothleft",
          "exitEnd": 5.2,
          "svg": "<svg width='420' height='72' viewBox='0 0 420 72' xmlns='http://www.w3.org/2000/svg'><path d='M36 6 L45 27 L68 29 L51 44 L56 66 L36 54 L16 66 L21 44 L4 29 L27 27 Z' fill='#D9A441'/><path d='M120 6 L129 27 L152 29 L135 44 L140 66 L120 54 L100 66 L105 44 L88 29 L111 27 Z' fill='#D9A441'/><path d='M204 6 L213 27 L236 29 L219 44 L224 66 L204 54 L184 66 L189 44 L172 29 L195 27 Z' fill='#D9A441'/><path d='M288 6 L297 27 L320 29 L303 44 L308 66 L288 54 L268 66 L273 44 L256 29 L279 27 Z' fill='#D9A441'/><path d='M372 6 L381 27 L404 29 L387 44 L392 66 L372 54 L352 66 L357 44 L340 29 L363 27 Z' fill='#D9A441'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 80,
          "y": 1400,
          "width": 920,
          "anchor": "top-left",
          "track": 3,
          "enterBegin": 0.5,
          "enterEnd": 1,
          "enterAnimation": "smoothup",
          "exitEnd": 5.2,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='color:#F5F1E8; font-size:74px; line-height:1.02; font-weight:800; letter-spacing:-1px;'>{{productName}}</div><div style='margin-top:18px; color:#C7D0DE; font-size:31px; line-height:1.4; font-weight:500;'>Rated <b style='color:#D9A441;'>{{rating}}/5</b> by {{reviewCount}} listeners</div>"
        }
      ]
    },
    {
      "id": "review",
      "condition": "{{showQuote}}",
      "duration": 4.6,
      "backgroundColor": "#0B1220",
      "transition": "smoothup",
      "transitionId": "cta",
      "transitionDuration": 0.55,
      "visuals": [
        {
          "type": "IMAGE",
          "src": "{{darkImage}}",
          "width": 1080,
          "height": 1920,
          "position": "center-center",
          "resize": "cover",
          "opacity": 0.3,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 4.6
        },
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 1,
          "enterBegin": 0,
          "exitEnd": 4.6,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><rect width='1080' height='1920' fill='rgba(11,18,32,0.55)'/><rect x='84' y='560' width='912' height='740' rx='40' fill='rgba(14,22,38,0.88)' stroke='rgba(217,164,65,0.4)' stroke-width='1.5'/><text x='150' y='740' font-family='Georgia' font-size='190' fill='rgba(217,164,65,0.85)'>&#8220;</text></svg>"
        },
        {
          "type": "TEXT",
          "x": 156,
          "y": 780,
          "width": 770,
          "anchor": "top-left",
          "track": 3,
          "enterBegin": 0.35,
          "enterEnd": 0.85,
          "enterAnimation": "smoothup",
          "exitEnd": 4.6,
          "style": {
            "fontFamily": "Playfair Display"
          },
          "html": "<div style='color:#F5F1E8; font-size:44px; line-height:1.35; font-style:italic;'>{{quote}}</div><div style='margin-top:34px; font-family:Sora, sans-serif; font-style:normal; color:#D9A441; font-size:26px; font-weight:700; letter-spacing:2px;'>{{quoteAuthor}}</div>"
        },
        {
          "type": "SVG",
          "x": 330,
          "y": 620,
          "width": 240,
          "height": 42,
          "anchor": "top-left",
          "track": 2,
          "enterBegin": 0.2,
          "enterEnd": 0.6,
          "enterAnimation": "fade",
          "exitEnd": 4.6,
          "svg": "<svg width='240' height='42' viewBox='0 0 240 42' xmlns='http://www.w3.org/2000/svg'><path d='M21 3 L26 15 L39 16 L29 25 L32 38 L21 31 L10 38 L13 25 L3 16 L16 15 Z' fill='#D9A441'/><path d='M69 3 L74 15 L87 16 L77 25 L80 38 L69 31 L58 38 L61 25 L51 16 L64 15 Z' fill='#D9A441'/><path d='M117 3 L122 15 L135 16 L125 25 L128 38 L117 31 L106 38 L109 25 L99 16 L112 15 Z' fill='#D9A441'/><path d='M165 3 L170 15 L183 16 L173 25 L176 38 L165 31 L154 38 L157 25 L147 16 L160 15 Z' fill='#D9A441'/><path d='M213 3 L218 15 L231 16 L221 25 L224 38 L213 31 L202 38 L205 25 L195 16 L208 15 Z' fill='#D9A441'/></svg>"
        }
      ]
    },
    {
      "id": "cta",
      "duration": 4.2,
      "backgroundColor": "#0E1626",
      "visuals": [
        {
          "type": "IMAGE",
          "src": "{{darkImage}}",
          "width": 1080,
          "height": 1920,
          "position": "center-center",
          "resize": "cover",
          "zoom": true,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 4.2
        },
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 1,
          "enterBegin": 0,
          "exitEnd": 4.2,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bsCta' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='#0E1626' stop-opacity='0.55'/><stop offset='0.5' stop-color='#0E1626' stop-opacity='0.35'/><stop offset='1' stop-color='#0E1626' stop-opacity='0.92'/></linearGradient></defs><rect width='1080' height='1920' fill='url(#bsCta)'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 1180,
          "width": 940,
          "anchor": "top-center",
          "track": 2,
          "enterBegin": 0.2,
          "enterEnd": 0.7,
          "enterAnimation": "smoothup",
          "exitEnd": 4.2,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='text-align:center; color:#F5F1E8; font-size:62px; line-height:1.12; font-weight:800;'>{{sellingPoint}}</div>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 1480,
          "anchor": "top-center",
          "track": 3,
          "enterBegin": 0.8,
          "enterEnd": 1.2,
          "enterAnimation": "circleopen",
          "exitEnd": 4.2,
          "style": {
            "fontFamily": "Sora"
          },
          "html": "<div style='display:inline-block; background:#D9A441; color:#0E1626; border-radius:999px; padding:28px 68px; font-size:38px; font-weight:800;'>{{ctaText}} →</div>"
        }
      ]
    }
  ],
  "audios": [
    {
      "src": "{{musicUrl}}",
      "volume": 0.18,
      "track": 0
    }
  ]
}

More E-commerce templates

Flash Sale Countdown

Flash Sale Countdown

E-commerce$0.00369

Product Hero Promo

Product Hero Promo

E-commerce$0.0043

Product Hero Promo

Product Hero Promo

E-commerce$0.00432

Flash Sale / Discount

Flash Sale / Discount

E-commerce$0.00305

New Arrival Drop

New Arrival Drop

E-commerce$0.00432

Before / After Reveal

Before / After Reveal

E-commerce$0.00333

Feature Bullets

Feature Bullets

E-commerce$0.00435

Product Comparison

Product Comparison

E-commerce$0.0038

Back in Stock

Back in Stock

E-commerce$0.00295

Bundle Offer

Bundle Offer

E-commerce$0.00379

Ready to ship video at scale?

Start free — your first render is only a JSON payload away.

Explore the API ↗