Image or document upload feature in Shopify form

Shopify is one of the most popular e-commerce platforms. In this article, I will tell you how to add a feature of image or document upload in the Shopify product page and store it in the backend so that the admin can download it.

Step 1: Open Shopify backed and go to the code editor where all files are placed.

Step 2: Look out for “main-product.liquid” or “buy-buttons.liquid”

Step3: Since we also want to store the data in the checkout and order area so we will have to add the code before the add to cart button. In the latest Dawn theme, this code is available in the file “buy-buttons.liquid”. The below code will show the upload option jut above the ADD TO CART button.
Here is the code

<label for="data">
    {{- 'products.product.upload_excel' | t -}}
     <span class="sub_label">{{ 'products.product.upload_fomat' | t }}</span></label><br>
              <input
                required
                class="required"
                type="file"
                accept=".xlsx, .xls"
                name="properties[data]" >

Step 4: If you also want that the customer should not be able to add product to the cart if no image or document is upload that is you want the upload feature to be “mandatory” then remove “novalidate”:”novalidate” from the product-form . This will be on the top and will look something like this

{%- form 'product', product, id: product_form_id, class: 'form', data-type: 'add-to-cart-form',  novalidate: 'novalidate' -%}

For more Shopify help please contact us on by clicking here.