# Set up the visual preview

> Live product visualization — 2D composite images per answer, or a 3D ShapeDiver model.

Source: CBX documentation, version 3.x (released). Canonical page: https://docs.configbox.at/docs/admin-guide/products/set-up-the-visual-preview. Last updated 2026-08-01.

---
> **Audience:** store admins · **Scope:** product visualization (2D composite / 3D) · **Last reviewed:** 2026-07-20

**What this does** — Gives the configurator its most engaging feature: a product image that
updates with every choice. Here is the demo Car doing it — the image is a stack of layers, one
per selected answer:

![The Car configurator with its live 2D preview](./img/storefront-configurator.jpeg)

## Choose the visualization type

On the product form, **Visualization → What type of visualization do you want to use?**:

- **No visualization** — the configurator runs without a preview.
- **Composite Image** — 2D layering: a **base image** plus one transparent overlay per selected
  answer. All you need is image files; this is the right choice for most products.
- **ShapeDiver** — an interactive 3D model (rotate/zoom), driven by your questions. Needs a
  prepared model on the ShapeDiver platform; questions/answers bind to its parameters.

## Set up a 2D composite preview

1. **Prepare the artwork.** One **base image** (the product's constant part) and one overlay
   per answer that changes the look — all the **same pixel size**, overlays transparent (PNG)
   except for the part they change. Consistency of size and alignment is the whole trick.
2. On the **product**: set the visualization type to **Composite Image** and upload the **Base
   image of the product visualization**.
3. On each **answer** that changes the look: upload its **Visualization Image** and set the
   **Visualization Stacking Order** — higher numbers render on top. Give each *kind* of layer a
   consistent order band (paint 10, foil design 20, rims 30 …) so layers never fight.
4. Test on the storefront: click through the answers and watch layers swap. A layer that
   "jumps" is a size/alignment mismatch in the artwork; a layer hidden behind another needs a
   higher stacking order.

Answers without a visualization image simply don't add a layer — only looks-changing choices
need artwork.

### What the storefront actually assembles

Worth knowing, because it explains most of what looks like a bug:

- **The frame appears as soon as the type is Composite Image** — before you have uploaded
  anything. An empty gap beside the questions means the type is set and the artwork is not
  there yet, not that something is broken.
- **The base image is optional.** Layers render over nothing at all, which is what you want for a
  product photographed against transparency.
- **Only the answers currently selected contribute a layer.** Answers with no visualization image
  never add one, so you only need artwork for the choices that change the look.
- **Layers are drawn in ascending stacking order** — lowest first, at the back. Two layers sharing
  a number keep whatever order the database returns them in, which is stable in practice and not
  worth relying on: give every layer its own number.

### File requirements

The two uploads do **not** accept the same things, which catches people out:

| | Formats | Maximum size |
|---|---|---|
| Product **base image** | JPG, PNG, GIF, TIF, BMP | 1 MB |
| Answer **visualization image** | JPG, PNG **only** | 2 MB |

So a GIF or BMP works as a base and is **refused** as an overlay. In practice overlays want PNG
anyway — they need transparency — but the rejection message arrives at upload time and the reason
is not obvious.

Both live under the site's public data store, in `vis_product_images` and `vis_answer_images`. Back
those up with the database; a restored database without them shows the frame and no artwork.

## Set up a 3D ShapeDiver preview

1. On the product: visualization type **ShapeDiver**, and select the **ShapeDiver model**.
2. On each question that drives the model: **Visualization → Controls a ShapeDiver parameter?**
   → pick the **parameter**.
3. On each answer of choice questions: set the **ShapeDiver choice value** the model expects
   when that answer is selected. Value questions (sliders, text) pass their entry directly.
4. Test live — the viewer updates with each selection.

The division of labor: the *model* (built on ShapeDiver) defines what can vary; CBX just
sends your customers' choices into its parameters.

## Good to know

- The preview sits beside the configurator on every page; the **Visualization** block heading
  label is settable in **Settings → Block Headings**.
- 2D overlays are lazy-loaded; enormous source images still cost bandwidth — export at the size
  you display.
- Keep a copy of the layered source file (PSD or similar) — future answers need matching
  artwork, and re-alignment without the source is painful.
- Copying a product copies its visualization setup and images.