E-commerce Grid Template

Display multiple products or images in a grid layout.

Template ID

template: "grid"

Preview

Multi-image layout featuring:

• 2-4 product/image grid
• Collection title
• Clean, balanced layout
• Professional styling

Parameters

Parameter	Type	Required	Description
title	string	Yes	Collection/category title
subtitle	string	No	Description or count
grid_images	array	No	Array of 2-4 image URLs
grid_title	string	No	Grid section title
theme	string	No	dark (default) or light
logo_url	string	No	Brand 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": "Summer Collection 2024",
    "subtitle": "24 new arrivals",
    "grid_images": [
      "https://example.com/product1.jpg",
      "https://example.com/product2.jpg",
      "https://example.com/product3.jpg",
      "https://example.com/product4.jpg"
    ],
    "template": "grid",
    "theme": "dark"
  }' \
  --output collection-og.png

Layout Structure

4 Images

┌─────────────────────────────────────────┐
│                                         │
│   Summer Collection 2024         [Logo] │
│   24 new arrivals                       │
│                                         │
│   ┌─────────┐  ┌─────────┐              │
│   │ Image 1 │  │ Image 2 │              │
│   └─────────┘  └─────────┘              │
│   ┌─────────┐  ┌─────────┐              │
│   │ Image 3 │  │ Image 4 │              │
│   └─────────┘  └─────────┘              │
│                                         │
└─────────────────────────────────────────┘

2 Images

┌─────────────────────────────────────────┐
│   Collection Title               [Logo] │
│                                         │
│   ┌────────────┐  ┌────────────┐        │
│   │            │  │            │        │
│   │  Image 1   │  │  Image 2   │        │
│   │            │  │            │        │
│   └────────────┘  └────────────┘        │
│                                         │
└─────────────────────────────────────────┘

Theme Variations

Dark Theme

• Products pop against dark background
• Modern, premium feel
• Great for tech, fashion

Light Theme

• Clean, minimal look
• Traditional e-commerce feel
• Better for home, lifestyle

Use Cases

Context	Recommended Setup
Product collections	4 images
Category pages	4 images
New arrivals	2-4 images
Lookbooks	4 images
Property galleries	4 images

Best Practices

1. Consistent image style — Same lighting, angles
2. 4 images is ideal — Best visual balance
3. Square images work best — Will be cropped to fit
4. Avoid busy images — Simple backgrounds

Integration Example

Collection OG Generator

async function generateCollectionOG(collection) {
  // Get first 4 product images
  const images = collection.products
    .slice(0, 4)
    .map(p => p.images[0]?.src)
    .filter(Boolean);
  
  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: collection.title,
      subtitle: `${collection.products_count} products`,
      grid_images: images,
      template: 'grid',
      theme: 'dark',
      logo_url: 'https://mystore.com/logo.png'
    })
  });
  
  return response;
}

Category Pages

// Generate OG images for all category pages
async function generateCategoryImages(categories) {
  for (const category of categories) {
    const topProducts = await getTopProductsInCategory(category.id, 4);
    
    const og = await generateCollectionOG({
      title: category.name,
      products: topProducts,
      products_count: category.total_count
    });
    
    // Save image...
  }
}

Image Specifications

Property	Recommendation
Format	PNG or JPG
Size	400×400 px minimum per image
Aspect ratio	1:1 (square) ideal
Background	Clean/white preferred
File size	Under 500KB each

Related Templates

• Product Card — Single product focus
• Real Estate — Property galleries