Image Edit mode

Image Edit mode

Overview

Image Edit is the Product Designer mode for uploaded photos. Add a Product Designer option in Calculator Editor → Options & Pricing, link it to a File upload option, then configure tools and export settings in Calculator Editor → Designer (Step 5) with the Image Edit toggle selected. Customers upload a photo, click Edit, refine it in the full-screen editor, and click Done in the top-right corner.

Setup

  1. Add a File upload option (for example "Upload Your Photo").
  2. Add a Product Designer option and set Linked file upload option to that file option.
  3. Open Designer (Step 5), switch to Image Edit, and enable the features customers need (Crop, Finetune, Filter, Draw, and so on).
  4. Open the gear icon beside the mode toggle for Done button label, export DPI, and Image framing settings.

You can also run Image Edit without a launch button — customers use Edit beside each uploaded file when the file option is linked.

Image framing

Under Storefront editor settings → Image Edit → Customer experience:

Setting Use when
Drag selection The crop window moves over a fixed photo (typical photo prints, passport photos).
Drag image The photo pans inside a fixed frame (less common for single uploads).

Optional: Fit artboard to image on upload sizes the artboard to the upload once after upload.

Replace image

When Layers is enabled, customers can replace the base photo while keeping text, draw strokes, and other overlays. Use Replace image from the Layers tab, the Crop tab, the Image inspector, or the canvas toolbar.

A dialog offers two choices:

Choice What happens
Upload image Pick a new image file for the background layer.
Solid color Open a color picker and fill the background with a flat color (useful for ID photos, colored backdrops, or replacing a busy scene with a clean field).

Text, drawings, and other layers stay in place. Crop and filter settings for the previous background reset when the background changes.

Optional: turn on Allow AI background removal in Step 5 gear settings so customers can cut out a subject from an uploaded image layer. See AI background removal.

Multiple uploads in one session

If the linked file upload allows more than one file, Image Edit can work on each upload separately:

  • The editor opens for the file the customer clicked Edit on.
  • Each file keeps its own layered design state after Done.
  • Customers can switch between files from the upload list without losing prior edits.

Enable Image Upload in Step 5 when customers should add extra images on top of the primary upload in the same session.

Right panel on the storefront

Image Edit does not show calculator options or price in the right panel. When the customer selects text, a shape, or an image, the panel shows selection inspectors (font, color, borders, masks). They finish with Done in the top-right corner, not a save button in the panel.

Examples

  • Photo lab — One file upload, Image Edit with Crop, Finetune, and Filter. Drag selection framing. Export at 300 DPI with low-resolution warnings at 200 DPI.
  • Passport / ID photo — Drag selection, Replace image → Solid color for a white or blue backdrop, then optional Remove background on the subject layer.
  • Annotated proof — Linked upload plus Draw and Text enabled so customers can mark up a reference photo before checkout.