[Shopify] Enable image editor + image not showing in product cart and on product page

Hi all,

I’m trying to install the custom image uploader, so far i’ve run into a few problems. I’ve tried the solutions from other similar topics, however nothing helped so far. Hope you can help me out!

Here’s the code i’m using so far;

Uploadcare-settings.liquid

<script>
  UPLOADCARE_PUBLIC_KEY = 'e453059f9108663d476c';
  UPLOADCARE_LOCALE ='nl';

  var widget = uploadcare.Widget('[role=uploadcare-uploader]');
  var productImage = document.querySelector('.product-featured-img');
  var frameSelector = document.getElementById('frame');
  var uploadedImage = null;
  var currentFrame = frameSelector.options[frameSelector.selectedIndex].dataset.frameId;

  widget.onUploadComplete(function (fileInfo) {
    uploadedImage = fileInfo.cdnUrl;
    productImage.src = uploadedImage + '-/resize/320x520/-/stretch/fill/-/resize/400x600/-/overlay/' + currentFrame + '/';
    // clears the default srcset of the product image
    productImage.dataset.srcset = productImage.srcset = '';
});

frameSelector.addEventListener('change', function (e) {
    currentFrame = e.target.options[e.target.selectedIndex].dataset.frameId;
    if (uploadedImage !== null) {
      productImage.src = uploadedImage + '-/resize/320x520/-/stretch/fill/-/resize/400x600/-/overlay/' + currentFrame + '/';
    }
});
  
</script> 

uploadcare-fields.liquid

First of all, i can’t find a way to enable the image editor. I would like our customers to crop, rotate, sharpen and enhance the image.

Second, it would be great if the uploaded image can replace the standard product image.

Lastly, the uploaded image is also not showing in cart. The code that should be replaced;
<img class="cart__image" src="{{ properties['custom image'] | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}">

isn’t in my theme, the only code that looks like it is;
<img class="global-border-radius" src="{{ item | img_url: '400x' }}" alt="{{ item.title | escape }}">

I’ve tried multiple solutions and i’ve followed the following instructions; https://uploadcare.com/docs/guides/shopify/. However the code isn’t working. Hope you can help me out.

I’m using Boost theme, the frameselector option is not needed.

Thanks in advance!

Hi @Meyro,

Thanks for the question! To enable the image editor, you should add the following to the head of your website

<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.js" charset="utf-8"></script>

In uploadcare-settings.liquid, add the following line

uploadcare.registerTab('preview', uploadcareTabEffects);

In order to enable/disable particular effects, use the UPLOADCARE_EFFECTS variable. E.g.

UPLOADCARE_EFFECTS = 'blur,sharp,grayscale'

See Image Editor Configuration to learn more.

Class names of elements in the theme you’re using may differ from the names in the Debut theme. Would you be able to share a link to your Shopify website so that we can check it live and figure out what changes need to be made to your script to make it work properly?

Hi @Alex,

thanks for your reply! I’ve added the script to the uploadcare-settings.liquid, that seems to work too. However the next problem is that it doesn’t upload the edited photo, just the regular photo to the Uploadcare dashboard. Do you have a solution for that too?

Link to our website; Diamond Painting Eigen Foto – PremiumPaintings

@Meyro I’ve fixed the script so that it can update the product image with an image uploaded by a user

UPLOADCARE_PUBLIC_KEY = "e453059f9108663d476c";
UPLOADCARE_LOCALE = "nl";

uploadcare.registerTab("preview", uploadcareTabEffects);

var widget = uploadcare.Widget("[role=uploadcare-uploader]");
var productImage = document.querySelector(".rimage");
var uploadedImage = null;

widget.onUploadComplete(function (fileInfo) {
  uploadedImage = fileInfo.cdnUrl;
  productImage.src = uploadedImage + "-/resize/800x/-/format/auto/";
  // clears the default srcset of the product image
  productImage.dataset.srcset = productImage.srcset = "";
});

The uploader always uploads the original image even if you add some transformation via the Image Editor. Actually, the editor doesn’t transform images in the browser; it takes the original image URL and adds image operation to it to generate a new version of the image. The full URL with transformation operations will be attached to the order as a custom property. It can be accessed through the “orders” section of Shopify admin. This is what it looks like

https://ucarecdn.com/0ca5ce8b-723e-49bd-a5c9-d75ff4050763/-/crop/398x464/121,47/-/preview/-/enhance/60/

You can download the edited image from this URL to further print it.

Hope that helps!

Hi Alex, i’ve tried adding the code, however it doesn’t update the picture yet. Do you know what’s going on? Thanks again!!

Hi @Meyro, thanks for the update. It seems the class name of the product image in my code snippet is incorrect. Try replacing it with .rimage_image

var productImage = document.querySelector(".rimage_image");

Also, I can see you haven’t installed the EffectsTab addon. If you want to use it, you need to add the following to your website <head>

<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.min.js" charset="utf-8"></script>

Thanks for the fast reply Alex, however it isn’t working yet. Here’s the complete code i have now in the settings snippet;

<script charset="utf-8" src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.min.js" charset="utf-8"></script>

<script>
  UPLOADCARE_PUBLIC_KEY = "e453059f9108663d476c";
UPLOADCARE_LOCALE = "nl";

uploadcare.registerTab("preview", uploadcareTabEffects);

var widget = uploadcare.Widget("[role=uploadcare-uploader]");
var productImage = document.querySelector(".rimage_image");
var uploadedImage = null;

widget.onUploadComplete(function (fileInfo) {
  uploadedImage = fileInfo.cdnUrl;
  productImage.src = uploadedImage + "-/resize/800x/-/format/auto/";
  // clears the default srcset of the product image
  productImage.dataset.srcset = productImage.srcset = "";
});
 
</script>

@Meyro sorry, I overlooked the second underscore in the product image’s class name :man_facepalming: This one should work:

var productImage = document.querySelector(".rimage__image");

Thank you so much for your time @Alex, it works now! Merry Christmas :santa:

Glad that helped! Merry Christmas :christmas_tree: