File Upload ver 2.0

The new File Upload Ver2 brings an upgraded file uploading experience to your store. It introduces an interactive drag-and-drop zone, a dedicated upload modal, multi-file support, audio/video previews, and a built-in image editing suite that lets customers crop, rotate, and enhance photos directly on your product page before adding items to the cart.

Follow these steps to set up the File Upload option:

1. Create or Open an Option Set

• Go to the Aris Options tab.

• Click Create Option Set (or select an existing option set to edit).

2. Add the File Upload Option

• Click Add Option.

• In the Option Type dropdown, select File upload.

• Enter your Label on product and Label on cart.

3. Configure Upload Sources & Accepted File Types

Under the option settings, configure how customers can upload their files:

• Upload Sources: Choose where customers can upload from:

  • Local files: Upload directly from their computer or mobile device.

  • Camera: Snap a live photo using the device camera.

  • Direct link: Paste an image/file URL.

• File Type: Select which types of files are allowed:

  • All files: Accepts any file format.

  • Images: Accepts standard image formats (JPG, PNG, WEBP, GIF, SVG, HEIC, etc.).

  • Documents: Accepts PDF, DOCX, XLSX, CSV, TXT, AI, PSD, etc.

  • Audio: Accepts MP3, WAV, M4A, etc.

  • Video: Accepts MP4, MOV, WEBM, etc.

  • Custom: Manually pick specific extensions (e.g., only PNG and PDF).

4. Set File Size & Multi-File Limits

• Max file size (MB): Set the maximum allowed file size per upload.

  • Free / Basic / Pro: Up to 20 MB.

  • Advanced: Up to 50 MB.

  • Premium: Up to 100 MB.

• Min file size (MB): Optional minimum file size requirement.

• Multiple files upload: Enable this checkbox to allow customers to upload multiple files at once.

  • Min files: Minimum number of files required before checkout.

  • Max files: Maximum number of files permitted.

5. Enable the Image Editor & Sizing Constraints (Optional)

If your products require custom artwork, photo printing, or engravings, expand the Image Editor panel:

• Sizing constraints: Restrict the uploaded image dimensions:

  • Minimum pixel size: e.g., 1000 x 1000 px to prevent blurry printing.

  • Maximum pixel size: e.g., 4000 x 4000 px.

• Cropping tools:

  • Force cropping: Automatically opens the crop tool so customers must crop before uploading.

  • Crop freely: Lets customers adjust the crop box freely.

  • Limit to preset aspect ratio: Restrict cropping to specific ratios (1:1, 3:2, 4:3, 16:9, etc.).

• Editing tools: Enable or disable specific editing capabilities:

  • Crop shape: Circular, triangular, or rounded corners.

  • Rotate: Rotate images 90° or 180°.

  • Enhance: Auto balance brightness and contrast.

  • Sharpen: Increase edge sharpness.

  • Grayscale: Convert images to black-and-white.

6. Assign Products & Save

• In the Select product section, select the products that should include this option set.

• Click Save in the top right corner.

You can style both the dropzone and the upload modal to match your store's branding:

1. Go to Settings → Design.

2. Select the File Upload option component.

3. Customize the elements:

   • Dropzone: Border style (solid, dashed, dotted), border color, background color, text color, icon color, and "Browse File" button colors.

   • Upload Modal: Modal background color, primary button background, tab menu active/inactive colors, and corner radius.

4. Click Save.

1. On the Product Page (Dropzone)

Customers see a clean, modern drag-and-drop zone indicating allowed file types and size limits.

2. In the Upload Modal

Clicking or dragging files into the dropzone opens the full upload modal:

• Multi-file upload progress indicator.

• Thumbnail list of uploaded files.

• Built-in player for audio and video files.

• Direct action buttons to crop, edit, or delete individual files.

3. In the Cart & Order Details

Once uploaded, file download links are securely saved in the order line item properties, visible on the Cart page, Checkout, and Shopify Order Admin.

• Drag-and-Drop Dropzone: Replaces the legacy button with an interactive upload container.

• Full Image Editing Suite: Built-in cropping, aspect ratio locking, shape cropping (circle, triangle, rounded), rotation, sharpen, enhance, and grayscale.

• Pixel Sizing Constraints: Protect print quality by enforcing minimum/maximum width and height in pixels.

• Multi-Media Preview: Built-in video and audio players for instant preview.

• Flexible Sources: Support for local files, mobile camera capture, and direct URLs.

• Plan Upgrades: Higher upload capacity (up to 100 MB on Premium plans).

Note for Existing Stores: Existing File Upload options created before this update will continue working seamlessly. If you like to change the version, please contact us via help@arisify.io