Product Card template
The product-card template renders a business image as a PNG. POST a JSON payload to the endpoint below and you receive a CDN URL in the response.
Marketing page
See the Product Card template in our gallery
Sample renders, use cases and pricing context.
Endpoint
POST https://app.html2img.com/api/v1/templates/product-card
X-API-Key: <your-api-key>
Content-Type: application/json
Authentication uses the X-API-Key header. See the
authentication docs
for details on issuing and rotating keys.
Inputs
The full set of inputs the template accepts:
| Name | Type | Required | Description | Example |
|---|---|---|---|---|
product_name | string | Yes | Text value for the product name. | Linden Lounge Chair |
product_subtitle | string | No | Text value for the product subtitle. | Solid oak frame with wool boucle upholstery |
price | string | Yes | Text value for the price. | $1,290 |
sale_price | string | No | Text value for the sale price. | $890 |
badge | string | No | Text value for the badge. | Limited stock |
cta_label | string | No | Text value for the cta label. | Shop the Linden → |
product_image_url | url | No | URL of the product image to include in the rendered image. | https://picsum.photos/seed/product-card/720/720 |
brand_name | string | No | Text value for the brand name. | Northwind Home |
logo_url | url | No | URL of the logo to include in the rendered image. | - |
background_color | string | No | Hex colour code for the background. | #F5F1EA |
accent_color | string | No | Hex colour code for the accent. | #1F2937 |
Defaults
Defaults applied automatically when not overridden in the request:
| Option | Default value |
|---|---|
width | 1200 |
height | 800 |
Code examples
curl -X POST https://app.html2img.com/api/v1/templates/product-card \
-H "X-API-Key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{"product_name":"Linden Lounge Chair","product_subtitle":"Solid oak frame with wool boucle upholstery","price":"$1,290","sale_price":"$890","badge":"Limited stock","cta_label":"Shop the Linden \u2192","product_image_url":"https://picsum.photos/seed/product-card/720/720","brand_name":"Northwind Home","background_color":"#F5F1EA","accent_color":"#1F2937"}' <?php
$response = \Illuminate\Support\Facades\Http::withHeaders([
'X-API-Key' => 'YOUR_API_KEY',
])->post('https://app.html2img.com/api/v1/templates/product-card', ['product_name' => 'Linden Lounge Chair', 'product_subtitle' => 'Solid oak frame with wool boucle upholstery', 'price' => '$1,290', 'sale_price' => '$890', 'badge' => 'Limited stock', 'cta_label' => 'Shop the Linden →', 'product_image_url' => 'https://picsum.photos/seed/product-card/720/720', 'brand_name' => 'Northwind Home', 'background_color' => '#F5F1EA', 'accent_color' => '#1F2937']);
$url = $response->json('url'); const response = await fetch('https://app.html2img.com/api/v1/templates/product-card', {
method: 'POST',
headers: {
'X-API-Key': 'YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"product_name": "Linden Lounge Chair",
"product_subtitle": "Solid oak frame with wool boucle upholstery",
"price": "$1,290",
"sale_price": "$890",
"badge": "Limited stock",
"cta_label": "Shop the Linden \u2192",
"product_image_url": "https://picsum.photos/seed/product-card/720/720",
"brand_name": "Northwind Home",
"background_color": "#F5F1EA",
"accent_color": "#1F2937"
}),
});
const { url } = await response.json(); import requests
response = requests.post(
'https://app.html2img.com/api/v1/templates/product-card',
headers={'X-API-Key': 'YOUR_API_KEY'},
json={'product_name': 'Linden Lounge Chair', 'product_subtitle': 'Solid oak frame with wool boucle upholstery', 'price': '$1,290', 'sale_price': '$890', 'badge': 'Limited stock', 'cta_label': 'Shop the Linden →', 'product_image_url': 'https://picsum.photos/seed/product-card/720/720', 'brand_name': 'Northwind Home', 'background_color': '#F5F1EA', 'accent_color': '#1F2937'},
)
url = response.json()['url'] Looking for a fuller integration sketch in your language? The usage guides cover PHP, Laravel, Rails, Python, JavaScript, React and Vue.
Response
A successful render returns:
{
"success": true,
"id": "abc123",
"url": "https://i.html2img.com/abc123.png",
"credits_remaining": 1234,
"template": "product-card"
}
The url field is a CDN URL for the rendered PNG. credits_remaining tracks your monthly quota. Shared response fields are documented in the
API parameters reference.
Errors
The template endpoint returns the following error responses:
422 Validation failed
Returned when one or more inputs fail validation. The errors object lists field-specific messages.
{
"success": false,
"error": "validation_failed",
"errors": {
"title": ["The title field is required."]
}
} 404 Template not found
Returned with {"code": "template_not_found"} if the slug is not registered. Check the template list for current slugs.
401 Unauthorised
Missing or invalid API key. See the authentication docs.
429 Too many requests
You have hit the rate limit or used your monthly credits. The pricing page covers higher-volume plans.
Related templates
Other templates in the content and marketing category:
- Blog hero image - Editorial hero images for blog posts and article pages
- Code screenshot - Beautiful syntax-highlighted code screenshots with window chrome
- Email header - Wide email banner artwork sized for newsletter and transactional templates
- GitHub social preview - Repo cards sized for GitHub social preview, share posts, and READMEs
- Open Graph image - Generate dynamic Open Graph images from JSON
- Podcast cover - Square cover artwork sized for Apple Podcasts, Spotify, and the major directories
- Podcast episode card - Per-episode share cards sized for Twitter, LinkedIn, and Slack unfurls
- Project showcase - "We shipped X" hero cards for changelogs and launch announcements
- Quote card - Pull-quote cards for testimonials, reviews, and shareable quotes
Browse by category
A starting point from each of the other template categories. The templates index lists every reference page.
Social media: Facebook post , Instagram square post
Business and commerce: Business card , Certificate of completion
See the Product Card marketing page for sample renders and use cases.