# How to Create Custom Prompt Templates for E-commerce Product Images

> Learn to create custom prompt templates for e-commerce product images. Populate placeholders with your data and generate stunning visuals through the API. Elevate your product listings today!

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-09-13

---

**You can create custom prompt templates for e-commerce product images by selecting a base skeleton from the documentation, populating placeholders with product-specific data, and submitting the rendered string through the API payload builder to the generation service.**

The **awesome-gpt-image-2** repository provides a modular, three-layer architecture for building reusable prompt templates that drive AI-generated e-commerce visuals. By leveraging structured templates from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) and the API utilities in [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js), developers can standardize product imagery across platforms while maintaining flexibility for individual product attributes.

## Understanding the Template Architecture

The repository implements a clear separation of concerns across three distinct layers that handle template definition, prompt generation, and API communication.

### Template Definition Layer

The **template definition layer** stores reusable "fill-in-the-blank" prompt skeletons in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md). According to the freestylefly/awesome-gpt-image-2 source code, this file contains specific **e-commerce** sections with both plain-text and JSON-structured templates that describe product type, platform, visual style, and constraints. These templates define placeholders for platform names, color modes, aspect ratios, and content sections.

### Prompt Generation Layer

The **prompt generation layer** handles the replacement of placeholders with actual product data. The file [`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js) demonstrates concrete implementations, containing sample prompts for product images such as ceramic mug descriptions. This layer optionally serializes the result to JSON for programmatic API consumption, transforming human-readable templates into machine-parsable payloads.

### API Payload Construction Layer

The **API payload construction layer** packages the final prompt into the format expected by the backend generation service. The [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js) file exports `buildApimartGenerationPayload(prompt, …)`, which normalizes the prompt string by trimming whitespace and adding metadata such as language codes. Subsequently, [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) validates prompt length and case identifiers before forwarding the request to the generation engine.

## Step-by-Step Guide to Creating E-commerce Prompt Templates

### Select a Base Template from the Documentation

Begin by opening [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) and locating the e-commerce template block. For product-detail cards or social commerce posts, use the plain-text template structure:

```text
生成一张[平台，如 X/抖音/小红书/微信朋友圈]内容截图，[深色/浅色]模式。
整体比例：[9:16 / 3:4 / 1:1]，手机截图风格。

核心内容：
- 账号信息：[头像描述 / 用户名 / 认证标识]
- 正文内容：[具体文本内容，包含指定中文]
- 互动数据：[点赞/评论/转发/收藏数量]

```

This template originates from the repository's documentation and supports popular Chinese social commerce platforms including Douyin (抖音) and Xiaohongshu (小红书).

### Structure Your Product Data as JSON

For applications requiring programmatic template processing, convert the plain-text skeleton into a JSON schema. Create a structured object that maps template sections to data fields:

```json
{
  "type": "e-commerce landing page hero section",
  "product": "Organic Face Cream",
  "features": ["天然配方", "适合干性皮肤", "含维生素E"],
  "style": {"theme":"Minimalist","primary_color":"#FF5733"},
  "layout": "Hero + Product Card",
  "constraints":"High-resolution, text legible, 1:1 ratio"
}

```

This JSON structure mirrors the pattern found in the repository's infographic templates and enables type-safe validation before API submission.

### Populate Placeholders with Product Details

Replace each bracketed placeholder with specific product information. For example, rendering a summer dress listing for Douyin:

```text
生成一张抖音内容截图，浅色模式。整体比例：9:16，手机截图风格。

核心内容：
- 账号信息：头像为圆形，用户名 “ShopifyStore”，已认证。
- 正文内容：全新夏季连衣裙，轻盈面料，颜色：海蓝。
- 互动数据：点赞 2.1k，评论 184，转发 57，收藏 312。

```

This approach aligns with the implementation style demonstrated in [`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js), where concrete product attributes replace template variables.

### Serialize and Prepare the API Payload

When using the JSON template approach, serialize the object and prepare it for transmission:

```javascript
const template = {
  type: "e-commerce product detail",
  product: "Summer Dress",
  colors: ["#00ADEF", "#FFFFFF"],
  layout: "Full-width image with price tag",
  constraints: "No watermarks, 4K resolution"
};
const prompt = JSON.stringify(template);

```

The `buildApimartGenerationPayload` function in [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js) automatically handles the `prompt` field normalization, ensuring the string is properly trimmed and formatted before API submission.

### Submit to the Generation Service

Invoke either `submitPersonalGeneration` for client-side requests or `submitPlatformGeneration` for server-side processing, passing the rendered prompt string:

```javascript
import { submitPersonalGeneration } from "./shared/apimart.js";

const apiKey = process.env.APIMART_KEY;
const language = "zh";
await submitPersonalGeneration(prompt, apiKey, language);

```

As implemented in [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js), the server validates the prompt length and case ID at lines 115-119 before queuing the generation job. The endpoint returns a URL to the created image, which you can embed in your e-commerce front-end or marketing assets.

## Complete Implementation Example

The following example demonstrates the complete workflow from template selection to API submission:

```javascript
// 1️⃣ Load a plain-text template and fill it
function renderEcomPrompt({ platform, mode, ratio, account, copy, stats }) {
  return `
生成一张${platform}内容截图，${mode}模式。整体比例：${ratio}，手机截图风格。

核心内容：
- 账号信息：${account}
- 正文内容：${copy}
- 互动数据：${stats}
`.trim();
}

// Example usage for a fashion product
const prompt = renderEcomPrompt({
  platform: "抖音",
  mode: "浅色",
  ratio: "9:16",
  account: "头像圆形，用户名 “FashionHub”，已认证",
  copy: "新品夏季连衣裙，轻盈面料，颜色：海蓝",
  stats: "点赞 2.1k，评论 184，转发 57，收藏 312"
});

// 2️⃣ Send to backend using the repository's client helper
import { submitPersonalGeneration } from "./shared/apimart.js";

await submitPersonalGeneration(prompt, process.env.APIMART_KEY, "zh");

```

For JSON-based workflows, structure and submit the template as follows:

```javascript
import { submitPersonalGeneration } from "./shared/apimart.js";

const jsonPrompt = JSON.stringify({
  type: "e-commerce product detail",
  product: "Smartwatch Pro",
  features: ["OLED display", "Heart-rate monitor", "Water-resistant 5ATM"],
  style: {theme:"Tech", primary_color:"#222222"},
  layout: "Hero image + specs overlay",
  constraints:"4K resolution, text legible, no brand logos"
});

await submitPersonalGeneration(jsonPrompt, process.env.APIMART_KEY, "en");

```

## Summary

- **Template Storage**: Reusable e-commerce prompt skeletons reside in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), supporting both plain-text and JSON formats for different integration scenarios.
- **Data Population**: Replace bracketed placeholders with specific product attributes such as platform names, color values, and feature lists to create concrete generation prompts.
- **API Integration**: Use `buildApimartGenerationPayload` from [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js) to normalize prompts before submission, and `submitPersonalGeneration` to transmit requests to the generation service.
- **Validation Pipeline**: The server endpoint in [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) validates prompt lengths and case identifiers at lines 115-119 before processing.
- **Platform Flexibility**: Templates support multiple e-commerce platforms including X (Twitter), Douyin, Xiaohongshu, and WeChat Moments, with configurable aspect ratios (9:16, 3:4, 1:1).

## Frequently Asked Questions

### What file contains the base e-commerce prompt templates in awesome-gpt-image-2?

The base e-commerce prompt templates are stored in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), specifically within the e-commerce section that contains both plain-text and JSON-structured examples. This file includes placeholders for platform specifications, visual modes, and content sections that you can customize for specific products.

### How does the repository handle prompt validation before image generation?

According to the source code in [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) (lines 115-119), the server validates the prompt length and checks case identifiers before forwarding the request to the generation engine. Additionally, [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js) normalizes the prompt string through `buildApimartGenerationPayload`, which trims whitespace and ensures proper formatting.

### Can I use JSON format instead of plain text for my e-commerce templates?

Yes, the repository supports both formats. While [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) provides plain-text templates with bracketed placeholders, you can structure your data as JSON objects containing fields like `type`, `product`, `features`, `style`, `layout`, and `constraints`. Serialize these objects using `JSON.stringify()` before passing them to `submitPersonalGeneration` or `submitPlatformGeneration`.

### What function should I call to submit a completed prompt to the image generation API?

Use `submitPersonalGeneration(prompt, apiKey, language)` for client-side submissions or `submitPlatformGeneration` for server-side processing, both imported from [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js). These functions utilize `buildApimartGenerationPayload` internally to construct the proper API request format required by the generation service.