Having customers upload images with order - display issues.

Highlighted
Shopify Partner
4 0 0

hi,

I've succesfully added the ability for customers to upload a custom image on the product page, and then display in the cart. But now I have 2 issues.

1. .tif images dont display in the cart, only .jpg .png are currently showing a thumbnail of the image. How do I allow it to show a preview of .tif image files?

2. Currently, once you choose an image to upload on the product page, it doesnt actually upload until you click the add to cart button, once clicked, then displays in the Shopping cart.   how could I add a second button for the upload, so i could replace the product image on the product page with the custom image? 

Thanks for any help.  code and pictures below.

Code on product-template.liquid section

<div class="product-form__item product-form__item--Uploaded Image">            
   <label for="custom_photo">Upload Image</label>
   <input required id="custom_photo" type="file" name="properties[Uploaded Image]" class="product-form__input">
</div>

code on cart-template.liquid section                 
 

                 
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}         
      {% if p.last contains '/uploads/' %}
              			<img class="lightbox" width="300" align="absmiddle" src="{{ p.last }}">        
      {% else %}
        {{ p.last }}
      {% endif %}
      <br>
    {% endunless %}
  {% endfor %}
{% endif %}

                  {% comment %}
                  Removing stock image preview in cart
                  <img class="cart__image" src="{{ item | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}">
                  {% endcomment %}

here is a screenshot of the .tif file not displaying in the cart, and a .jpg working just fine.    I'm still able to download the .tif, but I'd really like it to be able to display so the customer can see it when checking out.   https://imgur.com/a/As2wc1i        

0 Likes
Highlighted
New Member
1 0 0

Hey! Thank you for sharing! Have you found a way to show .tiff files correctly?

0 Likes