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.

2 Likes
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

(post deleted by author)

6

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.

Screenshot_2
Screenshot_21904×835 160 KB

Screenshot_3
Screenshot_31902×833 221 KB

Screenshot_4
Screenshot_41903×873 132 KB
.

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.

7

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.