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.

Change background

When Layers is enabled, customers can replace the base photo while keeping text, draw strokes, and other overlays. Use Change background from the Layers tab, the Crop tab, or the control beside the active file name at the top of the canvas.

A dialog offers two choices:

Choice What happens
Upload photo 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, Change background → 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.

    • Related Articles

    • Wallpaper and product image bindings

      Overview Wallpaper-style calculators need the bound pattern image to match real wall size on the artboard — not stretched to fill the screen. In Appify CPO you do this with a Product image canvas binding (Step 5 → Designer mode → right panel → Canvas ...

    • Customer access and layout (editor profiles)

      Overview The editor profile controls how much a customer can change inside the editor and how the design relates to the artboard. You set it in Calculator Editor → Step 5 (Designer) → gear icon → Storefront editor settings → Customer experience, ...

    • Product Designer

      Overview The Product Designer adds a full-screen design editor to your calculator. Customers open it from a styled button on the product page, work on a dedicated artboard, and save proof and production files before add to cart. This is separate from ...

    • AI background removal

      Overview When enabled, a Remove background button appears in the selection toolbar whenever a customer selects a single image in the Product Designer or Image Edit editor. AI cuts out the subject and makes the background transparent. The result is ...

    • Print quality and production output

      Overview When a customer saves a design, Appify CPO generates the files you configured in Storefront editor settings (gear icon beside the Designer / Image Edit toggle). Proof images, print-ready PNGs, cut-line SVGs, canvas JSON, and a production ...