Image preview on cart is not working

Questions / Help
1

I just completed the whole process of adding the upload care button on my shopify store.
Everything is working. I can upload the image, I can see the image preview on the same page but when I add to cart and go to the cart page then that uploaded image is not visible on the cart page.
Also, there is no link of the uploaded image in the cart page and on the order page.
See the image below and please help me :point_down:

image
image771×377 91.9 KB
``

:point_down:

image
image1164×268 32.2 KB

Please tell me how to get the preview of the cart page, as well as the link to the custom image.

Regards,

2

Hi @dineshkrdk7 :wave:

It seems you haven’t linked the widget’s input field with a custom product attribute. Here you can find how to do this

If this doesn’t help, share the code snippet you added to the product template file.

3

Hey Alex!
Thank you very much for your reply.

I have linked the widget input field with a custom product attribute.
You can check the product from the link below.
Link – https://mr-playmat.myshopify.com/collections/frontpage/products/standard-playmat-24in-x-14in

You can successfully upload the image to this product and the preview will also be displayed to you. But when you will add it to the card then the preview will not be displayed to you.
Also, you will not get the link to the uploaded image in the cart page.

Screenshot of upload care setting code

image
image1366×768 107 KB

The reason I think for the image not displayed in the cart page and also not getting the link is
In the step by step guide shown in the upload care site say to find the following

<img class="cart__image" src="{{ properties['custom image'] | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}">

link in the cart-templte.liquid file and replace it with this code

<img class="cart__image" src="{{ item.properties['custom image'] | append: '-/resize/150x/' }}" alt="{{ item.title | escape }}" />

but in the cart-template.liquid file this particular code is not available.

The code available in the cart-template.liquid file which is similar to that code is :point_down:

<img class="cart__image" src="{{ item | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}" data-item-url="{{ item.url }}

Please let me know if you need any other code.

PS: I am using Debut shopify theme (The same theme used in the step by step guide of upload care site)

4

Thanks for clarifying. We might have a typo in the tutorial. In order to display a preview on the cart page, the following code

<img class="cart__image" src="{{ item | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}" data-item-url="{{ item.url }}" />

should be replaced with this

<img class="cart__image" src="{{ item.properties['custom image'] | append: '-/resize/150x/' }}" alt="{{ item.title | escape }}" data-item-url="{{ item.url }}" />

Let me know if this helps.

5

Hey Alex!
Thanks your reply but the code which you provided me isn’t working.

Please check the screenshot below

image
image1276×437 61.2 KB

Also, I am not getting the link to the image which I uploaded in the previous step.

Please hep me with this

6

Try to also change the widget input’s value attribute to value="{{ properties['custom image'] }}. If this doesn’t help, share the source code of your cart-template.liquid file so I can look into it.

7

Hey Alex!
The code which you gave me in your last message didn’t worked.

I have attached my cart-template.liquid file to this message. Please check it and please help me out.
Link – https://drive.google.com/open?id=1eX-64P20XC-rYTBt_SfNeL1_OzPeovs5

Regards

8

@dineshkrdk7 did you try to change the value attribute if the widget input as I recommended? As I can see, it’s still the same. On the screenshot you can see how it should look like

image
image1431×424 121 KB

9

Hey Alex!
Thanks for your reply.

The value attribute you are talking about and also shown me in the screenshot is not in the cart-template.liquid file. It is in the uploadcare-fields.liquid file. Also the code there is exactly same as you asked me to write.

Please let me know that how can this be solved now.

Regards,

10

In this case, the preview should be displayed correctly on the cart page. I can presume it might be caused by some other apps/plugins you’re using in your store. I can only recommend you to contact Shopify support regarding this issue as it’s not related to our widget.