Product file upload

Allow customers to upload one or multiple files directly into the cart submission. The block works as either a standard button+filename display or an interactive dropzone.

Related: Need to add fees for file uploads? See Custom Option Fees.

Configuration steps

1. Add Product file upload to the product form.
2. Choose a Line item property key and label (displayed above the field).
3. Decide on layout:
   • Dropzone: shows a large drag-and-drop target with helper text and a button to launch the file picker.
   • Button: renders a simple button with filename text underneath.
4. Optional settings:
   • Allow multiple files.
   • Restrict accepted file types/extensions (e.g., .png,.jpg,.pdf).
   • Adjust dropzone height, border radius, and text sizes to match your brand.
5. Enable fees if uploading a file should add an additional SKU (for example, a digitizing service). The block shows the price next to the label.
6. Use conditional logic if the upload should only appear after a particular selection, such as choosing a "Custom logo" option.

Shared features

All custom option blocks share these capabilities:

• Conditional display: Show or hide based on the value of another property using the Conditional logic settings. The block remains hidden and its inputs are disabled until the condition is met.
• Product tag filter: Limit to products with a specific tag using the Only show when product has tag setting.
• Width controls: Choose full or half width on tablet/desktop for easier layout mixing.
• Fee support: When paired with the optional Custom Option Fees script, specific selections can add a hidden product to the cart. Read more in Custom Option Fees.

How to name properties

• The Line item property key becomes the label in the cart and order details. Use plain text such as Patch Color or Engraving.
• Shopify automatically namespaces properties as properties[Patch Color] behind the scenes; you only need to provide the key in the block settings.
• Reuse the same property key across languages by translating the cart label in your locale files if needed.

Customer experience

• Files are uploaded with the add-to-cart request and accessible in the order timeline. The block warns shoppers when a required upload is missing and provides ARIA live regions for filenames and errors for screen readers.

Why accelerated checkout is hidden

Shopify only stores file line item properties when the product form is submitted as multipart/form-data. Accelerated checkout buttons such as Buy it now, Shop Pay, Apple Pay, Google Pay, and PayPal bypass that upload request, so the artwork would not reach the order.

Vero therefore hides accelerated checkout whenever the live product form contains a file input the customer can submit. This includes Product file upload, image-mode Product personalization, and Patch Preview fields, including fields placed inside a Product modal slider or associated with the form from elsewhere in the section.

Hidden and disabled upload fields do not count. Accelerated checkout remains available until a conditional or design-driven upload becomes active. Customers on a product that collects a file should use Add to cart; accelerated checkout in the cart remains available after the upload has been stored on the cart line.

Troubleshooting

• Confirm each property has a unique key before testing. Shopify overwrites duplicate property keys with the last value submitted.
• When fees are involved, preview the cart to ensure the correct fee product is added. Refer to Custom Option Fees for debugging tips.
• If Buy it now disappears, confirm whether the product form currently exposes an upload. That behavior protects the uploaded file from being skipped.
• If a conditional block never appears, double-check the comparison value spelling—it compares lowercase, trimmed text behind the scenes.

---

See also:

• Custom line item properties overview
• Product custom select
• Product custom multiselect
• Product custom property
• Product personalization
• Product swatch groups