Inside a Shopify Photo Editor Calculator: Upload, Crop, Filter and Mark Up

A photo order starts with a file the customer already has, and that file is rarely ready to print. It's cropped wrong, a little dark, or has a busy background. The Image Editor demo on our demo store handles that. The customer uploads a photo, edits it in a full-screen editor on your product page, and clicks Done. The edited file goes on the order.

This calculator doesn't price anything. It's the editor that's worth a look: a Product Designer button linked to an upload field.

What does the Image Editor do?

Two things show on the page. An Upload Your Photo field takes up to five images, and an Edit Images button opens the editor.

The work happens in the editor, so the calculator stays small. Everything the customer does there, they do on your product page.

Why is a photo product hard to build, and how does Appify Custom Product Options handle it?

• The customer needs to fix the photo, not just send it. An upload field on its own gives you whatever file the customer had. Here the button opens Image Edit mode for that upload, and the edited file replaces the original.
• Crop has to match the print. The Crop tool has ready-made ratios, from square to 3:2 and 16:9, with an orientation toggle to flip landscape and portrait. The crop window slides over a fixed photo, which suits photo prints.
• Fixing a photo takes more than a crop. Finetune sliders cover brightness, contrast, blur and color. Filters give one-click looks such as sepia and black and white.
• Some orders need instructions drawn on the photo. The Draw tools include freehand, arrows, lines and callouts, plus an eraser and a redact box that blurs part of the image.
• Customers send more than one photo. This calculator takes up to five. Each file keeps its own edits, and the customer can move between them without losing anything.
• Customers change their minds after adding to cart. This calculator allows editing from the cart, so a customer who spots a mistake can reopen their choices. The wider story of what survives an order is in why Shopify's Buy again button drops custom options.

What about the price?

Nothing is priced in this demo, so there's no worked example here. The editor doesn't show calculator options or a price in its side panel. Customers finish with Done in the top-right corner (this demo's button reads Done Editing) and go back to the product page.

A photo shop would price the product like any other calculator. How to price custom signs by size, material and quantity shows the pricing side for a product that does have a price.

The design decisions

Link the editor to the upload

The Product Designer option has a Linked file upload option setting. Point it at the upload field and the button opens the photo editor. Leave it empty and the same button opens the full Designer instead.

Customers also get an Edit button beside each uploaded file.

Choose how the photo is framed

Image Edit has two framing modes. Drag selection moves the crop window over a fixed photo. Drag image pans the photo inside a fixed frame. This demo uses Drag selection, which is the usual choice for photo prints.

Let the artboard follow the photo

With Fit artboard to image on upload on, the artboard takes the size of the upload once it arrives.

Turn on only the tools the product needs

The editor's feature list is a set of switches: Crop, Draw, Text, Clipart, Image Upload, Shapes, Frames and Layers. Finetune and Filter are always on in Image Edit. This demo turns on every switch.

A passport photo shop might keep Crop and Layers. A shop taking reference photos might keep Draw and Text only.

Warn about blurry photos early

The demo has the low-resolution warning on. While the customer works, the editor flags a photo that doesn't have enough pixels for the print size. They can swap the photo before it becomes a soft print.

Offer a new backdrop

With Layers on, Replace image swaps the base photo for another upload or a flat color. Text and drawings stay put. That's how a shop sells ID-style photos on a white or blue backdrop.

What arrives with the order?

Clicking Done runs the same save as the Product Designer. It makes a proof PNG and a Design Files page, and the order line carries the link. The edited image replaces the original upload.

Staff open the Orders page in the app. Each line shows its options, a proof thumbnail and Open file links. If you'd like the customer to approve before paying, the design review step adds that.

Every file the app can build on save, including print-ready files and a production manifest, is in how to generate production-ready print files from customer designs.

Make it yours

• Passport and ID photos. Keep Crop and Layers, set Drag selection, and let customers use Replace image for a solid backdrop. You can also turn on AI background removal in the editor settings.
• A photo lab. One upload field, Crop, Finetune and Filter. Add a size choice that sets the print size, and price it from a table.
• Annotated reference photos. Keep only Draw and Text so customers can mark up a photo before they order.
• Photo plus design. Add a second Product Designer button, not linked to the upload, for text and graphics on top. The photo frame personalizer shows a photo and text working together.

Get this calculator

Building it takes four steps:

1. Add a File upload option, such as "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 you want.
4. Open the gear beside the mode toggle to set the Done label, Export DPI and image framing.

The photo editing roundup compares the field, and how to let customers design their own products covers the full Designer.

FAQ

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

Add a File upload option and a Product Designer option linked to it. The button then opens Image Edit mode, where customers crop, adjust, filter and mark up their photo before they add to cart.

Does the customer's edit replace the original photo?

Yes. In Image Edit mode, the edited file replaces the original upload.

Can customers upload more than one photo?

Yes. You set the minimum and maximum number of files on the upload option. This demo allows up to five, and each file keeps its own edits.

What can customers do in the photo editor?

Crop with ready-made ratios, adjust brightness and contrast, apply filters, draw arrows and callouts, add text, shapes and clipart, and change the backdrop. You turn on only the tools you want.

Where do I find the edited photo on an order?

On the order line, the Design Files link opens the proof and files. The app's Orders page shows the same photo with Open file links.