Adding file upload to product page

Highlighted
New Member
2 0 0

Hey, just started coding today because of I wanted to find a free solution for my POD website 

We sell canvas and have different uploaded based products, weither just typing in a Name or Name and File upload etc...

 

The code from Philip Jepton totally works and thank you for that

 

For those of you having difficulties displaying file upload fields on every product or for those, that don´t know how or where to add the code, here are some tips:

(Shopify changed the codes a little bit)

 

Adding the code:

1. Search for the "product-template.liquid" file in the "Snipped" sections

2. Type "STR + F" on the keyboard (this opens the search function) then search for "add to card" or "quantity"

3. Paste the code from "Philip Jepson" in between the add to card button section and the quantity section. (then it wil display on your store above the "add to card button" and under the quantity selector section

4. to make this field responsive replace the <div (at the start) and the </div> (at the end) with a <p and </p> then it will be the same size as the add to card and will have a own place above the card button

 

Extra Tips:

If you want to add this file upload button just on a few products on your store then do this like I did today. 

 

Example: We have one product that needs to have a file upload and one product that just needs a text field 

Above the "file upload button" code add a contition to it | You can add a condition above every code like the file upload product is in the categorie "With your own picture"

(I use the * above the title to let the customer know this field is required)

 

 {% if collection.handle == 'with-your-own-picture' %}
<p class="product-form__item product-form__item--logo">
<label for="Upload picture">Upload picture*</label>
<input required id="custom_photo" type="file" name="properties[Upload picture*]" class="product-form__input">
</p>

{% endif %}

 

This button know will only appear within the categorie "With your own picture"

 

Extra extra tip :

 

Just a text field instead of a file upload field | now with a different example of condition: if the product title contains something

 

{% if product.title contains "personalized text" %}
<p class="product-form__item">
<label for="your name">your name*</label>
<input required class="required product-form__input" id="your name" type="text" name="properties[your name*]">
</p>
{% endif %}

 

this will show a text field, where your customer can add a text for personalisation (the text also is shown in the card section 

Hope this will help you guys and save you a lot of time!

-------------------------------------------------------------------------------------------------------------------------------------------------

 

The upload button works for me but the picture is not shown in the card or the checkout

The text files are only shown in the card but not at the checkout

(you can check that by creating a 100% coupon for yourself and "buy" your product by yourself)

 

The uploaded text files are displayed under the order

The only thing i have to figure out now is where the picture upload is stored in shopify, because i can´t find the picture file uploaded

 

*Disclaimer: Like I said, I just started coding today but this are the things that worked out for me (except to find the pictures that where uploadet from the button)

0 Likes
Highlighted
New Member
1 0 0

I'm not sure if this code has become outdated in the past two and a half years, but when I try to copy this into my stores coding I get an error message back saying 

This file contains the following errors:
  • Error: Invalid JSON in tag 'schema'

 

Please help!

0 Likes
Highlighted
New Member
2 0 0

Hey Olivia,

 

you need to paste the code into the product-template.liquid" file in the "Snipped" sections

 

BUT for me only the Text Blocks are working but the file Upload field didn`t work for me... (Could upload pictures but did not find the uploaded picctures in my store)

 

To create a picture upload field for your customers I can recommend the App: UploadKit

Very easy to configurate, easy to handle for your customers and looks really nice instead just the grey upload field

 

Hope this will help you

 

Greetings from Germany

Pascal

0 Likes