> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Product Image

Allows you to display product image controls for your widget. The setting looks up product images based on the desired `reference` attribute.

---

**Widget Configuration Output**

```json showLineNumbers={false}
{
  "src": "https://cdn11.bigcommerce.com/s-iu88q6epfh/products/121/images/377/850x850__74338.1591376249.386.513.png?c=1",
  "type": "PRODUCT_IMAGE"
}
```

---

**User Interface Output**

![output](/_fern-img/3372e99cca7a99d7bf2aaa4e631026dd9e941a0a6e9979b962872a8304b5d38c.webp)

---

**JSON Schema**

| Property             | Type   | Description                                                                         | Example         |
| -------------------- | ------ | ----------------------------------------------------------------------------------- | --------------- |
| `type`               | string | The type of setting component to display.                                           | "productImage"  |
| `label`              | string | The user friendly message to inform the user how this setting will be used.         | "Product Image" |
| `id`                 | string | The variable name where the setting value will be available in the widget template. | "productImage"  |
| `typeMeta`           | object | Additional information needed based on the selected setting type.                   |                 |
| `typeMeta.reference` | string | The reference attribute used to look up the product.                                | "productId"     |