424 command network
⌘ K / Ctrl K

Command hints

Quick routes
↑↓ select Enter openEsc close
424 Solutions
Docs

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 Custom Option Fees are configured, selected options add the matching charge 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.
  • Enter only the label, such as Patch Color, in the block setting.
  • Keep property keys consistent across languages and customization steps. Contact 424 Solutions if you need help translating order labels without changing saved selections.

Customer experience

  • Uploaded files are available with the order. Customers are prompted when a required upload is missing, and filenames and errors are announced to screen readers.

Why accelerated checkout is hidden

Products collecting files use Add to cart so the files are attached before checkout. Express product buttons such as Buy it now, Shop Pay, Apple Pay, Google Pay, and PayPal can skip that step, so they are hidden while an upload field is active.

This applies to Product file upload, image-mode Product personalization, and Patch Preview, including upload fields inside a Product modal slider.

An upload field hidden by a condition does not hide express checkout. If choosing an option reveals the upload field, express product buttons disappear. Customers can still use express checkout from the cart after their files are attached.

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 troubleshooting steps.
  • 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, check that its comparison value matches the intended option. Capitalization and spaces at the beginning or end do not affect matching.

See also: