How to Add a File Upload Field in Shopify (2026)

Last updated
•
Expert reviewed
•
5 min read

Key takeaways

  • Shopify does not have a native file upload field in its contact form.
  • For product customization uploads (custom logo, design file), use Shopify’s line item properties with a file input.
  • For contact form file uploads (proof of purchase, reference images), use a form app that supports file uploads.
  • Hulk Form Builder and Jotform both support file uploads with cloud storage.

Shopify has no built-in file upload field. For product orders, add a file input named properties[...] to the product form so the file attaches to the line item. For contact forms, use a form app such as Hulk Form Builder or an embedded Jotform.

Use case 1 — File uploads for product customization

The most common reason Shopify merchants need file uploads: customers ordering personalized products need to submit their design file, logo, or reference image with the order.

The correct Shopify method: line item properties.

Line item properties let you attach custom data to a cart item, including file uploads. The uploaded file is stored by Shopify and linked to the order.

How to add a file upload line item property

Step 1 - Duplicate your theme and open the code editor.

Step 2 - Find your product form. This is usually in sections/main-product.liquid or snippets/product-form.liquid.

Step 3 - Inside the <form> tags, add a file input:

<div class="product-form__input">
    <label for="file-upload">Upload your design file</label>
    <input type="file" id="file-upload" name="properties[Design File]" accept=".jpg,.jpeg,.png,.pdf,.ai,.eps" />
</div>

The name="properties[Design File]" format is how Shopify associates the field with the line item. “Design File” is the label that appears in the order admin.

Your product form also needs enctype="multipart/form-data"; without it the file name is saved but not the file.

Step 4 - Shopify handles the file storage and displays the uploaded file in the order details.

Limitation: Shopify’s line item property file upload works in the standard cart and checkout flow. It does not work with accelerated checkout buttons (Shop Pay, PayPal) that skip the normal cart.

Describing it to Fudge

Rather than editing Liquid files yourself, describe the customization to Fudge, the AI operator for Shopify stores, and it drafts the change in your product template for you to preview before publishing:

“Add a file upload field to my product pages for custom products. Label it ‘Upload your design or logo (JPG, PNG, PDF)’. Show it only on products tagged ‘custom’.”

For other product page changes, see Customize Your Shopify Product Page.


Use case 2 — File uploads in contact forms

For contact forms where customers might submit proof of purchase, warranty photos, or reference images, Shopify’s native contact form doesn’t support file uploads at all.

Options:

Form apps with file upload support

Hulk Form Builder — includes file upload as a field type. Free plan supports basic file uploads. Uploaded files are emailed to you or stored in the app’s dashboard.

Powerful Contact Form Builder - similar functionality.

Setup: Install the app → create a new form → drag a “File Upload” field into the form → configure allowed file types and size limits → embed the form on your contact page.

Third-party form tools

Typeform and JotForm both support file uploads natively. Files are stored in the platform’s cloud storage and accessible via the form submission dashboard. Embed these on your Shopify page as an iframe.

Google Forms — free, supports file uploads (stored in Google Drive), very basic design. Works but looks generic.

For a contact form with more fields, see Add a Custom Contact Form in Shopify.


What types of file uploads are commonly needed?

Custom product stores:

  • Print files (PDF, AI, EPS, SVG)
  • Logo files (PNG, SVG, AI)
  • Photos for personalization (JPG, PNG)
  • Measurements or schematics (PDF)

Service-based Shopify stores:

  • Warranty claim photos (JPG, PNG)
  • Proof of purchase documents (PDF, JPG)
  • Technical specifications (PDF, DOC)

B2B or wholesale stores:

  • Business registration documents
  • Trade licenses

Always specify accepted file types and maximum file size clearly. A sensible limit is 10MB for images and 5MB for documents.

Build custom Shopify forms by describing what you need.
Start free trial

Custom file upload implementation

For stores that need a file upload experience that’s fully integrated with their store design — not embedded from a third-party form tool — a custom implementation using a cloud storage service is an option.

The approach: use an <input type="file"> in a custom form, upload the file to a cloud storage provider (AWS S3, Cloudinary, or a similar service) via a server-side endpoint, then pass the resulting URL as a hidden field in the form submission or as a line item property.

This is complex to build correctly (authentication, file size limits, security). It’s best handled by a developer. Fudge can build the form and the upload field in your theme, but the storage endpoint runs outside Shopify, so that part needs a service you set up separately. Describe the theme side to Fudge like this:

“Build a contact form with a file upload field. Files should be uploaded to [storage service] and the submission should include the file URL. Limit uploads to images and PDFs under 10MB.”

For where custom scripts go in a theme, see Add Custom JavaScript in Shopify.


Security considerations for file uploads

Any file upload field can be abused to submit malicious files. Always:

  • Restrict accepted file types using the accept attribute on the input
  • Set a maximum file size and validate server-side
  • Never execute uploaded files — store as static assets only
  • Use a reputable form app or cloud storage service that includes its own security validation

FAQ

What's the maximum file size for Shopify file uploads?

For line item property file uploads (custom product orders), Shopify caps individual files at 20MB. For uploads through form apps or external services, the limit depends on the tool - Hulk Form Builder and Jotform typically support 100MB+ on paid plans, while free tiers often cap at 10MB. Check your specific app's plan details.

Can I add a file upload to the Shopify cart page?

Not natively. Put the upload on the product page (this guide's method) so it attaches to the line item; a cart-level upload needs an app or an external storage service.

Does Shopify charge for file uploads from customers?

No. Files attached as line item properties are stored by Shopify at no additional cost. They appear in the order details and remain accessible to merchants for the lifetime of the order. Form-app uploads usually count toward the app's storage tier instead.

What file types should I allow on a custom product upload?

Restrict the accept attribute to only the formats you can actually use - typically images (.jpg, .png, .svg) and design files (.pdf, .ai, .eps). Allowing .doc, .zip, or executables creates security and processing risk without benefit. The narrower the accept list, the lower the abuse surface.

Where do uploaded files go when a customer submits an order?

Line item property files are stored by Shopify and linked to the order. Open the order in admin → click the line item → the file appears as a downloadable link in the line item properties. Files uploaded through form apps live in the app's dashboard or in your connected storage (Hulk's dashboard, Jotform's cloud, your S3 bucket).

Jacques's signature
Add file uploads and custom form fields by describing them to Fudge.

You might also be interested in

Jacques Blom
Jacques Blom
CTO at Fudge.