> For the complete documentation index, see [llms.txt](https://docs.in8sync.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.in8sync.com/client-admin-guide/getting-started/product-components.md). # Product Components Display product information and add items to the order. Available across Catalog and Order Form modules. Product components surface product data — fields, images, locations, vendors, variations — and let users add items to an order. They live across Catalog and Order Form modules. For barcode-based item entry on Order Form pages, see **Scan Items** in [Transaction Components](/client-admin-guide/getting-started/transaction-components.md). {% hint style="info" %} **How these fit together:** see [Common Patterns](/client-admin-guide/getting-started/common-patterns.md) for the recommended product detail page layout, and [Catalog Components](/client-admin-guide/getting-started/catalog-components.md) for the browse page a shopper arrives from. {% endhint %} ## 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. For multi-value fields (e.g. custom lists with multiple selections), this setting shows all values when selected. | | **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). For badge and chip formats, you can also control the visual size. | | **Dynamic Font Size** | (Badge and Chip formats only) Dynamically adjust the text size based on content — useful for status badges or tags where space is tight. When enabled, the font shrinks to fit long text. Default: off. | | **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. For fields that support multiple values (e.g. a custom list field marked as multi-select in NetSuite), the block renders all selected values. The **Value Format** determines how they're presented — badge/chip format renders each value as a separate badge, list format renders them as a comma-separated list. When using badge or chip formats, enable **Dynamic Font Size** if badges are displayed in tight spaces or you expect long text values. The font will scale down to keep all content readable within the badge bounds. {% 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. **Multi-value custom field.** A Product Field for a custom `custitem_feature_tags` field (a multi-select list) with Value Format = badge. The product's multiple selected tags render as individual badges on the card, with Dynamic Font Size on to keep them readable if tags are long. ### 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. *** ## 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. *** ## Product Locations A read-only table showing per-location stock for the current product. Columns include location name, quantity available, quantity on hand, quantity committed, unit of measure, and average cost. Quantities are colour-coded (green positive, yellow zero, red negative). You choose which columns appear. The block has a small Locations Settings modal that controls which locations are shown, which columns appear, and whether stock refreshes in real time. ### Available in * Catalog modules * Order Form modules * Public Page modules ### When to use * Product detail pages where stock-by-location matters (multi-location retail, B2B with regional warehouses). * Order form pages where the cashier needs to see availability before adding items. * Anywhere users need to know "where is this in stock?". For a single-line stock indicator on a card, use **Product Field** with the relevant stock field instead. ### Settings | Setting | Description | | ---------------------- | ---------------------------------------------------------------------------------------------- | | **Locations Settings** | Opens the configuration modal — which locations to show, which columns, and refresh behaviour. | The configuration modal supports: * **Selected Locations** — explicit list of NetSuite locations to show. Empty (default) = show all enabled subsidiary locations. * **Cross-Subsidiary Locations** — additional location IDs from other subsidiaries to surface alongside the active subsidiary's. Default: none. * **Realtime Sync** — re-fetch stock continuously while the page is open (rather than only on page load). Default: off. * **Show Refresh Button** — show a manual *Refresh* button for on-demand stock pulls. Default: on. * **Visible Columns** — which columns to show. Defaults to all except Avg Cost. Available columns: *Location Name*, *Quantity Available*, *Quantity On Hand*, *Quantity Committed*, *Unit of Measure*, and *Avg Cost* (off by default — enable it when staff need to see average cost per location). ### How it works 1. Reads the current product from session state. 2. Reads the subsidiary's enabled locations from the app store. 3. Merges the location stock data with the enabled-locations list (filtering out disabled locations). 4. Includes cross-subsidiary locations if that's enabled in the subsidiary settings. 5. Renders the table with the configured visible columns: * **Location Name** * **Quantity Available** — green (>0), yellow (=0), red (<0). * **Quantity On Hand** * **Quantity Committed** * **Unit of Measure** * **Avg Cost** — shown only when enabled; displays *—* when no average cost is recorded. In edit mode, sample data is shown if the page doesn't have a real product loaded. {% hint style="info" %} The list of locations shown is driven by the subsidiary's location configuration — disabled locations are filtered out automatically. To change which locations appear, your NetSuite Admin updates the subsidiary settings. {% endhint %} {% hint style="warning" %} **Catalog prerequisite:** Product Locations reads inventory data that the catalog must include. Enable **Locations** in the catalog's Settings (Catalogs → open catalog → Settings → *Locations*) and then **Reprocess** the catalog. Without this, the block renders but shows no stock data. {% endhint %} ### Examples **Product detail stock view.** Product Locations sits below the price and add-to-order on a product detail page, showing live availability across all enabled locations. **B2B reorder context.** Product Locations on a Catalog Display product detail view so the buyer can see which warehouse to ship from. **Multi-brand stock without exposing subsidiary names.** If your organization sells the same customer account across multiple subsidiaries but doesn't want shoppers to see internal subsidiary names, use **Cross-Subsidiary Locations** with the **Location Name** column configured to show a customer-friendly label instead of the raw NetSuite location name. *** ## Product Vendor A read-only table showing every vendor associated with the current product. Four columns: vendor name, vendor code, cost (USD), and a *Preferred* / *Standard* status badge. The block has no settings — it renders the product's vendor list as-is. ### Available in * Catalog modules * Order Form modules * Public Page modules ### When to use * B2B procurement workflows where the user needs to see all vendors that supply a product. * Product detail pages for internal staff who manage purchasing. * Vendor selection contexts where you want at-a-glance visibility of options. If the product has only one vendor or vendor info isn't relevant to your users, skip this block. ### What it depends on Product Vendor reads the `itemVendors` data from the current product. That data is only included in the catalog if **Item Vendor** is enabled in the catalog's Settings. | What to verify | Where | | ------------------------------------------------------ | -------------------------------------------------------------- | | **Item Vendor** toggle is on | **Catalogs** → open the catalog → **Settings** → *Item Vendor* | | The catalog has been rebuilt after enabling the toggle | **Catalogs** list → **Reprocess** on the catalog row | If Product Vendor shows an empty state on every product, the likely cause is that the catalog was built before Item Vendor was turned on. Reprocess the catalog and the vendor data will populate. ### Settings This block has **no configurable settings**. It renders the current product's vendor list directly. ### How it works 1. Reads the current product's `itemVendors` from session state. 2. Renders a 4-column table: * **Vendor Name** * **Vendor Code** * **Cost** (formatted as USD currency) * **Status** (badge: green *Preferred* or grey *Standard*, based on the `preferred` flag) 3. If no vendors are configured (or no item is loaded), the block shows a short empty-state message. ### Examples **Procurement detail page.** Product Vendor on a B2B catalog product detail page so the buyer can compare vendor costs and pick the preferred one. **Internal product reference.** Product Vendor on an internal-only Page module used by product managers to review supplier configurations. *** ## 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](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-68faf484ec3bfd0a08a6ddfb9f33676919e80a30%2Fpb-product-variations.png?alt=media) ### 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. If you don't want customers ordering the parent item directly (only its specific size/colour variants), make sure the parent item itself isn't set up as orderable in your catalog — Product Variations is what lets the shopper pick a real, sellable child SKU instead. ### Settings | Setting | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | **Settings** | Opens the configuration modal — single-option behaviour, dropdown layout, and smart option filtering. | | **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. ### Dropdown availability — smart filtering When you're using dropdown mode with multiple attributes (for example, size and colour), the component automatically filters each dropdown to show only options that have matching products. **Why this matters:** In dropdown mode, once the user selects one attribute (e.g. size), the second dropdown shows only the colours available for that size. If the user picks a size that has no red items, the red option disappears from the colour dropdown. This prevents the user from selecting a combination that results in "no products available". **How it works:** After each selection, the system checks all child products and shows only options that produce a valid combination. The remaining options are always clickable and will find a product. {% hint style="info" %} This filtering applies only in **dropdown mode**. In grid or list mode, all options remain visible because the user can see the full matrix and empty cells. {% endhint %} ### 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. *** ## 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. *** ## Product Attachment A button that downloads or opens a file linked from a product field — spec sheets, datasheets, manuals, certificates, anywhere a product has an attachment URL stored on its record. The button reads any field on the product that contains a URL (standard fields like description, or custom fields you've added in NetSuite for attachments). When the user clicks, the file downloads with a sensible filename, or opens in a new tab if you've configured it that way. ### Available in * Catalog modules * Order Form modules ### When to use * Product detail pages where you want a *Download Spec Sheet* or *View Datasheet* button. * B2B catalogs with rich product documentation (PDFs, technical drawings, certifications). * Product cards inside a Catalog Display slot to surface a quick-access file link. For static images, use **Product Image** instead. For copy-to-clipboard text behaviour, use **Product Field Copy** (a small variant of Product Field). ### What it depends on The **Attachment Field** picker only lists fields that are mapped in the catalog's **NetSuite Fields** section. If the custom field holding your attachment URL isn't in that list, add it there first: **Catalogs** → open the catalog → **NetSuite Fields** → **+ Add Field** → pick the field → Save & Update. It will then appear in the Attachment Field dropdown for this block. ### Settings | Setting | Description | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Attachment Field** | The product field that holds the file URL. Pick from standard fields (Product Name, Item ID, Description) or any custom field mapped in the catalog's NetSuite Fields section. | | **Link Label** | The button label users see (e.g. *Download Spec Sheet*). | | **Download Filename** | Override the auto-generated filename. Leave blank to use *-* as the filename. | | **Use Matrix Child** | For matrix parent products, use the selected child variant's field instead of the parent's. *true* / *false*. | | **Open in New Tab** | Open the file in a new browser tab instead of downloading. *true* / *false*. | ### How it works 1. Reads the configured field from the current product (or the selected matrix child if *Use Matrix Child* is on). 2. If the value is a valid URL, renders a button labelled with **Link Label**. 3. On click, either downloads the file (cross-origin URLs are fetched and saved client-side) or opens the URL in a new tab, depending on **Open in New Tab**. 4. If the field is empty or not a valid URL, the block doesn't render — keeping the page clean. ### Examples **Spec sheet button.** Field: *custitem\_spec\_sheet\_url*, Link Label: *Download Spec Sheet*, Open in New Tab: false. Renders a download button for any product that has a spec-sheet URL. **Open in new tab.** For HTML datasheets that look better in a browser than downloaded, set *Open in New Tab* to true and Link Label to *View Datasheet*. *** ## Product Custom List Table A configurable table that runs a saved search or SuiteQL query scoped to the current product and renders the results. Use it when a product page needs to show related data the standard product-field blocks can't surface — recent purchase history, related items, location-specific stock movements, or any other custom list. The block resolves the current product's internal ID at render time and substitutes it into the query, so each product page automatically shows its own data without per-page configuration. ### Available in * Catalog modules * Order Form modules * Public Page modules ### When to use * Product detail pages that need to show data from a NetSuite saved search filtered to the current item. * Tables of historical transactions, related items, or any list you'd otherwise build by hand. * Catalog cards (inside a Catalog Display slot) where you want to surface a small per-item table. For displaying a single product field, use **Product Field**. For a wide-scope transaction search across all transactions, use **Transaction Search**. ### Settings The block opens a configuration modal that handles all of its setup: | Setting | Description | | ------------------- | ---------------------------------------------------------------------------------------------------- | | **Query Mode** | *Saved Search* (uses a NetSuite saved search by ID) or *SuiteQL* (writes a SuiteQL query directly). | | **Saved Search ID** | When mode is Saved Search — the internal ID of the saved search. | | **SuiteQL Query** | When mode is SuiteQL — the query text. Use placeholder tokens for the current product's internal ID. | | **Columns** | Which result columns to show in the table, with custom labels and ordering. | | **Pagination** | Page size and whether pagination controls are shown. | ### How it works 1. Reads the current product's internal ID from page context. 2. Substitutes the ID into the configured query (saved search filter or SuiteQL parameter). 3. Runs the query, paginates the results, and renders them in a table with the columns you configured. 4. Re-runs when the user navigates to a different product. In edit mode, the block shows a placeholder card with the current configuration — no data fetching happens until the page is live. ### Common issues * **"Not configured" warning** — the saved search ID or SuiteQL query is empty. Open the configuration modal and fill it in. * **No data shown for a product that should have data** — the query may not be filtering by the current product correctly. Double-check the ID placeholder in your SuiteQL or the filter on the saved search. * **Slow load** — large result sets paginate; if the query itself is slow, narrow the saved search filters. *** ## Add to Order Button The button that puts a product on the order. Two visual variants (compact icon-only or full with quantity controls), plus configurable handling for out-of-stock items. For matrix parent products, this block doesn't render — use **Product Variations** instead, which has its own multi-variant Add to Cart action. ### Available in * Catalog modules * Public Page modules ### When to use * Every product detail page where the user can buy. * Inside Catalog Display product cards (compact variant) for quick-add functionality. * B2B and B2C order flows. For Order Form contexts where products come from other paths (search, scan, manual entry), Add to Order Button isn't needed — Order Lines handles those flows directly. ### Settings | Setting | Description | | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Button Variant** | compact (small icon + text, with a checkmark badge if the item is already in the cart) or full (quantity spinner + button + checkmark badge). Default: full. | | **Out of Stock Behavior** | hide (don't render), disable (greyed out), allow (always enabled), allowWithCondition (enabled only if a condition expression evaluates true). Default: disable. | | **Condition Expression** *(only visible when Out of Stock Behavior = allowWithCondition)* | A JavaScript-style expression evaluated against the item. Example: `quantityavailable > 5`. | | **CSS Classes** | Extra CSS classes for styling. | ### How it works 1. Reads the current product. If it's a matrix parent, the block doesn't render. 2. **Compact variant** — small button + cart icon. If the item is already in the cart, a checkmark badge appears. 3. **Full variant** — quantity spinner (+ / − buttons), Add to Cart button, plus the in-cart checkmark badge. 4. Quantity is clamped to `quantityAvailable` unless **Out of Stock Behavior** is *allow* or *allowWithCondition*. 5. If **Quantity Adjusts Rate** is on in the Order Lines settings, changing the quantity may update the unit price based on the configured pricing tiers. 6. The **`catalog-beforeAddToCart`** JavaScript hook fires before adding — return `false` or set `context.cancel = true` to abort. 7. On success, the line item is created with `source: 'catalog'`, deduplicated by item ID, added to the cart store, and a success toast is shown. The condition expression has access to: `quantityavailable`, `internalid`, `itemid`, `displayname`, `price`, and all other item properties. {% hint style="info" %} Use **compact** inside Catalog Display grid cards for quick-add. Use **full** on product detail pages where the user picks a quantity before adding. {% endhint %} ### Examples **Catalog grid compact button.** Inside Catalog Display's grid content slot, Add to Order Button with variant = compact. Users browse and one-click add from the grid. **Detail page quantity entry.** On a product detail page, Add to Order Button with variant = full. Users adjust quantity then click Add. **Backorder-allowed.** Out of Stock Behavior = allow on a product where backorders are accepted. Users can add even when stock is 0. **Conditional override.** Out of Stock Behavior = allowWithCondition with expression `quantityavailable > -10`. Backorders allowed up to 10 units below stock. *** ## When you'd reach for this category * **Product detail page** → Product Image (hero) + Product Gallery (additional shots) + Product Field (name, SKU, price, description) + Product Variations + Add to Order Button + Product Locations. * **Catalog grid customisation** → Product Field and Product Image inside the Catalog Display slots. * **B2B procurement views** → Product Vendor and Product Locations for supplier and stock visibility. * **Spec sheets and downloads** → Product Attachment for file links stored on the product record. * **Related items / per-product reports** → Product Custom List Table Result driven by a saved search or SuiteQL query. ## Related
Catalog ComponentsThe browse-side blocks — Catalog Display, Category Sidebar, filters.Catalog Components
Product VariantsHow variants are configured on the catalog side.Product Variants
InventoryWhere stock data behind Product Locations comes from.Inventory