Allow customers to specify product image dimensions and crop the product image dynamically

Highlighted
New Member
1 0 0

Hi all,

I'm new to Shopify and was wondering how someone would implement a product page like the following:

http://www.wallsauce.com/wall-murals/photo-wallpaper/abstract-and-street-art/street-new-york-city 

The requirements would be as follows:

- Allow customer to input set image dimensions

- Add a crop overlay onto of the product image that updates based on the dimensions

- Calculate a price based on the dimensions

- Save the coordinates of the crop on top of the image

My guess would be the system would be implemented as follows:

- Javascript to handle the crop overlay

- Dimensions, Coordinates, Price Calculations are stored in custom fields defined via the product API.

- Values are passed back and forth via Javascript to update the overlay and price

Am I on the right track with this idea or if anyone knows how this could work better or if it's been done before, please let me know your thoughts.

Thanks,

Mark

 

0 Likes
Highlighted
Shopify Partner
1 0 0

Hi Mark, did you find a solution?

I am looking for exactly the same thing. Selling custom wall art where the customer can add their wall dimensions and then crop the product image accordingly.

Cheers, Hannah

0 Likes
Highlighted
New Member
1 0 0

Hi Mark,

I presume you got a solution for this? Please would you be able to share how you got around it as I’m looking for something very similar.

Cheers

Jacob

0 Likes