E-commerce Thumbnail Generator — Product Visuals at Scale

An e-commerce catalog of 500+ SKUs has more visuals to ship than anyone wants to admit. Every product needs a hero image. Every collection needs a header. Every social share needs a card. Every email needs a banner. The manual version — a designer working through a queue in Figma — hits diminishing returns fast; the template version — Photoshop actions or a Bannerbear-style renderer — trades hours designing templates for hours maintaining them. Neither shape scales cleanly past a few thousand SKUs.

This page is the third option: one REST call per product, AI-generated visuals sized for each surface, no template stage. The pipeline plugs into Shopify, WooCommerce, BigCommerce, or a headless setup on Sanity/Contentful. This is the working recipe for shipping catalog-scale visuals without a design queue.

The Problem

E-commerce catalogs generate visual work along four axes at once:

• Product hero cards.The image that shows up on category pages and search results. Different from the product photo itself — it's a designed card with title and pricing.
• Collection / category banners. The header on /collections/summer-2026 or /collections/kitchen. Usually 1200×630 or 1600×400.
• Social share cards. Every SKU URL needs an og:image for Facebook, LinkedIn, Slack, and X. Ship without one and share previews degrade badly.
• Email hero banners.Every drip email, launch announcement, and abandoned-cart notification needs a visual anchor. Copying the product photo doesn't work — email clients render badly and CTR suffers.

A store with 5,000 SKUs times four surfaces is 20,000 visuals. The design queue never lands there manually. Template renderers get closer but the template maintenance is a recurring line item. AI generation eliminates both bottlenecks.

The Workflow

1. Trigger. Product created or updated. Shopify fires products/create or products/update. WooCommerce fires woocommerce_process_product_meta. Headless CMSes have equivalent webhooks.
2. Extract fields. Product title, category, and optionally price and one adjective from the description.
3. Call ThumbAPI once per surface. Different format per surface — blogpost for collection banners and OG images, x for square-ish social, linkedin for B2B channels.
4. Push each response to your CDN. Decode the base64, upload to S3/R2, get back an absolute URL.
5. Write the URLs back to the product record. Shopify metafields, WooCommerce meta, or headless-CMS custom fields. Your template already reads from these.

Every subsequent page render, share, and email uses the cached images. No live inference per pageview.

Code Example — Shopify Product Webhook (Node.js)

The handler below sits behind Shopify's products/create webhook. It generates three visuals per SKU (OG card, category card, email banner) and stores them as metafields. Swap the Shopify Admin API calls for WooCommerce or a headless CMS with the same shape.

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const s3 = new S3Client({ region: "us-east-1" });
const BUCKET = "cdn.shop.example.com";
const SURFACES = [
  { key: "og", format: "blogpost", suffix: "og" },
  { key: "social", format: "x", suffix: "social" },
  { key: "email", format: "linkedin", suffix: "email" },
];

async function generate(title, format, useLogo = true) {
  const res = await fetch("https://api.thumbapi.dev/v1/generate", {
    method: "POST",
    headers: {
      "x-api-key": process.env.THUMBAPI_API_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title,
      format,
      category: "business-finance",
      outputFormat: "webp",
      useLogo,
    }),
  });
  if (!res.ok) throw new Error(`ThumbAPI ${res.status}: ${await res.text()}`);
  const { image } = await res.json();
  const base64 = image.startsWith("data:") ? image.split(",", 2)[1] : image;
  return Buffer.from(base64, "base64");
}

async function upload(buf, key) {
  await s3.send(new PutObjectCommand({
    Bucket: BUCKET,
    Key: key,
    Body: buf,
    ContentType: "image/webp",
    CacheControl: "public, max-age=31536000, immutable",
  }));
  return `https://${BUCKET}/${key}`;
}

export async function handler(req) {
  const { id, title, handle } = await req.json();

  const urls = {};
  for (const surface of SURFACES) {
    const buf = await generate(title, surface.format);
    urls[surface.key] = await upload(buf, `products/${handle}-${surface.suffix}.webp`);
  }

  // Write metafields via Shopify Admin API
  for (const [key, url] of Object.entries(urls)) {
    await fetch(`https://${process.env.SHOPIFY_STORE}/admin/api/2026-04/products/${id}/metafields.json`, {
      method: "POST",
      headers: {
        "X-Shopify-Access-Token": process.env.SHOPIFY_TOKEN,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        metafield: {
          namespace: "thumbapi",
          key,
          type: "single_line_text_field",
          value: url,
        },
      }),
    });
  }

  return new Response(JSON.stringify({ ok: true, urls }));
}

Deploy the handler as a Vercel Function or AWS Lambda. For catalogs adding 100+ SKUs per day, put the generate calls behind a queue (SQS or Cloud Tasks) so bursts during CSV imports don't back up the webhook. For a queue-first batch pipeline, the bulk thumbnail generation walkthrough covers the shape.

Field Mapping — Shopify Product to ThumbAPI Request

The branded thumbnail walkthrough covers the logo-overlay mechanics in depth — saved Logo assets in the dashboard, then useLogo: true per request.

Cost at Catalog Scale

A standard thumbnail is 10 credits. Multiply by surfaces per SKU (usually 2–4) and catalog size.

• 500 SKUs × 3 surfaces = 1,500 renders = 15,000 credits. Covered by Business ($199/mo) for the first month, then only new SKUs bill each month.
• 5,000 SKUs × 3 surfaces = 15,000 renders = 150,000 credits. Custom plan needed for the first-run backfill; steady state is much lower (new SKUs only).
• 50,000 SKUs × 3 surfaces = 150,000 renders = 1.5M credits for backfill. Talk to us for a volume plan and dedicated infrastructure.

Steady-state cost is a function of SKU velocity, not catalog size. A store that adds 50 SKUs a month costs 500 renders × 3 surfaces = 4,500 credits/month — Pro tier ($49/mo) covers it with room to spare.

Beyond Products — Category Pages and Email

Two adjacent surfaces earn outsized returns from the same pipeline:

• Collection banners. Every category page (e.g. /collections/kitchen) benefits from a hero banner. Generate one per collection on collection-created/updated webhook. About 20–100 renders per store total.
• Email drip banners. Klaviyo, Mailchimp, Customer.io — every email flow needs hero images. Generate at campaign-creation time and cache the URL in the campaign template.

FAQ

Does this replace product photography?

No. Product photos still show the actual product. ThumbAPI generates the designed cards aroundthe product — category headers, social share previews, email banners — that would otherwise be a designer's queue. Keep your product photos, add a designed card layer on top.

Can I preview a card before publishing the product?

Yes. Call the API with the draft title in a preview handler and show the returned image in your admin UI. If it's not right, regenerate — same title with a different category or customAssetsId gives you a new variant.

What about product variants?

Generate at the parent product level unless variants have very different titles (e.g. flavours or colours that would each want a distinct card). For most catalogs, one image per product is the right granularity — variants share the parent's visual.

Does it work with headless (Shopify Hydrogen, Next.js Commerce)?

Yes. The webhook still fires from Shopify; the handler writes URLs back as metafields; your headless frontend reads the metafield in its product query. Identical pattern for BigCommerce, Swell, or a custom commerce backend.

Is there a free tier to test on a handful of SKUs?

Yes. The free tier is 50 credits per month — enough to generate 5 product visuals end to end before you commit. No credit card.