# Product Field

Renders one field from the current product (the item the page is rendered for, or the item the user clicked in the catalog). Choose which field, how to format the value, and the layout style.

The field list is dynamic — it resolves from the actual catalog's fields, including custom fields you've added in NetSuite.

## Available in

* Catalog modules
* Order Form modules
* Public Page modules

## When to use

* Building a product detail layout — drop multiple Product Field blocks for name, SKU, price, description, weight, etc.
* Inside a Catalog Display slot to add a custom field to product cards.
* Anywhere you need to surface one specific product attribute.

For multi-image galleries use Product Image. For variant selection use Product Variations.

## Settings

| Setting            | Description                                                                                                                                                                                              |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Product Field**  | The field to display. Dropdown auto-populated from the catalog's standard and custom fields.                                                                                                             |
| **Product Label**  | Optional label text shown beside or above the value.                                                                                                                                                     |
| **Value Format**   | How the value is rendered: text, currency, number, badge, list, chip, compact, full. Default: text. Auto-updates when the field type changes (e.g. selecting a price field switches format to currency). |
| **Layout Style**   | form-group (label above value) or inline (label and value on the same line). Default: form-group.                                                                                                        |
| **Fallback Value** | Text shown when the field has no value. Defaults to context-aware fallbacks like *Out of Stock* or *No Price Available*.                                                                                 |
| **CSS Classes**    | Extra CSS classes for styling.                                                                                                                                                                           |

## How it works

1. The block reads the current product from the page's session state.
2. It resolves the configured field from that product.
3. It applies the configured format (currency formatting for price fields, badge styling for status, etc.).
4. For pricing fields, the value displays in the active currency for the session — so customers in multi-currency workflows see the correct local price automatically.
5. The **`catalog-beforePriceCalculation`** and **`catalog-afterPriceCalculation`** JavaScript hooks fire, letting you intercept and modify the displayed price.

For select-type fields, the block uses the `_text` suffix to display the readable label rather than the underlying ID.

{% hint style="info" %}
The Value Format auto-updates when you pick a different field — currency fields switch to currency, numeric fields to number, and so on. Override afterwards if you want a non-default format.
{% endhint %}

## Examples

**Product detail header.** Multiple Product Field blocks: *Display Name* (large), *SKU* (small), *Price* (currency, prominent), *Description* (text, multi-line).

**Card customisation.** Inside Catalog Display's grid content slot, add a Product Field for a custom *Brand* field with badge format.

**Price with override hook.** Product Field for `unitprice`, with a JavaScript block configured for `catalog-beforePriceCalculation` that applies a custom discount calculation.

## Variant: Product Field Copy

A small overlay variant of Product Field that adds a copy-to-clipboard icon button to a product card. Use it inside a Catalog Display image or content slot when you want a tap-to-copy affordance on a product field — typically SKU, item ID, or price.

**Available in:** Catalog modules, Order Form modules, Public Page modules.

**Settings:**

| Setting          | Description                                                                                     |
| ---------------- | ----------------------------------------------------------------------------------------------- |
| **Field**        | The product field whose value gets copied on click. Same field list as Product Field.           |
| **Icon**         | The icon shown on the overlay. Default: copy icon.                                              |
| **Position**     | Where the overlay sits on the product card — top-left, top-right, bottom-left, or bottom-right. |
| **Tooltip Text** | Hover tooltip. Default: *Copy*.                                                                 |

When clicked, the field value is written to the clipboard and the icon briefly switches to a checkmark to confirm. Use it as a small overlay (not a full block) inside Catalog Display product cards — for inline display of the field's value, use Product Field itself.

## 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>Display the product's image with size and aspect-ratio control.</td><td><a href="/pages/QTZjehmyyA79i3Wkw0gc">/pages/QTZjehmyyA79i3Wkw0gc</a></td></tr><tr><td><strong>Catalog Display</strong></td><td>The block whose product cards Product Field commonly customises.</td><td><a href="/pages/dAjRJ2GOz4uRXrOSvCJA">/pages/dAjRJ2GOz4uRXrOSvCJA</a></td></tr><tr><td><strong>JavaScript</strong></td><td>Catalog price calculation hooks for runtime overrides.</td><td><a href="/pages/DEHisLtYVyC4YEOvJrO0">/pages/DEHisLtYVyC4YEOvJrO0</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-field.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.