A quick guide on how to allow customer file uploads on checkout with Shopify

Some of your customer orders may require a customer file upload when they checkout. This can be achieved by the following methods: 

IMPORTANT: Always backup your theme’s code file first. You can do this by simply copying the contents and pasting them into notepad or a plain text editor. This way you have a copy in case it goes wrong.

Editing code

  1. You’ll need to navigate to your product.liquid file and search for type=”submit”
  2. The part of the page that appears will be the ‘add to cart’ section
  3. You’ll want to add the following code to this section, a few lines above type=”submit”

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

4. If you want the customer file upload to always be required at checkout, you’ll need to add ‘required’ in the input tag, as per the below:

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

Please note: file uploads may not work if your cart page is a slide-out or popup cart (ajax). If you test this code above and the file does not upload, try switching to the ‘redirect to cart page’. This can be found in Customize Theme, then Cart Settings.

Collect personalised information on a product page

If you have a specific product that requires the customer to input information or a personalisation, you can do this on your product pages. This can be done by using line item properties. These are custom form fields that can be added to your product pages. It allows customers to choose or add personalised information about a product and then easily checkout.

Leave a Reply

Get the #1 Upsell App which has generated over $100m 💰 in Upsells!   Get App 🚀