# Product Gallery

Renders all of a product's image fields together — typically multiple angles, packaging shots, or alternate views. Two display modes: a **gallery** (thumbnail grid with a main image) or a **slider** (swipeable carousel with optional autoplay).

## Available in

* Catalog modules
* Public Page modules

## When to use

* Product detail pages with multiple images per product (apparel, furniture, complex products that need angles and details).
* B2C catalogs where rich visuals are central to the buying experience.
* Public Pages showcasing products without authentication.

For a single-image product, use **Product Image** instead. For carousel-of-products (not images of one product), use the gallery view mode of **Catalog Display**.

## Settings

| Setting                                | Description                                                                         |
| -------------------------------------- | ----------------------------------------------------------------------------------- |
| **Display Mode**                       | *Gallery* (thumbnail grid + main image) or *Slider* (swipeable carousel).           |
| **Selected Fields**                    | Which image fields on the product to include. Pick from the catalog's image fields. |
| **Thumbnail Size**                     | Small / Medium / Large — affects the gallery view.                                  |
| **Columns**                            | Number of thumbnail columns — 2 to 6.                                               |
| **Enable Zoom**                        | Click an image to open a zoom modal.                                                |
| **Enable Fullscreen**                  | Allow opening the gallery in fullscreen for detailed inspection.                    |
| **Enable Keyboard Navigation**         | Arrow keys move between images.                                                     |
| **Auto Play** *(slider only)*          | Start the carousel auto-advancing.                                                  |
| **Auto Play Interval** *(slider only)* | Seconds between slides.                                                             |

## What it depends on

Product Gallery reads image fields that must be mapped in the catalog's **Image Fields** section. If no image fields are configured there, the gallery has nothing to render.

To set up image fields: **Catalogs** → open the catalog → scroll to **Image Fields** → click **+ Add Image Field** and map each NetSuite image field (e.g. *Store Display Image*, *Website Featured Image URL*). Then click **Save & Update** to rebuild.

The **Selected Fields** setting in this block lists only the image fields already mapped in the catalog. If a field you expect isn't in the list, add it to the catalog's Image Fields section first.

## How it works

In **gallery mode**, the block reads the selected image fields from the current product, renders the first one as the main image, and shows the rest as a thumbnail grid below. Clicking a thumbnail swaps the main image. Click the main image to open a fullscreen zoom view.

In **slider mode**, all images become slides in a swipeable carousel. Optional autoplay cycles through them automatically.

If a product has only one image, the block renders that single image. If it has none for the selected fields, the block doesn't render.

## Examples

**Apparel detail page.** Display Mode: Gallery. Selected Fields: *front\_image, back\_image, side\_image*. Thumbnail Size: Medium. Columns: 4. Enable Zoom: true.

**Auto-rotating carousel.** Display Mode: Slider. Auto Play: true, Auto Play Interval: 4 seconds. Useful for a homepage hero featuring a single product's various angles.

## 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 Image</strong></td><td>Single product image with size and zoom controls.</td><td><a href="/pages/QTZjehmyyA79i3Wkw0gc">/pages/QTZjehmyyA79i3Wkw0gc</a></td></tr><tr><td><strong>Catalog Display</strong></td><td>The catalog browse block — has its own gallery view mode for grids of products.</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-gallery.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.