Do you want to offer your customers the ability to crop their images to specific dimensions and see the price update instantly based on the image size? Imagine the convenience and flexibility this would bring to your Shopify store.
In this blog, we’ll show you how to add an image crop feature with custom dimensions to your product page, allowing customers to tailor their designs and see real-time price changes using the Price Formula extension. This is a fantastic way to charge based on design or image size, adding a unique and personalized touch to your store.
You have the option to either create your own price list or use JavaScript to update the price in real time.
Let's delve into the process and explore how it works.
(You can also check out the demo product at the end of this blog.)
Steps to add image crop with custom Dimension.
1. Install the App
2. Select a Template or add new product Option
- You can use a template to speed things up or create options from scratch.
- Choose the product you want to customize. You can select a single product or multiple products.
- In this specific example, We need button swatches, dimensions, and an upload button. With the button swatches, customers can select the size; with the dimensions, they can crop and edit the size; and with the upload button, they can upload their image.
- In the advanced settings for dimensions, you can use JavaScript to update the price dynamically. If you're not familiar with JavaScript, you can use a price list instead.
3. Create conditional logic
- In the size section, we have three options: the first is "Dimension," the second is "100 by 100," and the third is "200 by 100." We only want to show the dimension option when the customer selects "Dimension" in the size section. Therefore, in the conditions, we will connect the variant dimension size with the dimension option.
4. Enable Live Preview
- Enable the live preview, and we are going to add three layers. The first layer will be the dimension layer, so we will select the type as "upload" and connect this layer with the upload option. In the conditions, we will connect this layer with the size variant "Dimension," so that when the customer selects "Dimension," this layer will appear.
- The second and third layers will be "100 by 100" and "200 by 100." Similarly, we will select the type as "upload" and connect these layers with the upload option. We will also connect each layer with the size variants "100 by 100" and "200 by 100" respectively, so that each layer appears only when the customer selects the corresponding variant size.
5. Activate and Save
- Once everything looks good, activate the custom options and save your changes.
And that's it!
Now your customers can crop their images to specific dimensions and see the price update immediately based on the size of the image. You can also use the template provided below.
Happy selling!
