File Uploader
Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.
Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.
All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.
In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow
File Uploader enables customers to upload files (images, documents, etc.) along with their product purchase. This is useful for custom products like personalized items, print-on-demand products, or any product requiring customer-provided files.
File Uploader is a Div Block with the sf-file-uploader attribute. The uploaded files are stored as line item properties in the order and can be accessed in your Shopify Admin assets.
Webflow app usage
- Select the Product Container in the Webflow designer
- In the Shopyflow app; click Add new
- Select File Uploader
- Configure file type and upload settings
- Select the Product Container again
- Paste File Uploader component
Webflow app settings
File Limit
Set the maximum number of files that can be uploaded (default: 5)
Max. File Size
Set the maximum size of files that can be uploaded (default: none)
Accepted File Types
Configure which file types customers can upload by entering the file extensions with a comma separator.
e.g. jpg, png, pdf
Leave empty to accept all file types
Inner components
Module contents
Available methods
Drop Zone
The drag and drop area where customers can drop files to upload them. Drop Zone is a Div Block with the sf-drop-zone attribute.
Customers can either drag and drop files onto this area or click it to open the file browser. The drop zone provides visual feedback when files are dragged over it.
File Preview List
Contains the list of uploaded file previews. File Preview List is a Div Block with the sf-preview-list attribute.
This component automatically displays all files that have been uploaded by the customer, showing file previews and allowing them to remove files if needed.
Add File Button
Opens the file browser to allow customers to select files for upload. Add File Button is a Div Block with the sf-add-file attribute.
When clicked, this button triggers the native file selection dialog where customers can choose one or multiple files to upload, depending on the File Uploader settings.
Component
contents
Drop Zone
The drag and drop area where customers can drop files to upload them. Drop Zone is a Div Block with the sf-drop-zone attribute.
Customers can either drag and drop files onto this area or click it to open the file browser. The drop zone provides visual feedback when files are dragged over it.
Webflow app usage
Webflow app settings
File Preview List
Contains the list of uploaded file previews. File Preview List is a Div Block with the sf-preview-list attribute.
This component automatically displays all files that have been uploaded by the customer, showing file previews and allowing them to remove files if needed.
Webflow app usage
Webflow app settings
State management
Related Utilities
