Shopify Question posted in
The Shopify help center can be found here.

How to update product variant image from front end in shopify

Apologies if this is asked before, I’m new in Shopify Development, I have implemented a third party design studio to my Shopify store, and I want to add a designed product image to cart instead of the default product image.

I have created the product property for this and add that property to cart along with product using property I’m able to show the designed image in cart page but not in the checkout page and order-related emails.
So, now I’ve created the variant in the product from admin and want to update its image from frontend as when I add a custom image to product variant image that will show the correct image in cart checkout and order email. So I want to add a dynamic image to it when the user adds design I want to update that image in the product variant.

Below the Ajax, I’m using to add the product to the cart but not working it add the product with selected variation but not the updated image, even I tried using updated the featured image src too. nothing works

<script>
     cartdata =  {
          "quantity": 1,
          "id": 31708393013302,
          "featured_image": {
               "url" : "mycustomimageurl",
               "aspect_ratio" : 1.0,
               "alt" :productTitle,
          },
          "image" : "mycustomimageurl",
     }
     $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          data: cartdata,
          dataType: 'json',
          success: function(data_res) {

               window.open('/cart', '_blank');
          });
</script>
Tags:

2

Answers


  1. 0

    You can’t update the product/variant image from the front-end with standard requests.

    If you could this would have been a security issue.

    You can pass the image as a product property and replace it in the checkout process with liquid replace ( which may be hard since the whole product grid will be a single liquid tag ) or javascript. But you need a Shopify PLUS account ($1000 per month) in order to modify the checkout.

    Login or Signup to reply.
  2. 0

    As said in the comments already, only Shopify Plus can modify checkout.liquid.

    You could also replace the main image of the product via the Shopify API. (you need to create a 3rd party App to do that). However the problem is, it will replace the main image for this product for all users. If I understand it right you want a custom image for every different user, right?

    In this case the only idea I have left is a dirty hack and will not work if 2 users orders the same product at the same time. The idea is: Don’t use shopify for the productimages. Instead get the images from somewhere else. Then once a customer wants to order this custom item you save it as shopify-productimage (via API) and then delete it once the order is placed. Again, if 2 users do this at the same time, they will overwrite each others image. So it’s not a good solution!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search