Skip to main content
Version: 3.x

Set up the visual preview

Version
3.x
Updated
View markdown

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

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:

FormatsMaximum size
Product base imageJPG, PNG, GIF, TIF, BMP1 MB
Answer visualization imageJPG, PNG only2 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.
Last updated on