How to Add Photo Editing Inside a Product Designer on Shopify

Illustration of a full-screen photo editor over a Shopify product page, with a cropped landscape photo, crop, sliders, filters and pen tools, a Remove background button and a Done button

Photo editing inside a product designer means the customer fixes their photo on your product page, before they pay. With Appify Custom Product Options, you add a Product Designer button, link it to an upload field and switch on the editing tools you want.

The customer crops, adjusts, filters and marks up the photo in a full-screen editor. They click Done, and the edited image replaces the original upload.

Which editor does a photo product need?

The Product Designer has two modes. They share the same full-screen editor but do different jobs.

Mode What the customer does Fits
Image Edit Edits a photo they uploaded: crop, adjust, filter, mark up Photo prints, passport photos, annotated references
Designer Builds a design on an artboard with text, clipart, shapes and images Stickers, signs, greeting cards with a photo and text

You can have up to two Product Designer buttons on one calculator. One linked to an upload opens Image Edit. One that is not linked opens the Designer. A greeting card shop can offer both: edit the photo first, then add text and graphics.

How do you set it up?

  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 upload.
  3. In the Designer step, switch to Image Edit and turn on the tools customers need.
  4. Open the gear beside the mode toggle to set the Done button label, export DPI and image framing.

Customers also get an Edit button beside each uploaded file. The Image Edit mode help article has the full list of settings. If you want the upload field set up well first, see how to let customers upload artwork or a PDF with an order.

What can customers do to their photo?

Most tools are switches. Match them to the job instead of turning on everything.

Reframe it

Crop offers aspect presets and an orientation toggle. The framing setting decides how it feels. Drag selection moves the crop window over a fixed photo, which suits photo prints. Drag image pans the photo inside a fixed frame.

Fix the look

Finetune gives sliders for brightness, contrast, blur and HSL. Filter applies preset looks, and the storefront previews them on the customer's own image. Both are always on in Image Edit.

Change the backdrop

With Layers on, Replace image swaps the base photo for another upload or a flat color. Text and drawings stay in place. That suits ID-style photos on a white or blue background.

For a cutout, switch on Allow AI background removal in the editor settings. A Remove background button then appears when the customer selects one image. They see a Keep or Undo prompt after it runs.

The cutout is applied back onto the original image at full resolution, so print quality is kept. That matters when the photo is going on a sticker or a print.

Mark it up

Draw includes a pointer, freehand, arrows, lines, callouts, an eraser and a redact box that blurs part of the image. Text, Clipart, Shapes and Frames add to it. Frames give borders, drop shadows and shape masks such as a circle or rounded corners.

A shop that takes reference photos might switch on Draw and Text only. Customers mark up the photo and nothing else. The Designer features list shows every switch.

What if the customer uploads several photos?

Set the upload's maximum number of files above one. The editor opens for the file the customer clicked Edit on. Each file keeps its own edits, and the customer can switch between files without losing earlier work.

Turn on Image Upload in the editor when customers should add extra images on top of the main photo in the same session.

How do you keep blurry photos out of the print?

Turn on Warn customers about low image resolution. The editor compares the photo's pixels to the print size and warns while the customer works. You choose the recommended DPI and the export DPI for saved files.

You can warn earlier than you export. For example, warn at 200 DPI and export at 300 DPI. The full set of print settings is in how to generate production-ready print files from customer designs.

Can the customer approve the edit before checkout?

Yes. A design review step asks the customer to tick that they have reviewed and approved their design before they can save. How to review custom orders with proofs and design files covers the review step in full.

What arrives with the order?

Clicking Done runs the same save as the Designer, using the outputs you chose. The order line carries a Design Files link to a summary page with the proof, the print file and any other files you switched on.

Staff see the line in the app's Orders tab with a proof thumbnail and an Open file link. For a worked example of a photo product, read how to sell custom-size posters and photo prints.

Where to see it and read more

For a quick look at the editor on a live product, see the photo editor calculator. Once the edit is done, customers return to the product page and add to cart.

Check it before you go live

  1. Upload a photo. Click Edit and confirm the editor opens with it loaded.
  2. Try each tool you turned on. Confirm the ones you left off are missing.
  3. Upload a small image. Look for the low-resolution warning.
  4. Click Done. Confirm the edited image replaces the original.
  5. Place a test order. Open it in the Orders tab and check the proof and files.
  6. Test on a phone. Run the whole flow on a small screen.

FAQ

How do I let customers edit photos on a Shopify product page?

Add a File upload option and a Product Designer option linked to it. The button opens Image Edit mode, where customers crop, adjust, filter and mark up the photo.

Can customers remove the background from a photo?

Yes. Switch on Allow AI background removal in the editor settings. A Remove background button then appears when one image is selected, with Keep and Undo.

Can customers change the backdrop color?

Yes. With Layers on, Replace image lets them swap the photo or fill the background with a flat color.

Can I limit which editing tools customers see?

Yes. Most tools are switches in the Designer step, and you set the order they appear in. Finetune and Filter are always on in Image Edit.

Does the edited photo go on the order?

Yes. The edited image replaces the original upload, and the order line links to the proof and files.

Edit the photo. Price the print. One app.

Install Free on Shopify

Whatever you sell, however you price it · The last options app you'll shop for