# Product Image

Renders an image for the current product. Pick a size (thumbnail to hero), aspect ratio, and optionally enable click-to-zoom. If the product has multiple images, choose which image-field to use.

## Available in

* Catalog modules
* Order Form modules
* Public Page modules

## When to use

* Product detail pages — typically a single Product Image at hero size.
* Inside Catalog Display's image slots to render the product card thumbnail.
* Anywhere a product's visual is part of the user's decision.

For multi-image gallery views, the Catalog Display's gallery view mode handles its own multi-image rendering.

## Settings

| Setting              | Description                                                                                                             |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Image Size**       | thumbnail (64px), small (128px), medium (256px), large (512px), or hero (1024px). Default: small.                       |
| **Aspect Ratio**     | square (1:1), landscape (4:3), portrait (3:4), or wide (16:9). Default: square.                                         |
| **Image Field Name** | If the product has multiple image fields (primary, alternate views), select which one. Empty = use the first available. |
| **Placeholder Text** | Shown when no image is available. Default: *No Image Available*.                                                        |
| **Enable Zoom**      | Click-to-zoom modal. Default: No.                                                                                       |
| **Show Caption**     | Display the product's name (or item ID) below the image. Default: No.                                                   |
| **CSS Classes**      | Extra CSS classes for styling.                                                                                          |

## What it depends on

Product Image reads from the image fields mapped in the catalog's **Image Fields** section. If no image fields are configured there, the block shows the placeholder ("No Image Available") for every product.

To set up image fields: **Catalogs** → open the catalog → scroll to **Image Fields** → click **+ Add Image Field** and map each NetSuite image field you want available (e.g. *Store Display Image*, *Website Featured Image URL*). Rebuild the catalog. The **Image Field Name** dropdown in this block then lists the fields you've mapped.

## How it works

* Reads the current product's image list from the catalog's Image Fields output.
* If **Image Field Name** is set, picks that specific image field; otherwise uses the first available.
* Renders inside a responsive container with the configured aspect ratio.
* Shows a pulse animation while loading, a warning icon on error, and the placeholder if no image URL is set.
* When **Enable Zoom** is on, hovering shows a magnifying-glass hint; clicking opens a modal with the full-size image.

{% hint style="info" %}
Use **hero** size on product detail pages where the image is the main visual. Use **small** or **thumbnail** inside grid catalog cards. **Aspect ratio** controls how the container scales — landscape works well for wide product photography, portrait for tall items.
{% endhint %}

## Examples

**Detail page hero.** Product Image with size = hero, aspect = landscape, zoom = on, caption = on.

**Catalog card thumbnail.** Inside a Catalog Display grid slot, Product Image with size = small, aspect = square, zoom = off.

**Multi-view product detail.** Multiple Product Image blocks each with a different Image Field Name (front, back, side) for a quick alternate-views layout.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Product Field</strong></td><td>For text-based product fields alongside the image.</td><td><a href="/pages/CmCrwau8ZNjfB17FA7f3">/pages/CmCrwau8ZNjfB17FA7f3</a></td></tr><tr><td><strong>Catalog Display</strong></td><td>The catalog block whose card images this typically populates.</td><td><a href="/pages/dAjRJ2GOz4uRXrOSvCJA">/pages/dAjRJ2GOz4uRXrOSvCJA</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/product-components/product-image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.