How to add image cropping to Shopify personalization

Why this beats 'we'll crop it for you'

Stores without a crop tool do one of three things on every order: (1) accept whatever the customer uploads and print badly-framed photos, (2) email every customer to ask 'what part do you want?', or (3) have someone on the team manually crop each order. All three cost time and produce inconsistent results.

An in-checkout crop tool moves the decision to the customer at the moment they care most: while they're buying. They see exactly what will print, they frame it themselves, and your fulfillment receives a clean, correctly-sized image.

Step-by-step setup

1. Install Print It My Way. The crop tool is a built-in feature of any image-upload field. Install the app from the Shopify App Store.
2. Open the product. Pick the product with a photo print area (canvas, mug, phone case, ornament). Set up one product first, then replicate.
3. Add an image upload field. In the personalizer editor, add an image upload field. Set the maximum file size (e.g. 10 MB) and accepted file types (JPG, PNG, HEIC).
4. Set the aspect ratio to match the print area. Enter the print area's aspect ratio — 1:1 for square canvas, 16:9 for landscape mug wrap, 9:16 for portrait phone case. The crop tool will lock to this ratio so no matter what the customer uploads, the output fits.
5. Enable zoom and rotate. Toggle 'Allow zoom' and 'Allow rotate'. Customers can zoom in to crop tighter on a face, or rotate a sideways phone photo. These are the two operations that solve 90% of bad-framing complaints.
6. Set a minimum resolution check. After crop, the resulting image needs to meet your printer's minimum DPI. Set the minimum resolution (e.g. 1500x1500 px at 300 DPI). If the cropped output is below it, the field shows a warning.
7. Test with a sideways HEIC. Upload an iPhone photo (HEIC, often sideways from EXIF). Confirm it appears upright in the crop tool and crops correctly. HEIC handling is the single most common bug — test it explicitly.

Aspect ratios for common products

The ratio you set should match the actual printable area, not the product:

• Square canvas, square mug print area, ornaments: 1:1
• 11x14 canvas, A4 poster: ~4:5 (portrait) or 5:4 (landscape)
• iPhone case (back): ~9:19.5 (modern phones) or 9:16 (older)
• Mug wrap (full): ~7:3 horizontal — most stores let customers upload square and crop to wrap area
• Pet portrait (oval/circle on canvas): typically 1:1, with a circular mask preview
• Trading card / business card: 7:5 (landscape) or 5:7 (portrait)

Test a couple of real prints before locking the ratio in production.

HEIC, mobile uploads, and orientation bugs

iPhone photos are HEIC by default since iOS 11. Most servers convert to JPG, but the EXIF orientation flag often gets lost in conversion — which is why a portrait phone photo sometimes shows up sideways in personalizers.

What Print It My Way does: converts HEIC to JPG with orientation normalized at upload time, so what the customer sees in crop is what gets printed. Test this yourself by uploading a known-sideways photo and confirming it appears upright.

Other mobile gotchas: Android's image/jpeg with no EXIF (panorama mode), Live Photos that upload as MOV, and Samsung's proprietary motion-photo format. Set acceptedTypes to image/* and let the personalizer handle the conversion.

How to set the minimum resolution check

Print resolution = pixels divided by print size. For a 12x12 inch canvas at 300 DPI, you need 3600x3600 pixels. If the customer uploads a 800x800 photo and crops further, the output won't print sharp.

The check should run on the cropped output, not the upload — a 4000x3000 photo cropped tight to a face might end up at 600x600, which is too low.

If the output is below threshold, show a 'low resolution warning' rather than blocking. Some customers genuinely don't have a sharper photo and would rather print soft than not at all. Let them check 'I understand this may print soft' to proceed.

Frequently asked questions