Overview

A binding maps a calculator option (Width, Height, Material, Shape, …) to a property of the editor canvas (artboard width, background color, cut-line shape, bleed, …). When the customer changes a bound option in the editor's right panel, the canvas updates immediately. You configure bindings in Calculator Editor → Step 5 (Designer) → Designer mode → right panel → Canvas bindings.

Bindings only apply in Designer mode. Image Edit focuses on a single uploaded image — artboard framing is controlled by Image framing in Step 5 gear settings, not canvas bindings.

For Image Edit and Designer layout behavior, see Configuring Step 5 (Drag selection vs Drag image, Crop outside image, and Crop feature settings) and How customers use the editor.

Front and back sides

Designer mode can expose a Front and Back design surface (for example double-sided business cards or T-shirts). Each side has its own right-panel options and canvas bindings — the back does not copy settings from the front.

Enable and configure

1. Open Step 5 → Designer mode.
2. On the canvas preview, use the + on the Front / Back toggle at the bottom center to add a back side.
3. Click the gear beside that toggle to set Front label, Back label, and Back orientation (how the back is derived from the front — most products use Flip horizontal (mirror)).
4. In the right panel, switch between Front and Back with the segmented control at the top. Add right-panel options and canvas bindings for each side separately.

Translate front and back labels under the gear Translations tab. See Product Designer Translations.

Shared vs separate settings

If a binding is blocked on one side, the + Add binding menu explains that the other side already controls that property. Remove or move the binding there first.

On the storefront, customers switch sides with the Front / Back toggle above the zoom controls. Each side keeps its own design until save. Proof, print-ready, and canvas JSON for the back appear on the Design Files page under the back label. See Print quality and production output.

Adding a binding

1. Open Step 5 → switch to Designer mode.
2. In the right panel, scroll to Canvas bindings.
3. Use the + Add binding dropdown to pick a canvas property.
4. Configure the binding:
   • Type — How the option value translates to a canvas value.
   • Option — Which calculator option drives this binding (skip for fixed bindings).
   • Pixels per unit — For dimension bindings, how to convert option units to canvas pixels (default 96 = 1 inch).

Available bindings

Binding types

• dimension — Numeric option value × unitToPx = canvas pixels. The source can be a calculator option or a pricing variable (computed formula).
• valueMap — Pick a value per option choice (e.g. "portrait" → "portrait").
• colorMap — Pick a color per option choice (e.g. material swatch → background hex).
• imageMap — Pick an image URL per option choice (pattern swatches).
• svgPathMap — Pick an SVG path per option choice (cut-line shapes).
• fixed — A constant value that applies regardless of any option (used for default bleed / safe-zone).

Shopify-synced image swatches

When an Image swatch option uses Image source → Shopify product variants on Basic settings (see Option Basic Settings):

• Choice rows in canvas bindings come from the linked product at runtime — for example Navy, Forest — not from manually authored Values & Pricing rows.
• valueMap, colorMap, imageMap, and svgPathMap keys should match those Shopify option values.
• imageMap bindings still use images you upload or configure per choice in Step 5. The swatch thumbnail and a binding image are separate. When the canvas should show the selected variant's featured image (not a separate pattern file), use Product image → Dynamic (product / variant) instead of a per-choice imageMap. See Wallpaper and product image bindings.
• With Sync selection to Shopify variant enabled (default), choosing a swatch updates the product variant, price, cart, and Product Designer right-panel preview without reloading the page. Turn it off if the swatch should only drive bindings and calculator logic, not the cart variant.

Common recipes

Custom stickers — dimension + shape

For "Die-cut", set the svg path map value to "auto". The editor traces the customer's uploaded image to generate the cut-line automatically.

Custom wallpaper — wall size + product image

Bind the customer's wall, then bind the pattern with Product image (not background alone) when you need pan, panel seams, and true-scale preview.

Step 5: Product preview, Drag image. Add Show panels from the tools + menu when customers should see seam guides.

Copy-ready recipes (roll wallpaper, murals, metafield panel width, multi-panel assets): Wallpaper and product image bindings.

Static tiled background (no product image)

Use background with Tile on the image map only when you want a decorative tiled fill behind design elements and do not need wallpaper-style pan or panel-width preview. For wallpaper storefronts, prefer Product image above.

Artboard size — Width source + Height source

The Artboard size binding has two independent sources — a Width source and a Height source. Each can be:

• A calculator option (a number/length option, or one field of a dimensions option), or
• A pricing variable (computed from a formula).

Set Size from → Width & height sources, then choose each source. When a source is a multi-field dimensions option, also pick which dimension input drives that axis.

To instead map a single choice option (e.g. a "Size" dropdown) to fixed width × height per choice, set Size from → Per-choice size chart and fill in the table.

Width and height in feet + inches (variables)

When each axis uses a dimensions option with separate ft and in inputs, bind pricing variables that combine them instead of a single dimension field:

1. Create variables in Options & Pricing → Variables, for example:
   • WIDTH_IN = INPUT("WIDTH","dim1") * 12 + INPUT("WIDTH","dim2")
   • HEIGHT_IN = INPUT("HEIGHT","dim1") * 12 + INPUT("HEIGHT","dim2")
2. In Step 5, set the Artboard size binding's Width source to variable WIDTH_IN and Height source to variable HEIGHT_IN. (You can also use the single-axis artboardWidth / artboardHeight properties the same way.)

Variable-backed bindings are one-way (customer inputs → canvas). Resizing the artboard in the editor does not write back into variables or split inches into ft/in. For bidirectional resize sync, bind the underlying dimension fields directly.

Numeric variable sources also work for artboardWidth, artboardHeight, bleed, safeZone, imageWidth, imageHeight, cropImageWidth, and cropImageHeight.

Material drives background AND cut-line

A single swatch option can drive multiple properties — add two bindings with the same option key. For example, a "Material" swatch where each value maps both a background color and a cut shape:

Artboard resize behavior

When a bound option changes the artboard size, the boundary updates but customer-placed elements stay where they were. The customer decides whether to move or resize them.

In Crop outside image layout mode, customers can also resize the artboard with the Crop feature (when enabled). With Write manual artboard size back to calculator on, those resizes update bound dimension options. In Drag image layout mode (wallpaper-style pan), the artboard stays fixed and the bound product image moves inside it — use Product image bindings and placement lock instead of free crop. See Configuring Step 5 and How customers use the editor.

Completed-state invalidation

If the customer has already saved their design and then changes a bound option from the main calculator (e.g. changes "Size" from 4×4 to 6×6), the completed state resets and they're prompted to re-open the designer. This avoids printing a proof at the wrong size. Options without bindings (quantity, price-only options) don't trigger invalidation.

Examples

• Framed photo print — Image Edit with Drag selection framing: no bindings needed; customers crop the upload in the editor. Designer bindings apply only when you expose size options in the right panel.
• Wallpaper roll — See Wallpaper and product image bindings (Recipe 1: repeat-x, panel width, Repeat pattern at panel width On, Show panels).
• Double-sided yard sign — Enable a back side. Bind width and height on Front only. On Front, bind a background colorMap for face colors; on Back, bind a different colorMap or artwork. Customers design each face separately and save once.
• Variant finish preview — Image swatch with Shopify product variants for Finish. Bind background with colorMap keyed to each Shopify value (matte white → #f5f5f0, gloss black → #1a1a1a). The right panel lists live variant values; swatch selection updates price and variant without a page reload.

Related Docs

• Wallpaper and product image bindings
• Product Designer Overview
• Configuring Step 5
• How customers use the editor
• Setting up the option
• Cut lines and die-cut export
• Preview scenes, effects, and clear stickers
• Print quality and production output
• Image Edit mode
• Product Designer Translations
• Option Basic Settings