How to Generate Product Images from HTML for a Shopify Store in India

Short answer: create the product artwork with HTML and CSS, render it in a browser, export the result as a supported image file, then upload that file to Shopify or attach it through an authorized Admin API workflow. HTML is your source format; Shopify product media is the exported image. The reviewed sources do not show a different rendering process for India.

1. Plan the image before building it

Decide what the image needs to communicate and where it will appear: a square main product image, a detail graphic, a size guide, or another product visual. For a square image, Shopify says 2048 × 2048 pixels usually displays best. Keep the main item legible at thumbnail size and check how the image crops in your theme before making it the featured image.

Use images, icons, fonts, and other assets that you have permission to use. There is no Shopify-specific licensing exception established by the sources reviewed for this guide.

2. Create an HTML and CSS artwork file

This self-contained example makes a square product graphic. Save it as product-art.html. Replace the sample copy, colors, and product details with your own. The included styling gives the artwork fixed dimensions so the browser screenshot matches the intended output.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Product artwork</title>
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; width: 2048px; height: 2048px; }
    body {
      font-family: Arial, sans-serif;
      background: #f2eee7;
      color: #18211d;
      display: grid;
      place-items: center;
    }
    .card {
      width: 100%; height: 100%; padding: 150px;
      display: flex; flex-direction: column; justify-content: space-between;
    }
    .label { font-size: 34px; letter-spacing: .12em; text-transform: uppercase; }
    .product {
      height: 1180px; border-radius: 48px; background: #d5e4da;
      display: grid; place-items: center; font-size: 260px;
    }
    h1 { margin: 0; font-size: 112px; line-height: 1.05; }
    p { margin: 24px 0 0; font-size: 42px; }
  </style>
</head>
<body>
  <main class="card">
    <div class="label">Your brand</div>
    <div class="product" aria-label="Product illustration">✿</div>
    <div>
      <h1>A clear product name</h1>
      <p>A concise detail that helps shoppers understand the product.</p>
    </div>
  </main>
</body>
</html>

The flower symbol is only a placeholder. For a real product image, use an appropriately licensed product photograph or illustration in the artwork. A product image should represent the actual item; do not use decorative mock artwork in a way that could mislead shoppers.

3. Render the HTML to an image with Playwright

Playwright can take a screenshot to a file or image buffer, including a full-page screenshot. The following Node.js example opens the local HTML file, waits for fonts and images, sets a 2048 × 2048 viewport, and saves a PNG. See the Playwright screenshot documentation.

npm install playwright
npx playwright install chromium

// render.mjs
import { chromium } from 'playwright';
import { pathToFileURL } from 'node:url';
import { resolve } from 'node:path';

const input = pathToFileURL(resolve('product-art.html')).href;
const browser = await chromium.launch({ headless: true });
try {
  const page = await browser.newPage({
    viewport: { width: 2048, height: 2048 },
    deviceScaleFactor: 1
  });
  await page.goto(input, { waitUntil: 'load' });
  await page.evaluate(async () => {
    await document.fonts.ready;
    await Promise.all([...document.images].map(img =>
      img.complete ? Promise.resolve() : new Promise(resolve => {
        img.onload = resolve;
        img.onerror = resolve;
      })
    ));
  });
  await page.screenshot({ path: 'product-image.png', type: 'png' });
} finally {
  await browser.close();
}

Run it with node render.mjs. If you have external assets, make sure the browser can access them and that they have loaded before capture. For remote pages, use page.goto(url, { waitUntil: 'networkidle' }) only when the page actually becomes idle; pages with continuous network activity may never reach that state. A selector wait or explicit delay can be more appropriate for those pages.

Full-page screenshots versus a fixed artwork canvas

For a fixed product composition, set the canvas dimensions and capture that viewport as above. For a long HTML page such as a size guide, use fullPage: true:

await page.screenshot({ path: 'size-guide.png', fullPage: true });

A full-page capture can be taller and larger than intended. Check the resulting pixel dimensions and file size against Shopify’s limits. For a specific design element, Playwright can capture a locator directly:

await page.locator('.product-card').screenshot({ path: 'product-card.png' });

4. Inspect and prepare the exported file

Open the exported image at its actual size and inspect these details before uploading:

Product edges, labels, and text are not clipped.
Images, custom fonts, and CSS loaded as intended; no missing-asset icons or fallback glyphs appear.
Text remains readable when the image is viewed at a smaller store thumbnail size.
The background and crop look correct on the product page and any collection tiles where the image may appear.
The file format, pixel dimensions, and file size fit Shopify’s published constraints.

Shopify accepts PNG, JPEG, PSD, TIFF, BMP, GIF, SVG, HEIC, and WebP for product images. Its guidance recommends PNG, followed by JPEG, for most product images. Product and collection images can be up to 5000 × 5000 pixels or 25 megapixels, and each image must be under 20 MB. Shopify says 2048 × 2048 pixels usually displays best for a square product image. See Shopify’s product media types and requirements.

Use PNG when crisp edges, flat colors, or text are central to the graphic. JPEG can be a practical choice for photographic artwork. Whichever you choose, re-open the converted file and check for unwanted softness, artifacts, transparency changes, or color shifts. Shopify’s delivery service selects a supported format for the customer’s browser.

5. Add the image to Shopify

Manual upload in Shopify admin

In Shopify admin, open Products and select the product.
In Media, upload or add the exported image.
Review its position in the media list. The first media item is the featured or main image and appears in high-visibility store contexts.
Add useful alternative text describing what the image shows, then save the product.
Open the storefront product page and check the image in context, including its crop and mobile presentation if relevant.

Shopify allows up to 250 media items per product. Keep the primary item deliberate: a different first image can change what shoppers see in several prominent store locations. See Shopify’s product media guidance.

Alternative text

Write alt text that describes the image’s useful content, such as “Blue cotton T-shirt with crew neck.” Shopify’s component guidance recommends descriptive alt text and an empty alt attribute for decorative images. Product media generally needs a concise description of the product or visual detail, rather than a list of keywords. See Shopify’s accessibility guidance.

6. Automate uploads with Shopify’s Admin GraphQL API

For one-off artwork or a small catalog, manual upload is usually the simplest route. An API workflow helps when images are regenerated regularly or attached in batches, but it adds app setup, permissions, upload error handling, and version maintenance.

Shopify’s API documentation describes product media management through the Admin GraphQL API. The API-versioned productCreateMedia mutation is marked deprecated in favor of productUpdate or productSet. It requires write_products and appropriate user permission. Before building an integration, check the current versioned schema and replacement mutation rather than starting a new implementation with the deprecated one. See the mutation reference and Shopify Admin GraphQL API documentation.

At a high level, an authorized integration needs to:

Render and validate the image file.
Authenticate an app with the product write scope and user authorization required by the current API workflow.
Use the current documented upload flow to make the file available to Shopify.
Call the supported product update or set operation to attach the media to the intended product.
Check the GraphQL response for user errors and confirm the media is processed before treating the job as complete.

Do not copy an old mutation example without checking its API version, required input shape, upload steps, and deprecation status. Those details can vary by version. The sources reviewed establish the permissions and deprecation point above but do not provide a validated end-to-end request for a current replacement, so an exact mutation payload is intentionally not fabricated here.

Route	Best fit	Trade-offs
Admin product editor	One-off images and small catalogs	Low setup; repeat uploads and keeping many products in sync take manual effort.
Admin GraphQL API	Repeatable generation or larger workflows	Requires app authorization, product write permissions, version-aware implementation, and handling upload and mutation errors.

Or skip the browser setup

If your artwork is already hosted as a web page, ScreenshotNeo can render a URL to an image. One GET request returns a screenshot; use the result as an exported file and review its dimensions and content before adding it to Shopify. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Its API has options for full-page captures, element selectors, viewport and device presets, custom CSS and JavaScript, waits, and more. Check the docs for supported parameters and behavior.

Performance, reliability, and cost

Keep the artwork self-contained where practical. Local assets reduce dependence on remote requests during rendering. If you use remote assets, wait for them to load and inspect the resulting capture.
Choose a suitable pixel size. A 2048 × 2048 square image follows Shopify’s usual display recommendation. Avoid needlessly oversized source canvases because Shopify caps dimensions and file size.
Use the right output format. PNG is suitable for sharp text and flat graphics; JPEG is often a useful option for photographic content. Recheck quality and size after conversion.
Make repeat work reproducible. Keep the HTML/CSS source and rendering script together, and use stable assets and dimensions so later exports are consistent. This is a workflow recommendation, not a measured performance claim.
Budget API engineering effort. The browser-rendering step has no Shopify upload charge established by the cited sources, but automation has maintenance and compute costs in your own environment. Shopify API use requires correct authorization and version upkeep. No specific cost or throughput figures are established here.

Troubleshooting

Symptom	Likely cause	Fix
Text or icons appear as fallback characters	A font or glyph was not available when capture ran.	Use a font you can load reliably, wait for `document.fonts.ready`, and use a supported image asset instead of a missing glyph.
Images are blank or missing	Asset URLs are inaccessible, blocked, or still loading.	Check each asset URL and browser access; wait for image completion and inspect browser errors.
Artwork is clipped	Canvas and viewport dimensions differ, or the content exceeds the canvas.	Set a matching viewport and artwork size, then inspect the screenshot at full resolution.
Screenshot is unexpectedly tall	A full-page screenshot captured content beyond the intended artwork.	Use a fixed viewport or capture a specific element instead of the whole page.
Shopify rejects the file	Unsupported encoding, image exceeds 5000 × 5000 pixels or 25 MP, or file is 20 MB or larger.	Export to a supported format and resize or recompress until within the published limits.
Image looks soft in the store	The source lacks enough detail for its display size or a lossy export reduced quality.	Render at an appropriate size, choose PNG for crisp graphic edges, and review the final exported file.
Image appears in the wrong prominent position	The intended main image is not first in product media.	Reorder the media and verify the first item is the desired featured image.
API mutation returns an error	Missing scope or user permission, invalid inputs, or a deprecated/version-mismatched mutation.	Check the current API version and schema, required permissions, and GraphQL user errors; use the current supported product update workflow.

Frequently asked questions

Does a Shopify product image have to be made in an image editor?

No. You can author artwork in HTML and CSS, render it in a browser, and upload the resulting supported image file.

Does India require a different HTML-to-image process for Shopify?

The reviewed Shopify and Playwright sources do not establish India-specific rendering steps or different Shopify image limits. Follow Shopify’s documented media requirements and any separate obligations applicable to your business.

Can I upload the HTML file itself as product media?

This workflow produces an image from the HTML. Upload the exported image file as product media.

What should I put in the image’s alt text?

Describe the product or meaningful visual detail concisely. If an image is purely decorative, Shopify’s accessibility guidance recommends empty alternative text.