> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/product-options/20-option-types/others/file-upload.md).

# File Upload

### **1. How Does the File Upload Display?**

The File Upload option allows customers to upload their own files directly on the product page. This is ideal for personalized or customized products such as prints, t-shirts, business cards, or signage.

Example: A customer can upload a photo or logo for printing on a custom shirt

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FiKSMIpQCRI66q6a1A5fO%2Ffileupload1.png?alt=media&amp;token=a0732b72-01ac-4de7-958c-8384ae985d4d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdUj9i63Ow9RHbX_CM0LY1OCt0whv0IBPWCT3eFf7W386NMxSO295LOM2aLVlTfZPXjtkrkyYqqgq6w5En_Xo24h5zkZrl6AiwnKxTfmASilPzofZmyM81LsRj80cyG1SXosHl7gQ?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

### **2. How to Create a File Upload?**

**Step 1: Add a New Option**

* Click Add Option > File Upload to create a new file upload field.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FXfrJ2TC1KMmPTG5hBblI%2Ffileupload2.png?alt=media&amp;token=8b464a9e-6c17-46a1-9cc9-620e38315c31" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXep834f4zUxqEysn6E8uJqV4C-vbmBEvbypJsOxoDMpmQcNrm24E9__qkP8-jOrjG3DJDp-Y6-QiRD8bIA_FNlBP3Mwkoz5Jbi0EA1fI9-efv41wF08Do_sVDkTZQpOcDqW73uowA?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 2: Add Information to the File Upload**

* Option name: Enter the label for the field (e.g., "Upload Your Photo" or "Upload Logo File").

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FXhF3JrxcBaiS8C7VlWt9%2Ffileupload3.png?alt=media&amp;token=551f5dd7-8de9-45de-89b5-081c893816ee" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf3s7EhgcteQHqrJc_xbtN4N-AVNsrXwAPk7Q3B4ynR1zHOjFf8NE9aSmtSS6WIX4B6gsF7D9uXE3RNZMGawoujtuPEWqfcK0mF53nLppxSqu5kpIf1QGWV6qCU1b86mWtx89Pc?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

***You can tick:***

* ✅ “This option is required” if customers must select before adding to cart

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FjipIFmnFWI9elvXbDHHB%2Ffileupload4.png?alt=media&amp;token=6067b8b6-e911-47fd-a84b-613e9c319531" alt=""><figcaption></figcaption></figure>

How it looks on the storefront:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FrfVfMZApuNKqbwd5DJmG%2Ffileupload5.png?alt=media&amp;token=d7a35759-2f40-480c-bfc8-04783bbdef44" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc3CkiPw3FE7ro6hopLXvjq7F2K89qRxQaa4wmf89SAvxPiaky_xBHy0o6YSr5ecQi0vlHn0QMYWSLolN9AmuCNMiLiX3npC-__FuXKdMF1eiqkD787eJUyRsJSyahmFdnKJ9IUww?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

* ✅ “Hide option name” if you want to hide the option title above buttons

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FB9fPASY54qGVPkC7LtM5%2Ffileupload6.png?alt=media&amp;token=48aad15f-e79c-4e9f-a358-6b008a6f46b9" alt=""><figcaption></figcaption></figure>

How it looks on the storefront:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F67VqFYJt5y0Dwj7LL3At%2Ffileupload7.png?alt=media&amp;token=f6731c52-3b26-4c73-a810-9e00009410b1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdV6FhQMR0l9QeIzW38bBzt7O-umikKGx4aOxyxI5ATrLhXTsqZsG2uGGWx-EB0Cteqq58kifgJd_LhNIuSpm17Fgq1iJJ9_eX9DXNdzpJ50_tUZgXsKoLRuV9AAJ6DhSX9O3se?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

Other features:

* Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU)
* Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value.md)
* SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number)
* Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options.md)

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FD0FlN5bGNhmosEJWIBsm%2Ffileupload8.png?alt=media&amp;token=1c024664-2bbe-41e6-ad28-cf967405ac45" alt=""><figcaption></figcaption></figure>

**Step 3: Advanced Settings (If Needed)**

* **File type & size limits**: Set restrictions for file types (e.g., JPG, PNG, PDF) and maximum file size allowed.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FAnmVdnoRPMFFXOdM4PG8%2Ffileupload9.png?alt=media&amp;token=91272b9d-79e0-4cdf-94e2-87237060e530" alt=""><figcaption></figcaption></figure>

* **Help text**: Add notes such as “High-resolution files only” or “Maximum file size: 5MB” using tooltips or content placement.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FW41slHnarOPXHVsBXMJC%2Ffileupload10.png?alt=media&amp;token=48da4b91-2ac5-4f37-aad5-57077d52aecd" alt=""><figcaption></figcaption></figure>

* **Conditional Logic**: Show this field only when a specific option is selected. Useful for optional customization.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F4rYqgywNX7oAWaNZoq6n%2Ffileupload11.png?alt=media&amp;token=e009a14a-ce58-4e22-a084-630b570b4690" alt=""><figcaption></figcaption></figure>

* **Live mockup**: You can also use [**Product Personalizer – Live Mockup Settings**](https://docs.optis.me/product-options/getting-started/other-popular-features/product-personalizer-live-mockup-settings) to let customers preview their uploaded images or logos directly on the product in real time before adding it to the cart. This helps customers confirm their design and reduces potential order errors.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FG93Pq2prWTUljlo92JDo%2Ffileupload12.png?alt=media&amp;token=c484eaf5-6b6d-433f-939b-552a7b01c809" alt=""><figcaption></figcaption></figure>

### **3. Real-World Applications of File Upload**

* Custom Products: Upload artwork for personalized t-shirts, mugs, phone cases.
* Print Services: Customers upload business cards, resumes, banners, etc.
* Design Orders: Add personal images or brand logos for marketing materials.

### **4. Key Features of File Upload**

* Accepts image files (JPG, PNG), documents (PDF, DOCX), and more.
* Set size and file type restrictions.
* Supports required fields and conditional logic.
* Ensures you collect the correct file from the customer before they check out.