How to Add Live Previews to Products on Your Shopify Page

How to Add Live Previews to Products on Your Shopify Page


In the dynamic landscape of e-commerce, the line between browsing and buying is often a matter of user experience. One game-changing feature that stands out is live product previews. By letting customers visualize their custom choices in real-time, they feel more engaged and confident in their selections. For Shopify store owners, integrating this feature isn't just about enhancing the browsing experience—it's a strategic move. Studies suggest that interactive product visualization can significantly increase conversions. In this guide, we'll delve deep into the live preview feature, showcasing how to Add Live Previews to Products on Your Shopify Page.

There are several ways to implement this live preview, such as manually coding within the Shopify theme. However, this approach is complex and requires extensive coding knowledge. Moreover, hiring a developer for this task can be an expensive affair. Thus, the best solution we recommend is using a specific Shopify app. To utilize this app, head over to the Shopify App Store and download it. You can click on the link provided below or on the image.

Shopify app - Live Product Option

Here’s how it’s done with Live Product Option:

Step 1: Download and Onboard

  • Download the Live Product Options from the Shopify app store.
  • Complete the onboarding process as prompted.

Step 2: Add a New Product

  • Once onboarding is complete, locate and click on the "Plus" sign labeled "New Product Options".
  • You will be presented with two product targeting choices: single product or multiple products. For this guide, select the "Single Product" option.
  • Select the type of product you wish to customize. For this example, we'll choose a "Pure White T-Shirt".

Step 3: Add Image Swatches

  • Click on the "Add Option" button.
  • From the available options, select "Image Swatches".
  • Proceed to add values:
  • Upload images of your product.
  • Provide a description for each image, which essentially is the text or label.

Step 4: Advanced Settings

  • Click on the "Advanced" settings option.
  • Browse through the available settings to customize as needed. For this guide, we'll click on "Swatch Image Text" to ensure the image label (or name) appears below each swatch.

Step 5: Enable Live Preview

  • Scroll down until you locate the "Live Preview" option.
  • Click on "Enable" to activate it.

Step 6: Add an Overlay Layer

  • Select "Overlay Values" to create a design layer for your t-shirt.
  • Click on "Select Option" and choose the option you previously created (default name is "Option_1").

Step 7: Upload Image Files

  • Upload an image for each option you've listed. Ensure these images are in PNG format or have a removed background for the best appearance.

Step 8: Adjust the Design Placement

  • Navigate to "Advanced Settings".
  • In the "Area" setting, change the selected option from "Full" to "Box".
  • Adjust the box's width, height, and position to specify where on the t-shirt you want your design to appear.
  • Once satisfied with your adjustments, click on the "Save" button and review the live preview to ensure it looks as expected.

Step 9: Add Additional Layers and Customizations

  • You have the flexibility to add more layers if desired.
  • Customize the t-shirt's color and adjust the design's placement using the live preview option.

Step 10: Seek Help if Needed

  • If you encounter any issues or have questions, visit the app's FAQ page.
  • You can also contact their customer support for more assistance.
  • The support section also hosts various videos and FAQs for each customization feature the app provides.


There are several advantages to using the live preview. Firstly, it enhances the aesthetics of your store. Secondly, it provides customers with a plethora of options. Thirdly, it streamlines the buying process, giving customers a clear picture of how their chosen product will look. I highly recommend downloading and starting with this app immediately. If you encounter any issues, don't hesitate to reach out to the support team. This tool isn't just about visualizing products; it offers much more. Whether you want to select color variants or use image swatches, the Shopify app - Live Product Options is ideal for all such customizations, including custom price calculations and so on.

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
Zurück zum Blog