# Product Variations

A variant selector that appears for **matrix parent items** — products with attribute-based child SKUs (size, colour, material). Renders the variants as a 2D grid (two attributes), a 1D list (one attribute), or a dropdown picker, with quantity inputs per variation.

For non-matrix products, the block doesn't render — it's purely a matrix-mode UI.

![Product Variations rendering a 2D matrix with sizes across the top, colours down the side, and quantity inputs in each cell](/files/tzup8dk5QUGI41C1JNfC)

## Available in

* Catalog modules
* Order Form modules
* Public Page modules

## When to use

* Apparel catalogs with size × colour matrices.
* Products with multiple attributes that ship as separate child SKUs.
* Anywhere the product detail page should let the user pick a specific variant before adding to order.

For products without matrix variants, this block won't apply — use Add to Order Button.

## Settings

| Setting                | Description                                                                                                                                |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| **Settings**           | Opens the configuration modal — single-option behaviour and dropdown layout.                                                               |
| **Child Item Content** | Slot for content rendered inside each child variant's expandable row (use it to show extra fields, custom badges, or per-variant actions). |

The configuration modal supports:

* **Auto-Populate Single Option** — when an attribute has only one possible value, auto-select it instead of forcing the user to pick. Default: off.
* **Hide Single Option** — when an attribute has only one possible value, hide its picker entirely. Default: off.
* **Dropdowns Per Row** — number of attribute dropdowns to render per row in dropdown mode: 1, 2, or 3. Default: 1.

The matrix layout (rows / columns / dropdowns) itself is driven by the parent product's `matrixitemnametemplate` and the configured attribute *directions* in NetSuite — not by these settings.

## How it works

1. Checks if the current product is a matrix parent (`matrixtype === 'PARENT'`). If not, doesn't render.
2. Pulls all child items whose parent matches.
3. Parses the parent's `matrixitemnametemplate` to identify the attribute fields used (e.g. *Size*, *Colour*).
4. Filters those attributes by their configured display direction:
   * **Horizontal** → columns of a 2D grid.
   * **Vertical** → rows of a 2D grid.
   * **Dropdown** → combined into a dropdown picker.
5. Renders one of four matrix modes:
   * **2D grid** (one horizontal + one vertical attribute).
   * **1D horizontal** (one attribute as columns).
   * **1D vertical** (one attribute as rows).
   * **Dropdown** (single combined picker for one or more attributes).
6. Each cell or row gets a quantity input. The user types quantities and clicks *Add to Cart* to add multiple variants in one go.
7. A *View / Hide* button on each row toggles a detail panel showing the selected variation's full info.

In edit mode, the block shows a configuration warning if no attribute directions are set — letting you know the matrix won't render without them.

{% hint style="warning" %}
Product Variations depends on a NetSuite-side setup: the parent item must be a matrix parent, child items must exist, and at least one attribute must have a display direction configured. Without those, the block stays hidden at runtime.
{% endhint %}

## Examples

**Apparel size × colour matrix.** A T-shirt parent with sizes (S, M, L, XL) horizontally and colours (red, blue, green) vertically. The cashier sees a 12-cell grid and types quantities for each.

**Single-attribute dropdown.** A product with one variant attribute (length) — the block renders a dropdown picker rather than a grid.

**B2B bulk variant entry.** Apparel matrix in a B2B order form — buyer types quantities across the whole grid, clicks Add to Cart, and 12 line items go in at once.

## 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>Add to Order Button</strong></td><td>For non-matrix products — single-quantity add-to-cart.</td><td><a href="/pages/nqGGWE853dYUq8P61rlk">/pages/nqGGWE853dYUq8P61rlk</a></td></tr><tr><td><strong>Product Variants</strong></td><td>How variant items are configured in the catalog.</td><td><a href="/pages/NwQFMmcIsjECOIEI6IA9">/pages/NwQFMmcIsjECOIEI6IA9</a></td></tr><tr><td><strong>Order Lines</strong></td><td>The block where added variants land.</td><td><a href="/pages/0XacQvdUpwJMX7gVJCf4">/pages/0XacQvdUpwJMX7gVJCf4</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-variations.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.