How to build a Phone case with image upload on Shopify product page

Shopify apps used in this Template

Phone cases are one of the most popular accessories, with people loving to change their cases and try different designs and colors. Personalized and custom cases are becoming increasingly popular, as customers enjoy creating their own designs or using their own images on their phone cases.

In this blog, we will show you how to create a custom phone case with an image upload feature, allowing customers to upload their own images or designs and see a live preview on the product page. This enables customers to visualize how their design will look on the phone case, making it easier for them to decide and for you to convert sales.

 Let's delve into the process and explore how it works.

Steps to build a Phone case with image upload on Shopify.

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, you just need to add an upload type option so customers can upload their design or image.

3. Create conditional logic

  • We don't necessarily require conditional logic for this example. However, if you wish to offer additional options and display choices based on customer selections, then conditional logic can be utilized. 
  • For example, if you have two options—first, to select from pre-made designs, and second, to upload their own design—you can create conditional logic where the relevant options appear based on what the customer has selected. 

4. Enable Live Preview

  • Enable the live preview feature in the app settings. 
  • We are going to create two layers. The first layer is where the customer's design or image will be placed, and the second layer will be a PNG mask. The PNG mask will be a mock-up of the phone case, with cut-outs for the phone and camera, allowing the image beneath to be visible. The first layer will be the upload layer, and the second layer will be the PNG mask, making it look like a real phone case.

5. Activate and Save

  • Once everything looks good, save your changes.

And that's it! 

Now your customers can customize their phone case. And they can see a live preview of the changes in real time.

Happy selling!

Phone case with image upload

Example template with a phone case product where the customer can upload an image and crop it live in the preview to fit the shape of the case.


Q: Are there additional customization options I can offer alongside image upload?
Consider offering options like text overlays, color adjustments, or special effects to further personalize phone case designs and meet diverse customer preferences.

Q: How does the live preview feature work?
Enable the live preview feature in the app settings to allow customers to see real-time changes as they customize their phone case, ensuring they get a preview of how their choices will look.

Q: What is a PNG mask
 A PNG mask is a transparent image overlay used in customization applications to define specific areas where designs or images can be placed. In the context of creating custom products like phone cases, the PNG mask acts as a template that outlines where the customer's design or image will appear on the product. This mask typically includes cut-outs or transparent areas that align with the product's shape and features, such as camera openings or button placements.

Q: Do I need any coding skills to add this feature?
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?
If you encounter any issues, you can refer to the app's support documentation or contact our customer support for assistance.