let customers crop uploaded photos

[clank22]

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

[PaulMartin]

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.

[Small_Task_Help]

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.

[Easify-Jennifer]

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:

• This is the app setting:

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

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

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