How to Use Masks and PNG Overlays to Create Dynamic Mockups for Product Customization for Shopify

How to Use Masks and PNG Overlays to Create Dynamic Mockups for Product Customization for Shopify


Imagine you're an online shopper looking for a personalized phone case. You find a design you like, upload it, but have no way to preview how it fits on the case. This experience can be frustrating and might make you abandon the cart. Now, imagine a tool that allows for real-time customization and previews—sounds like a game-changer, right? This is where Masks and Dynamic Mockups come into play, and especially for Shopify stores, the Live Product Options app can make this dream a reality.

Why Masks and Dynamic Mockups are Vital

Masks and Dynamic Mockups revolutionize the way shoppers interact with e-commerce stores. These features are particularly crucial for stores dealing with customizable products, like personalized t-shirts, mugs, or phone cases. Dynamic mockups let the customer visualize the end product, thus minimizing dissatisfaction and returns.

Why Use Shopify’s Live Product Options App

The Live Product Options app is a perfect companion for this, providing an intuitive interface and feature-rich environment. The app is user-friendly, reliable, and makes the customization process smooth and easy for both the retailer and the customer.

Shopify app - Live Product Options

The Shopify App Solution - Live Product Options

Step 1: Download and Complete Onboarding
- Go to Live Product Options on Shopify and download the app.
- Onboarding usually involves setting up your account details and linking your Shopify store. Follow the on-screen instructions.

Step 2: Select Your Product
- Navigate to 'New Product' within the app dashboard. Here, select the products that you want to offer customization for.
- Use the search icon to quickly locate your products.

Step 3: Add Product Options
- Click on 'Add Options'.
- This is where you set up the 'Upload File' option. You can set file size limits and specify file types.

Step 4: Setup File Upload for Customers
- Once you've added an option, change its type to 'Upload'.
- This is where you can modify parameters like file size (keep it at 10 MB for our example) and the types of files customers can upload (JPEG, PNG, etc.).

Step 5: Enable Live Preview
- Scroll to the end of the page, and click 'Enable Preview'.
- Add a layer for the upload. Name this layer as you wish (e.g., UserUpload).

Step 6: Configure Masks and Overlays
- In the advanced settings of the layer, use the 'Area Box' to specify the region where the customer's image will appear.
- Add another layer for the overlay. Make sure this PNG overlay layer comes after the upload layer in the hierarchy. It should ideally contain transparent areas for user customization.

Step 7: Advanced Settings
- For those who are savvy with CSS, the app allows for even more granular control over the look and feel.
- Advanced settings can be a great way to fine-tune the user experience, but remember to test thoroughly.

Step 7:
-Help is Around the Corner: Encountered a hiccup? Their robust support and extensive documentation ensure you’re never stuck.

Remember, the Live Product Options app isn’t limited to just this. Explore SVG files for even more intricate designs. If you're interested in conditional logic or custom pricing formulas, the app's got you covered.


Customization is not just about granting control but enhancing the overall shopping experience. With the Shopify Live Product Options app, you're not just offering a product; you’re selling an experience. An experience that’s personal, unique, and real-time.

Why settle for less when the best is just a click away? Try the Live Product Options app now and redefine your Shopify store’s shopping experience.

About Live Product Options

Use Live Product Options to create a custom personalized shopping experience with unlimited product options and a live preview of the product.

Super easy installation

No theme modifications are required.

The App does not add any liquid to your theme and can be installed and uninstalled without the risk of messing up your theme code.

Personalize products

Personalize your products with custom text inputs and image file uploads. Show a live updating preview of the product image with the customers inputs.

Perfect for print on demand products like canvas, posters, picture framing, monogram or text engraving.

Unlimited Product Options

Extend the 100 variant limit by adding unlimited custom product options:

  • text (single / multi line)
  • select dropdown
  • radio / checkbox
  • swatches (button / images / colors)
  • color picker
  • file upload (with Ajax support)
  • HTML

Conditional Logic

Show product options with conditional logic based what the customer has selected.

Live preview

Show a live preview of the product options that updates in real time when the customer changes an option.

Live preview can consist of multiple layers to build a preview image:

  • overlay (image with transparent parts)
  • mask (crop preview with a provided mask or shape e.g. circle)
  • text
  • upload

In-App Editor

Create custom product configurations with the simple to use visual editor inside the app. Configure specific areas for customers to add text or image uploads.

Order Archive & Export

The app archives each order with all the products and their custom options. Export a ZIP file with all the file uploads and CSV containing the options and custom text inputs.

View in Shopify App store
Back to blog