Magento Artwork / Image Upload Extension for Custom Products

Do you sell customizable products on your Magento store? Magento’s built-in custom fields allow merchants to add an image upload field to the product, but the artwork must be uploaded before the product is purchased. What if you would like to give the customer the ability to add artwork after the product is purchased? What if you […]

By Elliot Toman

Do you sell customizable products on your Magento store? Magento’s built-in custom fields allow merchants to add an image upload field to the product, but the artwork must be uploaded before the product is purchased. What if you would like to give the customer the ability to add artwork after the product is purchased? What if you would like them to be able to revise their upload prior to production? A client recently came to Shero with a request for this kind of functionality. We were unable to find an existing Magento extension that met the requirements, so we decided to develop one ourselves.

Here’s how it works:

A custom attribute allows the administrator to flag any given product as customizable. For each product of this kind in an order, one or more artwork upload fields are presented to the customer after checkout is complete. For large files, the module features a nice progress bar, and a confirmation message indicates that the upload is complete. The customer does not have to upload their artwork from the order confirmation page, however; he or she can also upload it later from the Orders section of their user dashboard. Once the artwork is uploaded, both the user and the site administrator receive a confirmation email with a link to the uploaded artwork. During a set window of time, which is determined by the administrator, the artwork upload can be revised from the user dashboard. After that limit is reached, artwork uploads are disabled for that product so that production can safely begin.

The email template that notifies the site administrator of a new artwork upload contains the following information:

  • Order ID
  • Customer Name
  • Customer Email
  • Product Name
  • Product SKU
  • Quantity Ordered
  • Hyperlink to Uploaded Artwork

The confirmation email template that is sent to the customer contains:

  • Order ID
  • Customer Name
  • Product Name
  • Product SKU
  • Hyperlink to Uploaded Artwork
    Hyperlink to the Customer Account Login

Global Configurations

The administrator is able to configure the module’s high-level properties from Magento’s System » Configuration menu.  Here’s how it looks:

Enabled → Toggles the extension to Enabled or Disabled.

Accepted Filetypes → Allows the site administrator to choose what kind of file types to allow for artwork files. For example, JPEG, PNG, PDF, etc.

File Size Allowed → The maximum allowed file size for artwork uploads.

Time allowed for revised uploads → This option helps to ensure that customers cannot artwork upload to a product that has already begun production. For example, if the field is set to “60,” the customer has 60 minutes to re-upload artwork to a product from their user dashboard. When that time has expired, artwork upload is no longer possible for that product.

Revised upload timeout message → This is the message that will show when the artwork upload time limit for the selected product has expired.

This extension is compatible with Magento 1.x EE and CE.  It also contains special features for a multisite store.

Store Configurations

In multisite stores, artwork upload notifications may need to be sent to different email addresses depending on the store. The store name and notification email sender address may also need to be different. By toggling store views within the module configuration, the administrator is able to set these variables on a store-by-store basis:

Sender Name → This is the email sender name, or the merchant name. When the customer uploads artwork, the confirmation email that he or she receives will be sent “from” this name.

Sender Email → This is the sender email address. When the customer uploads artwork, the confirmation email that he or she receives will be sent “from” this address.

Send to Email → This is the email address that receives notifications of new artwork uploads for the selected store.

For example, the artwork upload notifications might be sent to “[email protected]” while email replies are directed to “[email protected].”

Product Configurations

Options for individual customizable products are handled at the product level in Catalog » Product.

Enable Artwork Upload→ This setting toggles the product between customizable and noncustomizable.  Customizations may be applied to any type of product.

Artwork Field Label → This is the label applied to artwork upload fields.  For example, if the product is a sheet of stickers, the label might be “Sticker.”

Number of Artwork Upload Fields → This is the number of artwork upload fields applied to the product.  For example, if the sticker sheet has 3 stickers, this field would contain “3” and the fields would be labeled “Sticker 1, Sticker 2, Sticker 3.”

Customer Experience

Here is an example of what the customer sees after checking out an order containing a customizable product with three artwork upload fields.

The artwork upload fields appear on the order confirmation page. Each field includes a progress bar.  The user can easily select artwork from his or her computer for some or all of the available artwork upload fields at this point. However, if the artwork is not ready, the user can upload artwork from his or her account dashboard instead by navigating to My orders and selecting the order:

This is the same artwork file upload like in success page. After uploading an artwork image it will look like this:

After the artwork has been uploaded, a confirmation message is displayed beneath the progress bar along with a hyperlink to the uploaded file. The customer will also receive a confirmation via email.

As soon as the artwork is uploaded to a field, the countdown begins on that field’s time limit. Once the time limit is reached, the customer will see this message (as defined in the global configuration) instead:

This module was very challenging for me when I started working on it. The first and most important step was to analyze the requirements of this module and to design it with the users in mind. The backend code for this module uses Magento’s best practices, and like all Shero development, it has gone through a meticulous, multistep code review process.  While this module was designed for a specific client, it’s only a few short steps away from being converted for general use.

At Shero, our priority is to help clients succeed with smart solutions and personal service. When we improve and simplify the shopping experience, the result is happier customers and better business. Flexible design, optimized code, and careful quality control make this module a powerful solution for merchants that want to give their customers an improved customization experience. If you require such functionality for your Magento store, feel free to get in touch with us.

Customer Success Manager