(Shopify) Crop / min size settings on Product Variants


#1

Hi there,

I haven’t implemented your tool into our site yet because I want to make sure certain options are possible.

I’d like to allow the customer to upload an image but have the crop / min size attributes change when selecting another size / ratio variant within the Product. Is this something that can be done?

I’d prefer not to have to set up our products within Shopify as individual sizes, but rather have one product (canvas print), then different variants (8x10, 8x12, etc…) within the same product.


#2

Hi!

Uploadcare widget doesn’t support changing settings on-the-fly after initialization, so there are two ways you can achieve that:

  • Predefine a list of cropping presets so that a user can switch them while cropping an image. See the reference here: Widget crop options — Uploadcare
  • Use Dialog API instead of the widget. In this case, you’ll be able to open a dialog with necessary settings which you can define depending on user’s choice. See this demo to learn more: Change crop ratio dynamically

Hope that helps!


#3

Hi Achernenko,

I’m trying to implement this, but (please excuse my ignorance), I don’t understand what to do with the HTML & JS code so that it works with the widget. Is there a tutorial or some other documentation for this you can point me to?

Regards,

Gerardo


#4

@gerardo which of mentioned approaches are you trying to implement and what problem have you encountered?


#5

I’m trying to implement the Dialog API


#6

@achernenko I have the upload working using the widget crop options, but it would be much nicer to be able to implement the Dialog API as in your sample.


#7

@gerardo It seems I’ve found another solution that allows keeping using the widget instead of the dialog. The widget has the “openDialog” method that can receive a settings object as an argument and open the widget with provided settings. We’ll open the widget with crop settings that depend on the product variant selected, but first, we’ll need to disable the default button handler. I’ve made this pen to show the course of action

Using this approach you can still link the value of the widget’s input with a custom product property to be able to use the CDN URL of the uploaded image in the cart and email templates.


#8

@achernenko Thanks you, this is perfect! Now, I was able to integrate the upload widget into gravity forms (I’m using Woocommerce). I have no code experience at all, but I was able to follow the instructions to build the widget and integration with Gravity Forms without a problem. I’m not able to figure out how to use the 3 sections in CodePen. Could you please tell me where do I paste the HTML, CSS, and JS codes?
Does the JS code go in the funtions.php file?

Thank you in advance!


#9

@gerardo I’m not an Gravity Forms/Woocommerce expert, but I think this article may help Where Do I Put This Code? - Gravity Forms Documentation

Also, it’s possible to add custom HTML code via a HTML block, see this article to learn more - HTML - Gravity Forms Documentation


#10

@achernenko Thank you! I will give this a try.

Best regards