Product Card Template

Showcase products with images, pricing, and ratings for e-commerce.

Template ID

template: "product"

Preview

E-commerce optimized layout with:

• Large product image
• Price with optional discount
• Star ratings
• Brand name
• Promotional badges

Parameters

Parameter	Type	Required	Description
title	string	Yes	Product name
product_image_url	string	No	Product image URL
price	string	No	Current price (e.g., "$99.99")
original_price	string	No	Original price for discounts
brand	string	No	Brand/manufacturer name
rating	number	No	Star rating (0-5, supports decimals)
badge	string	No	Badge text (e.g., "SALE", "NEW")
theme	string	No	dark (default) or light
logo_url	string	No	Store logo

Example Request

curl -X POST https://ogimageapi.io/api/generate \
  -H "Content-Type: application/json" \
  -H "X-API-Key: YOUR_API_KEY" \
  -d '{
    "title": "Premium Wireless Headphones",
    "product_image_url": "https://example.com/headphones.png",
    "price": "$199.99",
    "original_price": "$299.99",
    "brand": "AudioTech Pro",
    "rating": 4.5,
    "badge": "SALE",
    "template": "product",
    "theme": "dark"
  }' \
  --output product-og.png

Layout Structure

┌─────────────────────────────────────────┐
│ [BADGE]                          [Logo] │
│                                         │
│   ┌─────────────┐                       │
│   │             │   Product Name        │
│   │   Product   │   ─────────────       │
│   │   Image     │   Brand Name          │
│   │             │                       │
│   └─────────────┘   ★★★★☆ (4.5)         │
│                                         │
│                     $199.99  $299.99    │
│                     (sale)   (original) │
└─────────────────────────────────────────┘

Badge Options

Common badge values:

• SALE — Red badge
• NEW — Green badge
• BESTSELLER — Gold badge
• LIMITED — Purple badge
• Custom text — Default color

Rating Display

Value	Display
5.0	★★★★★
4.5	★★★★½
4.0	★★★★☆
3.0	★★★☆☆

Theme Variations

Dark Theme

• Sleek, modern look
• Product images pop
• Great for electronics, tech products

Light Theme

• Clean, minimal aesthetic
• Professional appearance
• Better for fashion, home goods

Use Cases

Product Type	Recommended Setup
Electronics	Dark theme + badge
Fashion	Light theme
SaaS/Software	Dark theme + logo
Home goods	Light theme
Deals/Sales	Dark theme + "SALE" badge

Best Practices

1. Use clean product images — White/transparent background works best
2. Show savings — Include original_price for discounts
3. Add ratings — Social proof increases engagement
4. Use badges sparingly — Too many dilutes impact

E-commerce Integration

Shopify

// Generate OG images for products
async function generateProductOG(product) {
  const discount = product.compare_at_price ? 
    Math.round((1 - product.price / product.compare_at_price) * 100) : null;
  
  const response = await fetch('https://ogimageapi.io/api/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': process.env.OG_IMAGE_API_KEY
    },
    body: JSON.stringify({
      title: product.title,
      product_image_url: product.images[0]?.src,
      price: formatPrice(product.price),
      original_price: product.compare_at_price ? formatPrice(product.compare_at_price) : null,
      brand: product.vendor,
      rating: product.average_rating,
      badge: discount > 20 ? 'SALE' : null,
      template: 'product',
      theme: 'dark'
    })
  });
  
  return response;
}

WooCommerce (PHP)

function generate_product_og($product_id) {
    $product = wc_get_product($product_id);
    
    $payload = [
        'title' => $product->get_name(),
        'product_image_url' => wp_get_attachment_url($product->get_image_id()),
        'price' => '$' . $product->get_price(),
        'brand' => $product->get_attribute('brand'),
        'template' => 'product',
        'theme' => 'dark'
    ];
    
    if ($product->is_on_sale()) {
        $payload['original_price'] = '$' . $product->get_regular_price();
        $payload['badge'] = 'SALE';
    }
    
    // Make API request...
}

Image Specifications

Property	Recommendation
Format	PNG (transparent) or JPG
Size	800×800 px minimum
Background	White or transparent
File size	Under 1MB

Related Templates

• E-commerce Grid — Multiple products
• Stats Card — Product metrics