Create Listing Images

Generate product listing images with photos, price badges, and promotional text overlays.

Who this is for

E-commerce teams and marketplace sellers use this recipe to generate listing images with consistent branding. Combine a product photo with a price badge and title text — ready for marketplace listings or promotional campaigns.

curl -X POST https://api.iterationlayer.com/image-generation/v1/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "dimensions": { "width": 800, "height": 800 },
    "layers": [
      {
        "index": 0,
        "type": "solid-color-background",
        "hex_color": "#F5F5F5"
      },
      {
        "index": 1,
        "type": "static-image",
        "buffer": "<base64-encoded-product-photo>",
        "position": { "x": 50.0, "y": 50.0 }
      },
      {
        "index": 2,
        "type": "rectangle",
        "hex_color": "#E53935",
        "position": { "x": 560.0, "y": 50.0 },
        "dimensions": { "width": 190, "height": 60 }
      },
      {
        "index": 3,
        "type": "text",
        "text": "$49.99",
        "font_name": "Roboto",
        "font_size_in_px": 32,
        "text_color": "#FFFFFF",
        "font_weight": "Bold",
        "text_align": "center",
        "position": { "x": 560.0, "y": 55.0 },
        "dimensions": { "width": 190, "height": 50 }
      },
      {
        "index": 4,
        "type": "text",
        "text": "Premium Wireless Headphones",
        "font_name": "Inter",
        "font_size_in_px": 28,
        "text_color": "#1a1a1a",
        "text_align": "center",
        "position": { "x": 50.0, "y": 700.0 },
        "dimensions": { "width": 700, "height": 50 }
      }
    ],
    "output_format": "png"
  }'
import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

const result = await client.generateImage({
  dimensions: { width_in_px: 800, height_in_px: 800 },
  layers: [
    {
      index: 0,
      type: "solid-color-background",
      hex_color: "#F5F5F5",
    },
    {
      index: 1,
      type: "static-image",
      buffer: "<base64-encoded-product-photo>",
      position: { x_in_px: 50, y_in_px: 50 },
    },
    {
      index: 2,
      type: "rectangle",
      hex_color: "#E53935",
      position: { x_in_px: 560, y_in_px: 50 },
      dimensions: { width_in_px: 190, height_in_px: 60 },
    },
    {
      index: 3,
      type: "text",
      text: "$49.99",
      font_name: "Roboto",
      font_size_in_px: 32,
      text_color: "#FFFFFF",
      font_weight: "Bold",
      text_align: "center",
      position: { x_in_px: 560, y_in_px: 55 },
      dimensions: { width_in_px: 190, height_in_px: 50 },
    },
    {
      index: 4,
      type: "text",
      text: "Premium Wireless Headphones",
      font_name: "Inter",
      font_size_in_px: 28,
      text_color: "#1a1a1a",
      text_align: "center",
      position: { x_in_px: 50, y_in_px: 700 },
      dimensions: { width_in_px: 700, height_in_px: 50 },
    },
  ],
  output_format: "png",
});

const imageBuffer = Buffer.from(result.data.buffer, "base64");
import base64

from iterationlayer import IterationLayer
client = IterationLayer(api_key="YOUR_API_KEY")

result = client.generate_image(
    dimensions={"width_in_px": 800, "height_in_px": 800},
    layers=[
        {
            "index": 0,
            "type": "solid-color-background",
            "hex_color": "#F5F5F5",
        },
        {
            "index": 1,
            "type": "static-image",
            "buffer": "<base64-encoded-product-photo>",
            "position": {"x_in_px": 50, "y_in_px": 50},
        },
        {
            "index": 2,
            "type": "rectangle",
            "hex_color": "#E53935",
            "position": {"x_in_px": 560, "y_in_px": 50},
            "dimensions": {"width_in_px": 190, "height_in_px": 60},
        },
        {
            "index": 3,
            "type": "text",
            "text": "$49.99",
            "font_name": "Roboto",
            "font_size_in_px": 32,
            "text_color": "#FFFFFF",
            "font_weight": "Bold",
            "text_align": "center",
            "position": {"x_in_px": 560, "y_in_px": 55},
            "dimensions": {"width_in_px": 190, "height_in_px": 50},
        },
        {
            "index": 4,
            "type": "text",
            "text": "Premium Wireless Headphones",
            "font_name": "Inter",
            "font_size_in_px": 28,
            "text_color": "#1a1a1a",
            "text_align": "center",
            "position": {"x_in_px": 50, "y_in_px": 700},
            "dimensions": {"width_in_px": 700, "height_in_px": 50},
        },
    ],
    output_format="png",
)

with open("result.png", "wb") as f:
    f.write(base64.b64decode(result["data"]["buffer"]))
package main

import il "github.com/iterationlayer/sdk-go"

client := il.NewClient("YOUR_API_KEY")

result, err := client.GenerateImage(il.GenerateImageRequest{
    Dimensions:   il.Dimensions{WidthInPx: 800, HeightInPx: 800},
    OutputFormat: "png",
    Layers: []il.Layer{
        il.NewSolidColorBackgroundLayer(0, "#F5F5F5"),
        il.NewStaticImageLayer(1, il.FileInput{Buffer: "<base64-encoded-product-photo>"},
            il.Position{XInPx: 50, YInPx: 50},
            il.Dimensions{}),
        il.NewRectangleLayer(2, "#E53935",
            il.Position{XInPx: 560, YInPx: 50},
            il.Dimensions{WidthInPx: 190, HeightInPx: 60}),
        il.NewTextLayer(3, "$49.99", "Roboto", 32, "#FFFFFF",
            il.Position{XInPx: 560, YInPx: 55},
            il.Dimensions{WidthInPx: 190, HeightInPx: 50}),
        il.NewTextLayer(4, "Premium Wireless Headphones", "Inter", 28, "#1a1a1a",
            il.Position{XInPx: 50, YInPx: 700},
            il.Dimensions{WidthInPx: 700, HeightInPx: 50}),
    },
})

Related Recipes

Start building in minutes

Free trial credits included. No credit card required.