How StoreCanvas Imports Fancy Product Designer JSON: Schema Mapping & Geometry Translation

Migrating customizable products from Fancy Product Designer (FPD) to a modern WooCommerce stack shouldn’t mean manually re-measuring canvas zones and re-uploading every layer by hand. Here is how StoreCanvas translates legacy FPD JSON schemas into responsive vector stages and print-ready PDF geometries.

The Problem with Legacy FPD Data Structures

Fancy Product Designer was originally architected in the early days of WordPress customizers. It relied on fixed-pixel canvas coordinates, absolute pixel positioning, and nested views defined in large serialized arrays. When displayed on a desktop browser, a stageWidth: 800 by stageHeight: 1000 canvas looked fine. But when mobile commerce took over, stores faced severe layout shifts and distorted print zones because the coordinate system was tied to a desktop canvas resolution rather than physical product geometry.

Furthermore, FPD stores raw product configurations across multiple custom post types and postmeta keys. When store owners want to migrate away to improve page load speed or escape unmaintained CodeCanyon code, the thought of rebuilding 50 customizable merchandise products is the primary blocker.

How StoreCanvas Understands FPD JSON

In StoreCanvas, product geometry is normalized to relative percentages coupled with real-world physical millimetres. This decouples the shopper’s screen size from the physical print file.

When you paste an FPD export into StoreCanvas (or use the automated importer), the internal SC_FPD_Import::map() method performs three distinct transformations:

1. Stage Dimensions → View Normalization

In FPD, views represent the sides of a product (e.g. Front, Back, Left, Right). StoreCanvas extracts each view and calculates the aspect ratio:

// FPD Legacy Schema:
{
  "title": "Front View",
  "stageWidth": 1000,
  "stageHeight": 1200,
  "elements": [ ... ]
}

// Converted to StoreCanvas View Object:
{
  "id": "view_front",
  "name": "Front View",
  "aspect_ratio": 0.8333,
  "natural_width": 1000,
  "natural_height": 1200
}

2. The Printing Box → Responsive Print Zones

FPD defines its printable area using an absolute pixel bounding box (printing_box):

// FPD Printing Box:
"printing_box": {
  "left": 250,
  "top": 300,
  "width": 500,
  "height": 600
}

StoreCanvas normalizes these coordinates against the stage dimensions into floating-point percentages:

// StoreCanvas Normalized Area:
$x_pct      = ($left / $stage_width) * 100;     // 25.0%
$y_pct      = ($top / $stage_height) * 100;     // 25.0%
$width_pct  = ($width / $stage_width) * 100;    // 50.0%
$height_pct = ($height / $stage_height) * 100;   // 50.0%

Because the print zone is stored as a percentage of the mock-up, the interactive canvas scales fluidly from an iPhone screen up to a 4K studio display without ever misaligning the print zone.

3. Layer Hierarchy & Inking Blend Modes

FPD products typically contain background apparel photos, overlay graphics, and placeholder text. StoreCanvas parses these elements into three clean buckets:

• Background / Product Mockup: Converted to a non-selectable base layer. StoreCanvas applies an SVG/Canvas multiply global composite operation so that customer artwork looks like it is printed into the cotton fabric rather than hovering as an opaque digital sticker.
• Editable Text Layers: Font families, default text strings, font sizes, and color palettes map directly to WooCommerce product options. If the FPD schema specifies character limits or curved text parameters, StoreCanvas preserves those constraints.
• Vector Clipart & Badges: Raster elements with high-res source URLs are retained, while SVG elements are cataloged into StoreCanvas’s self-hosted vector clipart library.

Generating 300 DPI Print-Ready Output from Imported Assets

The ultimate goal of importing FPD products is not just showing a visual customizer — it is getting clean, high-resolution production artwork into the hands of your print shop.

Once imported, StoreCanvas uses physical print dimensions (e.g. 254 × 305 mm) along with our native PDF 1.4 compilation engine. When a customer places an order:

1. The vector artwork and high-res uploaded bitmaps are assembled in memory.
2. A configurable 3.0 mm BleedBox is calculated outside the trim line.
3. The PDF is compiled with explicit /MediaBox, /BleedBox, and /TrimBox dictionary keys.
4. The task is handed off to Action Scheduler to run asynchronously in the background, preventing PHP timeouts on shared hosting.

How to Import Your FPD Products Today

To migrate your existing products:

1. Open your WordPress admin with Fancy Product Designer active.
2. Export the product configuration as a JSON file or copy the raw JSON payload.
3. In WooCommerce › Products, open or create a product with StoreCanvas enabled.
4. Navigate to the StoreCanvas metabox, click Import from FPD, paste the JSON payload, and click Translate Schema.
5. Review the print boundaries and physical dimensions, then hit Update.

For more details on migration specifics, visit our dedicated Fancy Product Designer Alternative guide or test the editor in our Live Demo Sandbox.

Related: StoreCanvas: WooCommerce product personalization · StoreCanvas setup docs