Overview
When a customer clicks your Product Designer button, a full-screen editor opens with their current calculator option values applied (artboard size, background, bound product image, and so on). This page walks through the customer experience for both Designer and Image Edit modes.
Opening the editor
- The launch button appears wherever you placed the Product Designer option. It uses the label and styling from Step 2.
- Required options first — if required options above the button are incomplete (for example size or material), the button stays disabled with a hint to complete them first.
- Click → full-screen editor opens with option values and bindings applied.
Editor layout
- Logo — top-left, if you added one in Step 5.
- Tools row — beside the logo: Ruler, Grid, Person, Snap-to-grid, bleed/safe-zone guides, optional Show panels (green vertical wallpaper panel seams when panel width is set on the Product image binding), Undo, Redo, Fit to Design, and other tools you enabled in Step 5. See Wallpaper and product image bindings.
- Top bar (right) — theme toggle (dark/light), Reset zoom, and Close. In Image Edit, Done is also here (top-right). In Designer, Save is in the right panel footer instead.
- Restore banner — below the top bar when the customer has a saved draft or prior session edit in this browser. They can Restore or Start fresh.
- Left sidebar — icon tabs for enabled features (Text, Clipart, Image Upload, Shapes, Frames, Draw, Layers, Crop, Finetune, Filter — whichever you enabled).
- Secondary panel — slides out beside the left sidebar when the customer clicks a feature tab. Shows that feature's controls (crop presets, filter looks, draw tools, and so on).
- Top-center layer controls — appear when the customer selects one or more elements: nudge, align, z-order, flip, duplicate, delete.
- Canvas — the artboard with trim/cut, bleed, and safe-zone guides when configured (see guide colors below). Preview toggle (Designer, when enabled) sits at the top-right of the canvas area and swaps in your product mockup overlay.
- Zoom controls (bottom-center) — zoom out, current level (click to fit), zoom in. Also: mouse wheel to zoom, Space + drag to pan, or drag on empty canvas background.
- Front / Back toggle (Designer, when enabled) — above the zoom controls. Customers switch between two independent design surfaces (for example front and back of a sign). Each side keeps its own layers until save.
- Right panel — mode-dependent (see below).
Guide colors on the canvas (same as Step 5):
| Guide |
Color |
Meaning |
| Trim / cut |
Black (dashed) |
Final product size or die-cut outline |
| Bleed |
Cyan |
Bleed margin outside trim |
| Safe zone |
Green |
Keep logos/text inside this area |
Right panel — Designer mode
Shows your product name (optional), calculator options you exposed, live total price, comment button (if enabled), and Save Design (or your custom label).
When the customer selects text, a shape, or an image, the right panel switches to selection inspectors — font/size/color for text, shape fill and stroke, image borders, shadows, and masks. Calculator options return when nothing is selected or when multiple elements are selected for alignment.
If you enable the design review workflow (Step 5 → Buttons), the Save Design button is replaced by Review Design. It opens a review view with the product preview, a Review / Options tab pair (Review shows your instructions), and an I have reviewed and approve my design checkbox that must be ticked before saving. Keep Editing returns to the editor. See Designer right panel.
Right panel — Image Edit mode
Does not show calculator options, price, or save actions. When the customer selects text, a shape, or an image, the right panel shows the same style of selection inspectors. With nothing selected, a short hint prompts them to select an element. They finish with Done in the top-right corner.
Working with elements
- Add text/shapes/clipart — Open the feature tab on the left, then add or pick an item. New elements appear at the center of the artboard.
- Layers tab — View stacking order, drag to reorder, hide, or delete layers. Hidden layers are omitted from saved designs and proofs. In Image Edit, use Change background here to swap the base photo or set a solid color (see Image Edit mode).
- Remove background (when enabled) — With exactly one image selected, the top-center toolbar shows Remove background. AI cuts out the subject; the customer confirms cost, then chooses Keep or Undo. See AI background removal.
- Crop — Resize or reframe the artboard (Image Edit) or adjust crop bounds (Designer when Crop is enabled and layout mode allows it).
- Draw — Pick a draw tool in the left panel; set color and line width in the right panel when a draw tool is active, then draw on the canvas. Pointer returns to normal selection.
- Move / resize / rotate — Click an element to select. Drag corners to resize, use the rotation handle to rotate.
- Multi-select — Hold Shift and click to add or remove from the selection. With two or more selected, use the top-center toolbar to align, change stacking order, nudge, duplicate, or delete together.
- Edit text — Click text to select it. Use the edit text control or double-click to change wording. Enter saves, Shift+Enter adds a line, Esc cancels.
- Undo / Redo — In the tools row when enabled in Step 5. Undo tracks canvas changes only — changing a calculator option in the right panel does not add to the undo stack.
If you enabled the comment button (Designer only), customers see a chat icon in the right panel footer. Clicking it opens a modal for production notes — special instructions, gift messages, color preferences, and similar. Notes attach as a visible cart line property called Production Notes.
Saving
Clicking Save Design (Designer) or Done (Image Edit) runs the save flow:
- Custom fonts load
- Guides hide
- Proof PNG is generated
- Print-ready PNG with bleed (if enabled)
- Cut-line SVG (if enabled)
- Canvas JSON (if enabled, so the customer can re-edit later)
- Production Manifest HTML (if enabled)
- Design Files HTML summary page is generated
- Cart line properties are set:
- Design Files (visible) — link to the HTML summary page
- Production Notes (visible, only if the customer entered a comment)
- Hidden properties for canvas JSON and proof thumbnail URLs
On success, the editor closes and the button shows a checkmark and proof thumbnail.
Re-editing before add to cart
The customer can re-open the editor before add to cart. Their design loads from the saved canvas JSON. If they close without saving, in-progress edits are restored for that browser session.
In the order
Each order line item shows the Design Files link as a visible property. Clicking it opens the HTML summary page in a new tab with:
- The proof image
- Open Production Manifest — placement spec with per-element thumbnails, calculator choices, and machine-readable data
- Download buttons for Proof PNG, Print-Ready PNG, Cut Line SVG
- A link to re-open the design source
- Production notes (if any) on the Design Files page; notes also appear on the Production Manifest when present
- Timestamp of save
This keeps your Shopify order admin clean — one link per design instead of several separate properties.
Mobile
The editor is desktop-only. On screens narrower than about 768px the customer sees a message that design customization works best on a desktop. If the option is not required, they can still add to cart without customizing.
Examples
- Custom mug (Designer) — Customer picks font and color in the right panel, adds text from the left sidebar, adjusts size with selection inspectors, and clicks Save Design. The calculator button shows a proof thumbnail.
- Double-sided yard sign (Designer) — Customer designs the front, switches Back on the canvas toggle, adds a different layout, and saves once. Design Files on the order shows proof and download links for both sides.
- Photo print (Image Edit) — Customer uploads a photo, clicks Edit, crops with Drag selection framing, applies a Filter look, adds a Draw arrow, and clicks Done top-right. The edited file replaces the original upload.