Display Uploaded Image on the Product Image

If you want to show the uploaded image instead of the product image after an image was uploaded follow the instructions below.

Automatic 

We've released a new app that supports live preview of the uploaded image on the product page. The app integrates seamlessly the Upload-Lift app.

You can find the app on the Shopify app store:  https://apps.shopify.com/live-product-options

Manual

There is no automatic way to update the product image on the product pages with only the Upload-Lift.  

The following instructions are based on the Debut theme and requires jQuery available on the page. 

Live example: https://www.cloudlift.app/collections/upload-lift/products/personalized-canvas

Before image is uploaded:

After image is uploaded:

Enable image thumbnail

The following code assumes that the image thumbnail feature is enabled on the upload field config Image Settings:

JavaScript Code 

The code that replaces the product image with the uploaded image is based on the JavaScript Events API of the upload widget.

$(document).ready(function() {
  
  
  // enable/disable image replacement ( this flag could be set dynamically in liquid based on product tags or any other indicator )
  window.uploadLiftReplace = true;
  
  // class names based on newer debut theme version
  var classSingleImage = '.product-single__media';
  var classFeaturedImage = '.product-featured-media';
  
  // for older debut themes uncomment:
  // var classSingleImage = '.product-single__photo';
  // var classFeaturedImage = '.product-featured-img';
  
  if(window.uploadLiftReplace){

    var productForm = document.querySelector('form[action*="/cart/add"]');

   if(productForm != null) {
    
    // find the product image
    var $productSingleImage = $(classSingleImage);
    var zoomEnabled = $productSingleImage.hasClass('js-zoom-enabled');


    var $productImage;
    var $uploadedImage;


    // subscribe to upload:added event
    productForm.addEventListener('upload:added', function(e){
      var file = e.detail;


      // show the thumbnail variant
      if(file.url && file.meta.variant === 'thumbnail'){


        if(!$uploadedImage){
          // single image centered
          $uploadedImage = $('<img style="position: absolute;left:0;right:0;top:0;margin: auto;max-height: 100%;">');
        }


        $uploadedImage.attr('src', file.url);


        if(!$productImage){
          $productImage = $productSingleImage.find(classFeaturedImage);
          $productImage.replaceWith($uploadedImage);


          // disable zoom ( does not make much sense with the uploaded thumbnail )
          if(zoomEnabled){
            $productSingleImage.trigger('zoom.destroy');
          }
        }
      }
    });
    
    // subscribe to upload:removed event
    productForm.addEventListener('upload:removed', function(e) {


      var file = e.detail;


      if($productImage && $uploadedImage){


        // check if the current displayed image was removed
        if($uploadedImage.attr('src') == file.url){
          $uploadedImage.replaceWith($productImage);


          // reset to trigger replace on the next upload
          $productImage = null;


          // re enable zoom
          if(zoomEnabled){
            $productSingleImage.zoom({url: $productSingleImage.data('zoom')});
          }
        }
      }


    });


    }
    
    
  }
  


});

To add this code in the Debut theme:

Open the Shopify Admin theme editor, navigate to   Online Store > Themes,  [More actions] > Edit Code.

The code can be added to any JavaScript file that is loaded on the product page, but for simplicity we will add the code at the end of:    assets/theme.js

Save the theme and test the functionality by uploading an image on your product where the upload widget is shown. 

If you need further assistance, please send us a request and we will be happy to help you out.