Image upload in product page

Highlighted
Tourist
5 0 3

Hello,

 

I'm trying to add an image upload box in a product page. I've been following this shopify tutorial:

 

https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for...

 

I've encountered a few issues:

 

  • They don't tell you the file upload code, which I found to be: 
<p class="line-item-property__field">
<label for="custom_photo">Photo (JPG or PNG)</label>
<input required id="custom_photo" type="file" name="properties[Photo]">
</p>
  • I managed to get the image upload box all pretty in my product page but when a customer uploads an imega and buys the product I do not receive any image in my shopify admin

 

So, what am I missing here? I don't have AJAX/drawer cart on and I'm using the narrative theme.

 

I'd really like to be able to do this without paying extra fees to external apps..

 

Thanks!

0 Likes
New Member
4 0 0
I'm looking for the same thing. Did you get this figured out?
0 Likes
New Member
1 0 0

Did you find out how to do it yet ? Looking for the same thing.

0 Likes
Shopify Partner
2116 353 444

Hi,

They don't tell you the file upload because may be in your product form added attribute "novalidate", so please check and remove this so user can not add product without file upload.

And for image or file upload may be you need to upload image on your external server first before add to cart because shopify can not find path of uploaded image. that's why shopify can not pass uploaded file path in your order.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
1 0 0
Uploading an image in conjunction with an order is a basic function that should be easy, expected, and included in a premium service such as Shopify. I need this functionality in my site or I cannot run my online business correctly.
0 Likes
New Member
5 0 0

Heyy!! I am having this same issue and have been going at it for hours.  Have you found a solution yet?  Thank you!

0 Likes
New Member
5 0 0

Hey! So do I have to redirect it somewhere so that the upload shows up on the cart page?

 

Screen Shot 2019-07-10 at 6.52.16 PM.pngScreen Shot 2019-07-10 at 6.52.31 PM.png

0 Likes
Shopify Partner
2116 353 444

Hi @Mozay 

Yes if you want to show preview on cart page of uploaded image then you have to first upload image on your external server then you can set path of this file to show preview. 

Let me know if you need help.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
5 0 0

What page would I do that from and how do I link it?  Would it have to be on both the product.template.liquid & cart.liquid?

This is on the product-template.1

{% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*" data-quantity-input>
</div>
{% endif %}

<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden" data-error-message-wrapper role="alert">
{% include 'icon-error' %} <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
</div>

<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>

{% if template contains 'custom-1' %}

<p class="line-item-property__field">
<label for="custom_photo">Photo (JPG or PNG)</label>
<input required id="custom_photo" type="file" name="properties[Photo]">
</p>

<p class="line-item-property__field">
<label for="custom-message">Custom message</label>
<textarea required id="custom-message" name="properties[Custom message]"></textarea>
</p>


<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
</style>


{% endif %}

 

 

On the cart.liquid page under  {{ item.product.title }}. I added this code..

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}

I have both amazon s3 and dropbox business.  if that helps.  

Thank you so much!

0 Likes
Shopify Partner
2116 353 444

For that you have to upload image in your external severer using Jquery+ajax and PHP (or any script language), then get back uploaded image path in response and then pass it in line item property (i.e: name="properties[Photo]")

On cart page you have to find line item contain "Photo" then set this path url i image tag to show image preview 

Let me know if you need help or want me to do this.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes