Adding File Upload To Product Page WITH NO APP

nsr
New Member
6 0 0

I'm trying to add this code to my shopify product page :

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

it did work and showing up but the issue is when i click add to cart there is no image id and when the customer checkout i receive no image + customers can add to cart without uploading an image like if it not required like if it doesn't work 
please help it's rider theme i'm using (similar to dawn theme )

Replies 11 (11)

Rio
Shopify Staff
294 20 42

Hi, @nsr

 

Rio here from the Shopify Community team. 

 

Could you let me know more about your workflow? I'm happy to see if there is a free app that does this. 

 

Where did you want the image to be sent once the customer uploads it for the product? If you can share more about the workflow after the customer uploads to the product page, I'm happy to look into this for you. 

Rio | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

nsr
New Member
6 0 0

i just want it to be with the order . 
i used to work with that code in brooklyn theme and everything was fine the costumer upload the image and have it in the cart then when he complete payment i receive it with the order in the order section, but with this new dawn theme things got a little bit confusing !

J2112O
Shopify Partner
9 1 4

I think the file image upload input field has to be associated with the form. Try putting this attribute in the input field so that you receive it when adding to cart: form="product-form-{{ section.id }}".

nsr
New Member
6 0 0

where should i add that attribute with the current code in the product page ?? 
like this ? 

<form id="product-form-{{ section.id }}" >

<div class="product-form__item product-form__item--logo">
<label for="custom_photo">Upload image</label>
<input required id="custom_photo" type="file" name="properties[Logo]" class="product-form__input" form="product-form-{{ section.id }}">
</div>
</form>

J2112O
Shopify Partner
9 1 4

Hi, Yes it looks like you have it as a property for the input field so it looks correct to me.

elbee
Shopify Partner
5 0 1

I had the same issue. Thing is, it HAD worked properly in the past, but suddenly stopped. What made it work again was turning mini-cart OFF. (This was with Turbo theme.) Once I switched to any other type of cart, image uploads began working as expected.

nsr
New Member
6 0 0

how do i turn it off ?

elbee
Shopify Partner
5 0 1

In theme editing, go to theme settings, select Cart, and if your theme gives you choices for type of cart, you will see them there. 

nsr
New Member
6 0 0

sadly my theme don't have it :'( 

elbee
Shopify Partner
5 0 1

I've given mine a class="line-item-property__field" - have you tried doing that?

 

<p class="line-item-property__field"> 
      <label for="image_upload">Attach Image</label>
      <input id="image_upload" type="file" name="properties[Image Upload]"> 
</p>

topnewyork
Trailblazer
247 26 35

Check out this video if you are still looking for a solution

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel