Let customers crop uploaded photos

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

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.

2 Likes

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.

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! :hugs:

(post deleted by author)

Hi @clank22

I hope you are doing well. If you want to consider an app that allows your customers to upload and crop their own images on a product, you can try Inkybay – Product Personalizer. Inkybay enables customers to upload their photos and adjust or crop them within a custom-defined print area, with a live preview in its design lab so they can see exactly how the final product will look. Users can manually adjust and crop images or use preset shapes for cropping.

.

Besides photo cropping, Inkybay offers a wide range of product customization features, allowing customers to personalize products by adding text, graphics, their own designs, and more.

The setup requires no coding, and you can explore all these features with a 21-day free trial to see how it works for your store.

Hello @clank22 ,

I hope you are well!

Basically, you can use the app for Photo:
1.) Zakeke ‑ Customizer 2D 3D - Shopify Product Customiser & 3D Configurator - Zakeke | Shopify App Store
2.) Customify ‑ Custom Product App - Customify | Custom Product App | Customize Product | Shopify App Store

Also, before purchasing any app, please book a demo with them. It will be helpful for understanding the capablities of the app.