How to build a Mask shapes image upload on Shopify product page (Product options and variants)

Shopify apps used in this Template

Live Product Options

If you’re looking to add a unique touch to your Shopify store by allowing customers to upload images and have them masked into various shapes, this blog is for you.

Today, we’re going to create a custom product page where customers can upload their own images and see them transformed into different shapes on the product. Whether you’re selling t-shirts, mugs, phone cases, or any other customizable item, this feature can make your products stand out. And the best part? The process is straightforward and can be applied to any product you wish to customize.

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 build a custom canvas with live preview.

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 are going to add two options: an upload button and button swatches. The upload button allows customers to upload their image, and the button swatches enable them to select the shape.

3. Create conditional logic

  • So, we need to add conditional logic to the layers in the live preview section. Specifically, we need to implement logic so that if the customer selects any option from the buttons (for example, the shapes), the corresponding layer (SVG shapes) will appear.

4. Enable Live Preview

  • Enable the live preview feature in the app settings. 
  • Add layers for every shape,  and for the upload area. 

5. Activate and Save

  • Once everything looks good, save your changes.

And that's it! 


Now your customers can upload design or images and see them transform into different shapes on the product

Happy selling!

Mask shapes image upload

Example template to show how to apply masks to crop images into shapes by using custom SVG masks or PNG overlays.

Demo Image

CHF 9.00
CHF 9.00
Sale Sold out
Tax included.
View full details

FAQ

Q: How do I create conditional logic for the live preview?
A: Conditional logic involves setting rules so that specific actions trigger certain responses. In this case, if a customer selects a shape, the corresponding SVG layer will appear, showing the image in that shape.

Q: What is the Mask Shapes Image Upload feature?
A: The Mask Shapes Image Upload feature allows customers to upload their own images and see them transformed into various shapes on the product. This enhances the customization experience and makes your products more unique.

Q: What is an SVG mask?
A: An SVG mask is a scalable vector graphic that acts as a template to "mask" or hide parts of an image, allowing only the selected shape to be visible. This is particularly useful for ensuring high-quality, scalable shapes that look good on any device or screen size.

Q:  What is a PNG overlay?
A: A PNG overlay is a transparent image that is placed on top of another image. In the context of customizable products, PNG overlays can add design elements, such as borders or patterns, that enhance the final appearance of the uploaded image.

Q: Do I need any coding skills to add this feature?
A: No coding skills are required. The Live Product Options App provides user-friendly tools to set up the feature without needing to write any code.

Q: What if I encounter issues while setting up the feature?
A: If you encounter any issues, you can refer to the app's support documentation or contact our customer support for assistance.