# How a product fits together

> The Product → Pages → Questions → Answers model, and where rules, calculations and the preview attach.

Source: CBX documentation, version 3.x (released). Canonical page: https://docs.configbox.at/docs/admin-guide/products/how-a-product-fits-together. Last updated 2026-07-20.

---
> **Audience:** store admins · **Scope:** the concepts behind every configurable product · **Last reviewed:** 2026-07-20

**What this does** — Five minutes of orientation that make every other article in this system
obvious. Read it once; skim it again whenever a form field puzzles you.

## The hierarchy

```
Product            "Shirt Configurator"
 └─ Page           step 1: "Fabric & Fit"
     └─ Question   "Which fabric?"  (radio buttons, required)
         └─ Answer "Linen"  (+ €20, picture, selected by default)
```

- **Product** — the thing being sold. Carries the base price, tax class, images, which catalogs
  it appears in, and how its detail page and configurator behave.
- **Page** — one step of the configurator. Customers move through pages with tabs and/or
  next-previous buttons; each page has a title and optional intro text.
- **Question** — one input on a page. Its **question type** decides the widget: radio buttons,
  dropdown, checkbox, clickable images, text box, multi-line text, slider, calendar, color
  picker, RAL color picker, file upload, or predefined choices with a free-text extra.
- **Answer** — one selectable choice of a question (for the choice-type questions). An answer
  belongs to exactly one question and carries its own price, image, description, availability
  and ordering.

## What attaches to the hierarchy

- **Rules** — on questions and answers. A rule decides whether that question/answer is shown,
  based on other selections or on who the customer is. This is what makes the configurator
  reshape itself as customers choose. → [Rules](https://docs.configbox.at/docs/admin-guide/rules/)
- **Calculations** — named formulas belonging to the product. Attach one to a question or answer
  and its price (or weight, or an input's min/max bound) becomes computed instead of static.
  → [Pricing & calculations](https://docs.configbox.at/docs/admin-guide/pricing/)
- **Visual preview** — per product you choose none, **Composite Image** (2D: a base image plus
  one overlay layer per selected answer) or **ShapeDiver** (interactive 3D; questions and answers
  drive model parameters). → [Set up the visual preview](https://docs.configbox.at/docs/admin-guide/products/set-up-the-visual-preview)
- **Detail panes** — the tabbed info blocks on the product's detail page (specs, delivery info…).
- **Product Lists** — the catalogs on your storefront; a product appears in the lists you tick on
  its form. → [Manage product lists](https://docs.configbox.at/docs/admin-guide/products/manage-product-lists)

## What the customer experiences

The storefront side of everything above: a product list → a product detail page → the
configurator, stepping through your pages with a live price summary, a live preview, questions
appearing and disappearing per your rules — then add-to-cart and checkout.

![A product list on the storefront](./img/storefront-listing.jpeg)

## The build workflow (and the reading order)

1. **[Create the product](https://docs.configbox.at/docs/admin-guide/products/add-a-product)** — title, list placement, base price, visibility.
2. **[Add pages, then questions](https://docs.configbox.at/docs/admin-guide/products/add-pages-and-questions)** — the steps and their inputs.
3. **[Add answers](https://docs.configbox.at/docs/admin-guide/products/add-answers)** — the choices, with prices and images.
4. **Add logic** — [rules](https://docs.configbox.at/docs/admin-guide/rules/) for show/hide behavior.
5. **Price it properly** — [calculations](https://docs.configbox.at/docs/admin-guide/pricing/) where static prices aren't enough.
6. **Merchandise** — the [visual preview](https://docs.configbox.at/docs/admin-guide/products/set-up-the-visual-preview), detail panes,
   [list placement](https://docs.configbox.at/docs/admin-guide/products/manage-product-lists), reviews.

Build a little, then look at the storefront, then build more — the configurator is live the moment
the product is displayed, and managers can even edit right from the storefront.