> For the complete documentation index, see [llms.txt](https://help.pixfizz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pixfizz.com/personalization/live-preview-experience.md).

# Live Preview Experience

## Overview

Live Preview is one of three personalization experiences available in Pixfizz Core. It provides a streamlined product page where customers select options and see a real-time visual preview of their product update as they make choices — without ever entering the full Design Tool editor.

***

### The three personalization experiences

Pixfizz offers three distinct ways for customers to personalize products. Each is suited to different product types and levels of customization:

* **Design Tool** — The full editor experience. Customers upload images, add text, choose layouts, and build multi-page products interactively. Used for photo books, canvas prints, greeting cards, calendars, and other products where the customer controls the layout.
* **Photo Prints** — A dedicated bulk ordering interface for cut print products. Customers upload photos, select sizes, set per-photo quantities, and crop images. See [Photo Prints — Overview](https://claude.ai/chat/photo-prints-overview.md).
* **Live Preview** — A simplified option-selection experience with a real-time product preview. Customers choose from available options (e.g. color, finish, cover design, personalization text) and the product image updates instantly to reflect their selections. No editor is opened. The customer adds to cart directly from the product page.

All three experiences use the same underlying Pixfizz product hierarchy (Templates, Designs, Product Attributes, Collections) and the same fulfillment pipeline. The difference is in how the customer interacts with the product before purchase.

***

### How it works

#### The customer experience

1. The customer arrives at a product page and sees a product preview image.
2. They select options — for example, a cover color, a text line, or a material finish.
3. As each option is selected, the preview image regenerates in real time to show the updated product.
4. When satisfied, the customer clicks **Add to Cart** and proceeds to checkout.

There is no editor step. The customer does not manipulate layouts, drag images, or interact with a design canvas. The entire personalization happens through option selectors on the product page.

#### What powers the preview

The live preview relies on **element substitutions** — a Pixfizz Core feature where selecting an option value triggers a change in the design. For example:

* Selecting "Red" from a color option swaps the background layer to a red version.
* Selecting "Lined" from a paper style option swaps the interior page layout.
* Entering a name in a text option renders that text onto the product preview.

Element substitutions are configured in the admin on the option values and linked to specific design elements. The `px-project-preview` web component on the product page detects the option change and renders an updated preview image.

Options can also affect pricing. An option that has both `has_element_substitutions` and `has_pricing` set will update both the preview and the displayed price when the customer makes a selection.

***

### When to use Live Preview

Live Preview is best suited for products where:

* The customer makes choices from a defined set of options, but does not need to freely edit a layout.
* A single-page or single-face product where the visual changes are driven by option selections (color, material, cover design, text).
* The product has a manageable number of option combinations that can be designed in advance using element substitutions.
* You want a fast, frictionless add-to-cart experience — no editor loading time, no learning curve.

**Common product examples:**

* Notebooks and journals (cover design, color, personalized name)
* Phone cases (design selection, optional text)
* Mugs with pre-designed artwork and text personalization
* Simple single-image products where the customer uploads one photo and selects options (finish, size, frame color)

For products that require full layout control (photo books, multi-page calendars, complex collages), use the Design Tool instead.

***

### Setup requirements

Live Preview products are set up using the same product hierarchy as any other Pixfizz product:

1. **Template** — Defines the production specification as usual.
2. **Design(s)** — Each design contains the visual elements that will be swapped by element substitutions. You need to build out the design pages/elements for every option combination that should produce a visual change.
3. **Element substitutions** — Configured on the option values to link each selection to the correct design element swap.
4. **Product Attribute** — Set up with the appropriate variants and options. Options that drive the preview must have `has_element_substitutions` enabled.
5. **Collection** — Publish as usual.

#### Shopify + Pixfizz

In Shopify deployments, Live Preview products use the `options-to-cart` integration type, set via the `pixfizz.integration_type` metafield on the Shopify product. This launches the Pixfizz option selection and preview experience in a modal rather than redirecting to the full editor.

#### Full Pixfizz (Shopper)

In Full Pixfizz deployments, the product page renders the option selectors and the live preview directly. The product custom field `btn_add_to_cart` should be enabled so the product page shows an **Add to Cart** button instead of the default **Design Now** button.

***

### Related custom fields

| Field                            | Type    | Purpose                                                                 |
| -------------------------------- | ------- | ----------------------------------------------------------------------- |
| `btn_add_to_cart`                | boolean | Shows Add to Cart button on product page, bypassing the Design Tool     |
| `btn_design_tool`                | boolean | Optionally shows a secondary "Design More" button alongside Add to Cart |
| `preview_alt_tag`                | text    | Alt tag for the live preview image (SEO)                                |
| `remove_live_preview_img_schema` | boolean | Excludes the live preview image from schema.org structured data markup  |
| `do_not_save`                    | boolean | Adds to cart without creating a saved project                           |

***

### Tips

* The quality of the Live Preview experience depends entirely on how well the element substitutions are set up. Every meaningful option combination needs a corresponding substitution rule and design element.
* Preview rendering speed is fast for simple substitutions (color swaps, text overlays) and may take slightly longer for complex multi-element changes.
* Live Preview products still go through the full Pixfizz fulfillment pipeline — artwork is generated, job tickets are created, and files are delivered to production just like any other personalized product.
* For image upload options within a Live Preview product, the uploaded image renders into the preview in real time using the same substitution mechanism.