Let customers crop uploaded photos

Store Design
1

There’s another page that selling the same items that has this photo cropping mechanism where they have a set square that the picture crops to and in an outside border that shows part of the picture that will wrap around the magnet and let the customer know that that part will be the edges I will include photo

2

Hey Clank,

For that, you’ll need to integrate an outside library or service into your theme. Cropper.js and Croppie.js are examples of such integration.

1 Like
3

Hi,

Hope this will help

  • Let customer upload an image.
  • Use Cropper.js to give them a draggable, square crop area.

Example Javascript:

const uploadInput = document.getElementById('upload');
const image = document.getElementById('image');

uploadInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    image.src=e.target.result;
    image.style.display = 'block';
    initCropper();
  };
  reader.readAsDataURL(file);
});
  • Add a dotted overlay (wrap-area) that shows “edge” area.
  • Export both cropped image and wrapped area for the final design.
4

Hi @clank22

You might want to try Easify Product Options – it allows customers to upload and crop their images directly on the product page, with a live preview of how it will look. It’s a simple way to help them visualize the final result before placing the order, and it’s easy to set up without needing any custom code. Here’s how it work:

  • This is the result:

EasifyJennifer_1-1750924931013.png
EasifyJennifer_1-1750924931013.png932×517 159 KB

EasifyJennifer_0-1750924792411.png
EasifyJennifer_0-1750924792411.png1345×634 291 KB

  • This is the app setting:

To let your customers edit their uploaded image, simply select “Enable Image Editor” here:

EasifyJennifer_2-1750924981927.png
EasifyJennifer_2-1750924981927.png1338×569 101 KB

And to let your customers see the final product in real time, simply click “Enable Live Preview” in the Product Personalizer.

EasifyJennifer_4-1750925314437.png
EasifyJennifer_4-1750925314437.png1334×576 70.8 KB

I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! :hugs:

5

Hi @clank22,

Teeinblue’s photo upload with custom shape cropping can help to solve this. Here’s a demo product created by the app for you to see in action:

let-customers-crop-uploaded-photos
let-customers-crop-uploaded-photos1800×1000 44.7 KB

In the app, you can set up a square crop zone that matches your magnet dimensions. On your store, when customers upload their photo, they can adjust the photo area within your defined crop area while seeing how it looks with a live preview.

And there are more converting product personalization and print-on-demand features. If you have any concerns, we are always ready to assist you via the community inbox or support@teeinblue.com!