Adding file upload to product page

New Member
1 0 0

Hello I have uploaded an upload file form from jotform to my webite once a customer makes payment. But i would like to ad this to the prouct page under the add to cart button so that customers don't have to wait until the end.

I have searched and searched but have not been able to find a way

 

any help would be greatly appreciated :)

0 Likes
Shopify Partner
1705 47 152

https://docs.shopify.com/themes/customization/products/get-customization-information-for-products#al...

try https://apps.shopify.com/uploadery

also https://apps.shopify.com/search/query?utf8=%E2%9C%93&q=upload

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
Tourist
7 0 2

I've worked out how to do this for free!
Go to your product.liquid file and search for:
 

type="submit"

This is the 'add to cart' part of your page.
You want to add the following code to a few lines above this

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

If you want this to be required then add the word required on the input tag

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


DEMO

Note: File uploads may not work if your cart is a slide-out or popup (AJAX) cart. If you test and the file upload doesn't work, try switching to the "redirect to cart page" option in your Customize Theme > Cart settings.

0 Likes
New Member
1 0 0

This is great Philip, thank you!

Do you know how to make the upload optional, as customer currently has to upload an image before progressing to cart?

Thanks.

 

 

Sorted now Philip, thank you!

0 Likes
New Member
1 0 0

This isn't working for me in the Debut theme... I can find the Product.liquid, but can't successfully post the code.

This is what it looks like, any advice?

{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  theme.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
</script>

{% assign current_variant = product.selected_or_first_available_variant %}

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {% if product.featured_image %}
    {% assign image_size = product.featured_image.width | append: 'x' %}
    "image": [
      "https:{{ product.featured_image.src | img_url: image_size }}"
    ],
  {% endif %}
  "description": "{{ product.description | strip_html }}",
  {% if current_variant.sku != blank %}
    "sku": "{{ current_variant.sku }}",
  {% endif %}
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor }}"
  },
  {% if product.variants %}
    "offers": [
      {% for variant in product.variants %}
        {
          "@type" : "Offer",
          "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : "{{ variant.price | divided_by: 100.00 }}",
          "priceCurrency" : "{{ shop.currency }}",
          "url" : "{{ shop.url }}{{ variant.url }}",
          "itemOffered" :
          {
              "@type" : "Product",
              {% if variant.image %}
                {% assign variant_image_size = variant.image.width | append: 'x' %}
                "image": "http:{{ variant.image.src | img_url: variant_image_size }}",
              {% endif %}
              {% if variant.title != blank %}
                "name" : "{{ variant.title }}",
              {% endif %}
              {% if variant.sku != blank %}
                "sku": "{{ variant.sku }}",
              {% endif %}
              {% if variant.weight != blank %}
                "weight": {
                  "@type": "QuantitativeValue",
                  {% if variant.weight_unit != blank %}
                    "unitCode": "{{ variant.weight_unit }}",
                  {% endif %}
                  "value": "{{ variant.weight | weight_with_unit: variant.weight_unit }}"
                },
              {% endif %}
              "url": "{{ shop.url }}{{ variant.url }}"
          }
        }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  {% endif %}
}
</script>
 

0 Likes
Shopify Partner
43 0 2

@Dan - did you try looking in the sections folder?

The file you should be looking for is product-template.liquid. That should have the form in it.

0 Likes
Tourist
4 0 1

I have a multi-file upload option on my Product page, but now I want to have those attachments visible on the Cart page. Is there additional code related to the type='file' bit that needs to be added to the Cart HTML?

Philip Jepson, what you have in your demo link is essentially just what I want. I don't need the image display, just the link to the file(s) the customer has previously uploaded.

Update to above:

I found the code I was missing in my cart.liquid (Templates) at https://help.shopify.com/themes/development/templates/cart-liquid. Now need to find a solution for situations of multiple file uploads.

0 Likes
Tourist
5 0 1

Jake, where does the files that a customer attaches save to?
In my case a customer should attach a picture to the product that I would need to then donwload after the purchase has been made.

It does not show along with the order page in admin also not in files in settings in shopify.

 

Any clues?
 

1 Like
Shopify Partner
2 0 0

Hi this not work on cart page

how can i show when user image upload image then instant show that image on product page and cart page with attachment product order.

0 Likes
New Member
1 0 0

For some reason, even if I add the word "required", nothing changes. I can still add the item to the card or proceed to checkout without it. Thoughts?

0 Likes