Set up different aspect ratios for different variants

We've seen that we can automatically crop uploaded images to a specific aspect ratio, but what if you have a product with multiple variants, each with a different shape?

UploadKit can help here. This is a bit advanced, but let's walk through it together.

For this demo, we have three variants: frames for 12×12", 12×10" and 12×8" pictures. The option name is called "Size" when we created the product in Shopify.

Once we've created an upload field in UploadKit that matches our product and all variants, we scroll down to Behavior and enable cropping, selecting 'Use different aspect ratios for different product variants':

Then we enter our variant option name ('Size'), choose a default crop if we need, and add our three variants with the crop aspect ratios. Make sure to match the option name and values from Shopify exactly:

Because our product can be rotated to accept portrait or landscape photos, we've added both portrait and landscape aspect ratios. The aspect ratios need to be in whole numbers, no decimals. If you need, say, 1:1.5, multiply them up so they are whole numbers: 2:3 in this example.

Now the correct crop settings will be shown for each variant automatically, and if the user changes the variant after uploading an image, it will automatically be re-cropped to match the selected variant.