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

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.

File uploads in Shopify serve two distinct use cases: uploads attached to product orders (like a custom logo for an engraved item), and uploads attached to contact form submissions (like a warranty claim photo). The right approach differs for each.

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.

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:

“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’.”

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, same developer.

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.

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. Standard limits: images up to 10MB, documents up to 5MB.

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 or by describing the full requirement to Fudge:

“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.”

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