Shopify App | Documentation

CI Upload - Files & Images

If you have any questions beyond the scope of this guide, feel free to email us at info@cynoinfotech.com.

Information

To enhance the shopping experience on an eCommerce store, allowing customers to upload files or images during the product selection process can be a game-changer. Whether it's for custom printing, documentation submission, or design input, the Upload Files & Images App enables seamless file uploads directly from the product page — eliminating the need for follow-up emails or external communication.

This app is especially useful for merchants offering customized products such as printed merchandise, gift items, photo frames, keychains, or any product that requires additional customer input. Customers can upload photos, documents, or artwork while placing the order, crop images to the exact shape or ratio you need, and see their uploads as thumbnails right in the cart.

Store admins have full control over file types, size limits, image dimensions and minimum file counts, and can even charge for uploads by adding a Flat Rate, Per File or File Count Range price to the product in the cart. Uploaded files are linked with each specific order, can be stored in Shopify Files or your own Dropbox account, and can be reviewed, filtered, exported to CSV or downloaded in bulk as a ZIP archive.

This app improves store functionality by:

• Reducing manual communication for collecting images or files.
• Preventing order delays due to missing or unsuitable uploads.
• Ensuring that every order is complete at the time of purchase.
• Turning file uploads into an additional revenue source with upload pricing.

By simplifying the file submission process, this app not only saves time for customers and store owners but also improves customer satisfaction and trust in the customization process. It’s the ideal solution for any store that deals in personalized or document-based products.

Key Features

Enable App

Use the Setup Guide on the app dashboard to enable the CI Upload Files & Images app on your storefront.

To make CI Upload Files & Images work properly on your storefront, app embed must be enabled. Click the Activate App button and click Save in the theme editor to enable it.

Once you've done this, come back to the Setup Guide in the admin and click I have done it. When both steps show as completed, the app is ready to use.

• The Setup Guide tracks your progress with a step counter (e.g., "2 out of 2 steps completed") and a progress bar.
• Activate CI Upload Files & Images on Your Store: Click the Activated button to enable the app embed from your theme editor.
• Configure Now: Guides you to add your settings after activation.
• Click View Guide if you can't understand or need to help for the setup then you can check in this User Guide.

Analytics

The Analytics section on the app dashboard provides an overview of your file uploader's status, product and rule assignments, uploaded files, and current subscription plan.

From this section, you can quickly check the following information:

Widget Position

You can set position anywhere in the Product Information from Product Page. Also, you can check visible in Quick View option.

If you'd like to display it elsewhere on the product page, you can reposition it by adding the CI File Uploader app block in your theme editor.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit and click Customize.
3. Navigate to the product page or section where you want the uploader to appear.
4. In the sidebar, click Add block.
5. Under the Apps section, select CI File Uploader.
6. Position the block where you want it displayed.
7. Click Save in the editor to apply the changes.

File Uploader

Use this setting for File uploader general settings and dropzone appearance design settings.

General Settings

Applies To

Select the option where you want the dropzone to appear.

Upload Field

You can set the dropzone field configure for files.

Note Field

You can set the text field settings for note field.

Appearance

Design the dropzone as your theme with Upload Style Dropzone or Button using Text or Button Styling, Box or Button Styling and Icon Settings.

Dropzone Upload Styling

You can choose the Dropzone or Button as per required.

Dropzone Text Styling

The Dropzone Text Styling section allows you to customize the text displayed in the file upload dropzone on your storefront. You can change the text content, color, size, and font weight for both primary and secondary text to match your store's design.

Box Styling

The Box Styling section allows you to customize the appearance of the file upload dropzone on your storefront. You can adjust the background colors, border colors, shadow, corner radius, padding, and vertical spacing to match your store's design.

Dropzone Show Icon

The Show Icon setting allows you to display an icon inside the file upload dropzone on your storefront. You can enable or disable the icon and customize its type, position, size, and color to match your store's design.

Button Text Styling

The Button Text Styling section allows you to customize the text and typography of the upload button displayed in the file upload dropzone on your storefront. You can change the button label, font size, text colors, and font weight to match your store's design.

Button Styling

The Button Styling section allows you to customize the appearance and layout of the upload button displayed in the file upload dropzone on your storefront. You can adjust the button width, alignment, size, colors, border, and corner radius to match your store's design.

Button Show Icon

The Show Icon setting allows you to display an icon inside the upload button on your storefront. You can enable or disable the icon and customize its type, position, size, and color to match your store's design.

Label Styling

The Label Styling section allows you to customize the appearance of the upload field label displayed on your storefront. You can adjust the label color, font size, and font weight to match your store's design and maintain a consistent appearance across your product pages.

Help Text Styling

The Help Text Styling section allows you to customize the appearance of the help text displayed around the file upload field on your storefront. You can adjust the text color, font size, and font weight to make additional instructions clear and consistent with your store's design.

Advanced Settings

The Add Price to Uploads feature allows you to charge customers an additional amount when they upload files through the upload field on your storefront. The additional charge is added to the product's price in the cart.

Add price to uploads

Enable Add price to uploads to configure upload pricing. You can choose from three pricing types: Flat Rate, Per File, and File Count Range.

Enable Add Price to Uploads

Turn on this setting to charge customers an additional amount for their uploads. Turn it off if you do not want to apply an extra upload charge.

Price Type

Choose how the additional upload charge is calculated.

Flat Rate

Charge a fixed amount when a customer uploads at least one file, regardless of how many files they upload.

• Price: Enter the fixed amount to charge.
• The charge applies when the customer uploads one or more files, regardless of the total number of uploaded files.

Example: If the price is ₹10, the customer is charged ₹10 whether they upload one file or multiple files.

Per File

Charge customers for each file they upload.

• Price per File: Enter the amount to charge for each uploaded file.
• The charge is multiplied by the number of files uploaded.

Example: If the price per file is ₹10 and the customer uploads 3 files, the additional charge is ₹30.

File Count Range

Set different prices based on the number of files a customer uploads. You can create multiple ranges to apply different charges to different upload quantities.

• Min files: Enter the minimum number of files for the range.
• Max files: Enter the maximum number of files for the range. Leave the maximum blank for the final range if there is no upper limit.
• Price: Enter the charge for that file-count range.
• Add range: Click this button to add another pricing range.
• Use the delete icon to remove a range you no longer need.

Each range starts immediately after the previous range ends. Configure your ranges in order to cover the intended file counts without gaps or overlaps.

Example:

One-Time Charge

Enable One-time charge to charge once per cart line instead of charging separately for every product unit.

When this setting is disabled, the upload charge is applied for each product unit. For example, if the customer purchases 3 units, the charge may be applied 3 times.

When enabled, the charge is applied only once per cart line, regardless of the product quantity.

Image Cropping

The Image Cropping feature allows customers to crop their images before uploading them to your store. Enable this feature to let customers adjust their images according to your preferred cropping mode.

Enable Image Cropping

Turn on Enable Image Cropping to allow customers to crop images before uploading them. When enabled, you can choose the cropping mode that best suits your products.

Cropping Mode

Choose one of the following cropping modes:

When you select this mode, the following settings are available:

Example Configuration:

These are example presets. Configure the labels and ratios according to your product requirements.

File Restrictions

You can set the minimum and maximum dimensions for image uploads.

Uploader Rules

Read the three points below to understand how Uploader Rules work.

Uploader Rules Grid

The Uploader Rules section allows you to create and manage rules that control where file upload fields appear in your Shopify store. You can apply rules to specific products and manage their status, priority, and settings from one place.

Rule Settings

The Rule Settings section allows you to configure the name, priority, and status of an uploader rule. These settings help you identify and manage rules for your file upload fields.

Applies To

The Applies To section allows you to choose which products or collections an uploader rule applies to. You can apply a rule to all products, specific products or collections, or choose None if you do not want to assign the rule to any products or collections.

Enable Upload Field

The Enable Upload Field section allows you to configure the file upload field displayed on your Shopify product pages. You can customize the field label, make uploads mandatory, set file count and size limits, restrict allowed file types, and provide helpful instructions for customers.

Enable Note Field

The Enable Note Field section allows customers to add custom notes or instructions along with their file uploads. These notes can provide additional information to help you understand and process the uploaded files correctly.

Appearance

Upload Style

The Upload Style section allows you to choose how the file upload field appears on your Shopify product page. You can select a large drag-and-drop area or a compact upload button, depending on your store's layout and requirements.

• Dropzone: Displays a large upload area where customers can drag and drop files or click to browse and select files. This option provides a clear and visible upload area on the product page.
• Button: Displays a compact button that opens the file browser when clicked. This option takes up less space on the product page.

Dropzone Text Styling

The Dropzone Text Styling section allows you to customize the appearance of the primary and secondary text displayed inside the file upload dropzone. You can adjust the text content, color, font size, and font weight to match your store's design.

Dropzone Box Styling

The Dropzone Box Styling section allows you to customize the appearance of the file upload dropzone on your Shopify storefront. You can adjust the background colors, border colors, hover effects, shadow, corner radius, padding, and vertical spacing to match your store's design.

Dropzone Show Icon

The Dropzone Show Icon setting allows you to display an icon inside the file upload dropzone on your Shopify storefront. You can choose the icon, adjust its position and size, and customize its color to match your store's design.

Button Text Styling

Customize the text displayed on the upload button to match your store’s design. Adjust the button label, font size, text colors, and font weight to create a consistent experience for your customers.

Button Styling

Customize the appearance and layout of the upload button — width, alignment, size, colors, border, and corner radius — to match your store's design.

Show Icon

Customize the icon displayed inside the upload button to make it easier for customers to identify the upload action. You can enable or disable the icon, choose an icon, adjust its position, and customize its size and color.

Label Styling

Customize the appearance of the upload field label to match your store’s design. Adjust the label color, font size, and font weight to ensure the label is clear and easy for customers to read.

Help Text Styling

Customize the appearance of the help text displayed below the upload field. Adjust the text color, font size, and font weight to make additional instructions easy to read while keeping them visually distinct from the field label.

Advanced Settings

The Add Price to Uploads feature allows you to charge customers an additional amount when they upload files through the upload field on your storefront. The additional charge is added to the product's price in the cart.

Add price to uploads

Enable Add price to uploads to configure upload pricing. You can choose from three pricing types: Flat Rate, Per File, and File Count Range.

Enable Add Price to Uploads

Turn on this setting to charge customers an additional amount for their uploads. Turn it off if you do not want to apply an extra upload charge.

Price Type

Choose how the additional upload charge is calculated.

Flat Rate

Charge a fixed amount when a customer uploads at least one file, regardless of how many files they upload.

• Price: Enter the fixed amount to charge.
• The charge applies when the customer uploads one or more files, regardless of the total number of uploaded files.

Example: If the price is ₹10, the customer is charged ₹10 whether they upload one file or multiple files.

Per File

Charge customers for each file they upload.

• Price per File: Enter the amount to charge for each uploaded file.
• The charge is multiplied by the number of files uploaded.

Example: If the price per file is ₹10 and the customer uploads 3 files, the additional charge is ₹30.

File Count Range

Set different prices based on the number of files a customer uploads. You can create multiple ranges to apply different charges to different upload quantities.

• Min files: Enter the minimum number of files for the range.
• Max files: Enter the maximum number of files for the range. Leave the maximum blank for the final range if there is no upper limit.
• Price: Enter the charge for that file-count range.
• Add range: Click this button to add another pricing range.
• Use the delete icon to remove a range you no longer need.

Each range starts immediately after the previous range ends. Configure your ranges in order to cover the intended file counts without gaps or overlaps.

Example:

One-Time Charge

Enable One-time charge to charge once per cart line instead of charging separately for every product unit.

When this setting is disabled, the upload charge is applied for each product unit. For example, if the customer purchases 3 units, the charge may be applied 3 times.

When enabled, the charge is applied only once per cart line, regardless of the product quantity.

Image Cropping

The Image Cropping feature allows customers to crop their images before uploading them to your store. Enable this feature to let customers adjust their images according to your preferred cropping mode.

Enable Image Cropping

Turn on Enable Image Cropping to allow customers to crop images before uploading them. When enabled, you can choose the cropping mode that best suits your products.

Cropping Mode

Choose one of the following cropping modes:

When you select this mode, the following settings are available:

Example Configuration:

These are example presets. Configure the labels and ratios according to your product requirements.

Restrict Image Dimensions

You can set the minimum and maximum dimensions for image uploads.

Restrict Image Dimensions by Variant

Set different minimum and maximum image dimensions for individual product variants. This setting is useful when each variant requires a specific image size, such as different photo frame sizes or custom-printed products.

When enabled, variant-specific dimension limits override the general image dimension restrictions configured above. The available variants are based on the products selected in Applies To.

Additional Settings

If you want File Rename and use custom theme (for Element Selectors) then you can use Additional Settings.

Settings

Additional Placements

Use Additional Placements to display the file uploader in other sections of your Shopify store, beyond the standard product page. You can enable placements for the Featured Product section and Quick View, then add the app block in the appropriate location using the Shopify Theme Editor.

1. Featured Product

   Enable this option to allow the file uploader to appear in a Featured Product section on your storefront.

   How to set it up:

   1. Enable theFeatured Product option in the app's Additional Settings.
   2. Open your Shopify Admin and go toOnline Store → Themes → Customize.
   3. Open the relevant page or template containing the Featured Product section.
   4. Select theFeatured Product section.
   5. ClickAdd block → Apps.
   6. Select theFile Uploader Renderer app block.
   7. Save your theme changes.

   Once configured, the file uploader can appear in the Featured Product section.

2. Quick View

   Enable this option to allow the file uploader to appear in your theme's Quick View interface, where customers can view product details without navigating to the full product page.

   How to set it up:

   1. Enable theQuick View option in the app's Additional Settings.
   2. Open your Shopify Admin and go toOnline Store → Themes → Customize.
   3. Open the product information template.
   4. Select the appropriate product information section.
   5. ClickAdd block → Apps.
   6. Select theFile Uploader Renderer app block.
   7. Save your theme changes.
   Important: Quick View reuses the blocks configured for its product information section. Add the app block to that section even if the uploader already works on the regular product page.

File Rename on Download

The File Rename on Download feature allows you to automatically rename uploaded files when downloading them from the Uploaded Files section of the app. You can define a custom filename pattern using dynamic variables such as product name, variant, order number, quantity, and upload date.

This makes downloaded files easier to identify, organize, and associate with the correct product and order.

1. Enable File Rename
   Choose whether to enable automatic file renaming.
   • Yes: Automatically generates filenames using your configured naming pattern when downloading files from the Uploaded Files section.
   • No: Keeps the original uploaded filename when downloading files.
2. Download File Name Pattern
   Enter a custom naming pattern using the available variables. These variables are replaced with the corresponding product, order, or upload information when the filename is generated.
   • Default pattern:
     {product_name}-{variant}-{order_number}-{quantity}-{date}
3. Output Preview
   The Output Preview displays an example of the generated filename based on your configured pattern.
   • For example, using the default pattern:
     Print Your Own Fabric-Green / S-S-123-1-2025-10-31.png

The preview helps you understand how the selected variables will appear in the downloaded filename.

Available Variables

Element Selectors

Element Selectors allow you to specify CSS selectors for important elements on your Shopify storefront. These selectors help the app identify where to display the file upload field and locate the product form, Add to Cart button, and Checkout button.

Use this setting when the app needs to target specific storefront elements, particularly when working with custom themes or layouts.

Understanding CSS Selectors

A CSS selector identifies an HTML element on your storefront.

File Storage

The File Storage settings let you choose where customer-uploaded files and images are stored. CI Upload – Files & Images supports Shopify File Storage and Dropbox.

Shopify File Storage

Select Shopify File Storage to use Shopify's file storage for customer uploads.

Dropbox Storage

Select Dropbox if you want to connect your Dropbox account for file storage.

Pricing

The Pricing settings let you control how upload charges are displayed on your Shopify product pages. You can choose whether upload charges update the displayed product price, show a pricing summary, and customize the appearance of pricing information.

Price Display

The Price Display section controls how upload charges and pricing information appear on the storefront.

Update Product Price

Enable this option to add upload charges to the product price displayed on the product page as customers upload files.

• Enabled: The displayed product price is updated to include upload charges.
• Disabled: Upload charges are not added to the displayed product price through this setting.

Show Pricing Summary

Enter the text displayed before the amount in the pricing summary.

Example: Your uploads will add an additional charge of

Pricing Summary Mode

Choose which amount the pricing summary displays. Two options are available:

• Upload Charges Only: Displays only the additional charges associated with uploaded files.
• Product Price + Upload Charges: Displays the product price combined with the additional upload charges.

Pricing Appearance

Use these settings to customize the appearance of upload prices and the pricing summary box on your storefront.

Upload Field Price

Customize the text displayed for the upload price.

Pricing Summary Box

Customize the design and typography of the pricing summary box.

Box Styling

Text Styling

Amount Styling

Error Messages

The Error Messages settings let you customize the messages customers see when a file upload fails validation or an unexpected error occurs. You can tailor these messages to make errors easier to understand and help customers correct the problem.

File Validation Errors

These messages appear when an uploaded file or required field does not meet the configured requirements.

Required File Message

Displayed when the upload field is required but the customer has not selected a file.

Required Text Field Message

Displayed when a required text field is left empty.

File Size Limit Message

Displayed when a selected file exceeds the maximum allowed file size.

Available placeholder: {names}, {max}

• {names} — The name of the file that exceeds the size limit.
• {max} — The configured maximum file size.

Invalid File Type Message

Displayed when a customer selects a file type that is not allowed.

Available placeholder: {names}

• {names} — The name or names of the files with unsupported file types.

Maximum File Count Message

Displayed when a customer attempts to upload more files than the configured maximum.

Available placeholder: {max}

• {max} — The maximum number of files allowed.

Minimum File Count Message

Displayed when the customer uploads fewer files than the configured minimum.

Available placeholder: {min}

• {min} — The minimum number of files required.

Image Resolution Limit Message

Displayed when an image exceeds Shopify's 25-megapixel limit.

Available placeholder: {name}, {w}, {h}

• {name} — The name of the image.
• {w} — The image width.
• {h} — The image height.

Image Dimension Restriction Message

Displayed when an image does not meet the configured minimum or maximum width or height requirements.

Available placeholder: {name}, {w}, {h}, {requirement}

• {name} — The name of the image.
• {w} — The image width.
• {h} — The image height.
• {requirement} — A description of the required image dimensions, such as exactly 200px wide and 300px tall.

Upload Process Errors

These messages appear when a file upload fails or an unexpected error occurs during the upload process.

Upload Failed Message

Displayed when one or more files fail to upload.

Available placeholder: {names}

• {names} — The name or names of the files that failed to upload.

General Upload Error Message

Displayed when an unexpected error occurs during file upload.

Use this message to inform customers that the upload could not be completed and suggest that they try again.

Uploaded Files

View all files uploaded by your customers from here.

• Copy the file link or download files directly from here.
• Delete files you no longer need from here.

Applied on Frontend

Product Page

You can see the uploaded files preview in product page.

Mini Cart

You can see the uploaded files preview in the mini cart.

Shopping Cart

You can see the uploaded files preview in shopping cart before place the order.

Order Dashboard

Support

If this documentation doesn't answer your questions, please feel free to email us at info@cynoinfotech.com

Our support team operates in the GMT +5:30 time zone and responds to all inquiries within 12-24 hours on weekdays. In rare cases, the response time may extend to 48 hours, especially during the holidays, which may take longer..

Please don't forget to rate our app 5 stars ( ) on the App Store if you are satisfied with our app and customer support! Your feedback is greatly appreciated and helps us improve our services. Thank you!

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.2.2 Latest (30 September, 2026)

• New
  • Upload pricing: charge customers for their uploads, added to the product's price in the cart. Choose Flat Rate, Per File or File Count Range pricing, charged per unit or once per cart line
  • Set different upload prices for different products with Uploader Rules
  • Pricing settings: show the upload charge in the product price or in a pricing summary box, and style how prices look

Version 1.2.1 (25 September, 2026)

• New
  • Button upload style: show a compact upload button instead of the drag-and-drop area, with its own text, color, size, width, alignment and border settings
  • Icon library: choose from 20 upload icons and set the icon's size and color
  • Minimum file count: require customers to upload at least a set number of files, with a customizable error message
  • Help text for the upload field
  
  Improved
  • Style field labels and help text with custom color, font size and font weight

Version 1.2.0 (17 September, 2026)

• New
  • Image Cropping: Customers can crop images before uploading, using free crop, circle crop, or merchant-defined aspect ratios. Crop ratios can also be set per variant
  • Upload field now works in the Featured Product and Quick View theme blocks
  
  Improved
  • Refreshed admin interface built on Shopify's latest Polaris design system
  
  Fixed
  • Minor bug fixes and stability improvements

Version 1.1.3 (3 August, 2026)

• New
  • Download uploaded files in bulk as a single ZIP archive
  • Export uploaded file data to CSV
  
  Improved
  • Uploaded Files Page: search, filter by file status and order status, sort, and remove files
  
  Fixed
  • Corrected typos in the admin and storefront text
  • Minor bug fixes and stability improvements

Version 1.1.2 (7 July, 2026)

• New
  • Restrict Image Dimensions: set minimum and maximum width and height for uploaded images, globally or per variant
  • Icon Position setting to control where the upload icon appears
  
  Improved
  • Note field now supports placeholder text and help text
  
  Fixed
  • Downloaded files now keep their original file name

Version 1.1.1 (12 March, 2026)

• New
  • Customizable error messages shown to customers during upload and validation, including a message for images that exceed Shopify's image size limit
  
  Improved
  • More options for customizing the dropzone's appearance

Version 1.1.0 (28 January, 2026)

• New
  • Uploader Rules: create multiple upload configurations and apply them to specific products or collections, with priority ordering
  • Dropbox Storage: save customer uploads to your own Dropbox account instead of Shopify Files
  
  Fixed
  • Minor bug fixes and stability improvements

Version 1.0.2 (1 November, 2025)

• New
  • File Rename on Download: automatically rename files using a pattern such as product name, variant, order number, quantity, and date

Version 1.0.1 (27 August, 2025)

• New
  • Note Field: let customers add a text note alongside their uploaded files
  
  Improved
  • Uploaded files in the cart show as an image thumbnail or a clickable file name instead of a raw link

Version 1.0.0 (6 May, 2025)

Initial Release