The Product Designer

The designer that opens on a product page is built on the Fancy Product Designer (FPD) JavaScript library. This page explains the core concepts you will encounter everywhere — in the designer UI, in the JavaScript API, and in the data that ends up on your cart line items.

The full API reference of the designer library — the FancyProductDesigner class, views, all Options, and pricing rules — is generated from the source and available under Designer API.

Core concepts

FPD product

An FPD product is the design template configured in the admin: one or more printable views with pre-placed elements. It is independent of the Shopify product — the two are linked through the app configuration, so one Shopify product can expose one or many FPD products (selectable designs).

Views

A view is a single design surface (e.g. front and back of a shirt, or the single face of an engraving plate). Each view has:

• its own canvas with a defined stage size (width × height in pixels),
• an optional printing box — the rectangle that is actually produced/exported,
• an optional set of layout- and dependency rules (see Layouts).

Customers switch views through the view navigation; programmatically the current view is an index on the designer instance.

Elements

Everything placed on a view is an element. There are two families:

• Image elements — uploads, gallery images, designs, QR codes.
• Text elements — plain text, curved text, text boxes.

Elements carry parameters that control what the customer may do with them: draggable, resizable, rotatable, removable, editable, zChangeable, color options, bounding boxes, and more. Elements added by the customer at runtime are flagged as user content (isCustom) and are treated differently from template elements when exporting or restoring designs.

Two element parameters matter often in practice:

• excludeFromExport — the element is visible in the designer but not part of the print export. Base/mockup images in real shop configurations are typically configured this way.
• replace / replace groups — a new element replaces an existing one instead of being added on top (e.g. swapping the motif in a fixed slot).

Designer UI building blocks

The designer UI is composed of:

Building block	What it does
Main bar / modules	The tab or off-canvas navigation holding the modules listed below
Views navigation	Switch between design surfaces
Element toolbar	Context toolbar for the selected element (font, color, size, position…)
Actions bar	Global actions such as undo/redo, reset, zoom, snap lines

Modules

Modules are the panels a customer works with. Which modules appear is configured in the admin per shop/product:

Module	Purpose
products	Choose between multiple FPD products (designs)
images / uploads	Upload own images or pick from galleries
text	Add new text elements
text-layers	Edit all existing text elements in one list
designs	Pre-made design/clipart categories
layouts	Switch the whole view between predefined layouts
layers / manage-layers	Reorder and manage all elements
names-numbers	Batch personalization (e.g. team jerseys)
text-to-image	Generate images from text
qr-code	Generate and place QR codes
save-load	Save designs and load them later

Storefront replacement modules

On the Shopify storefront some of these modules are additionally available as external web components that render outside the designer canvas — directly in the product page layout (e.g. an images upload card or a text editor card under the product form). These are covered in External modules.

Layouts

Layouts let a customer switch the entire arrangement of a view with one click while keeping their content. In this storefront build, layout data is always grouped — even a product with a single layout is treated as a group of one. Layout dependencies can hide or show elements based on the selected layout.

What happens to a finished design

When the customer adds a customized product to the cart:

1. The design is serialized (all views, all elements with their parameters).
2. Preview images are exported from the canvas.
3. The serialized design and preview are stored server-side (line item cache), and the cart line item receives _fpd* properties referencing them — see Cart integration.
4. After checkout, the stored design is the source for print-file processing.

This means the cart, order, and reorder/edit flows never rely on the customer's browser storage — everything needed to reproduce the design travels with the line item.