How to upload files to Shopify from Webflow
A file uploader is a powerful component that allows your customers to attach files directly to their orders. This makes it easy to collect artwork, documents or other files needed to process custom products, saving time for both you and your customers.
Shopyflow's File Uploader is an interactive component that is created using native Webflow elements. It lets users drag and drop or browse files, validates file type and size and uploads them to your Shopify storage. Once uploaded, the file link is automatically attached to the order so it can be processed in your Shopify backend.
How to add a file uploader to your project
- Open Shopyflow Webflow App in Webflow designer
- Go to Store Builder click Add new
- In the opening list click the File Uploader to copy it to clipboard
- Paste it inside the Buy Module in your project
Configuration
Once you’ve placed the File Uploader component on your product page, you can customize its behavior directly in the Shopyflow Webflow App. These settings let you define how many files customers can upload, how large they can be and which file types are accepted.
- Go to Shopyflow Webflow App > Store Builder
- Click the File Uploader (outermost element) in Webflow Designer
- Customize the settings:
- File Limit: Set how many files a customer can upload per product (e.g., 1 for a single artwork, 3 for multiple references).
- Max File Size — Define the largest allowed file size (e.g., 4MB) to prevent oversized uploads.
- Allowed File Types — Restrict uploads to specific formats (e.g., JPG, PNG, PDF) or allow all file types using *.
File Uploader structure
The File Uploader is made of 4 main elements.
Drop Zone
Drop zone is a drag-and-drop area that also works as a clickable zone for browsing files. It becomes hidden when user selects at least one file.
Add File Button
Add File Button lets customers manually choose a file from their device. It's used when multiple file upload is allowed and appears after dropzone becomes hidden.
Preview List
Preview List is a container element which displays all files a customer has chosen for upload. It updates dynamically as files are added or removed.
Preview Item
Preview Item represents one uploaded file, displayed as image (or file name). It comes with a remover button.
