File Upload Feature in Product Options

Overview

Within Bold Product Options, you are able to add an option on your product page that will allow your customers to upload an image with their order. Whether you are selling custom products, or just want to print a logo on a T-Shirt - offer the ability to upload your customers images directly to a product when they order it.

 Example

Screen_Shot_2020-12-22_at_12.43.24_PM.png
This will look different depending on which browser your customers are viewing your store on, and any customizations that appear on your product page.


 

How it Works

Creating an option for File Upload is easy! When your customers purchase the item with an uploaded file attached, this will appear as a clickable attachment in the order section in Shopify. All images or files will reside on Shopify's servers, and a link is automatically generated to the file location. In some situations, the image preview will be displayed. Selecting the link will allow the image to be viewed in the cart and the email confirmations.

To create a File Upload option, please follow these steps:

  1. From within the Bold Product Options app, select Options.
  2. Select an existing option set, or select Create Option Set.
  3. Create an Option Set Name, and Select the products you'd like the File Upload to appear on.
  4. Select Create New Option.
  5. Enter an Option name for Public Display (For example, "Upload an Image!")
  6. Select the File Upload type.
  7. Select Save.
  8. Select Save Option Set at the bottom of the page.

When this is saved, a File Upload option should appear on your product page after a minute or so. Please refresh the page to help speed this up.

 


 

Functionality

For more information on how Product Options will work on your store, as well as the functionality, please see the following information:

 Caution

This article only applies to Product Options 2.0. It requires technical knowledge and prior experience with JavaScript and Ajax. If you are not comfortable with this, please contact our support team for assistance.

Overview

Ajax themes do not work well with file uploads. Product Options 2.0 has a customization that allows you to have both file uploads and an Ajax cart.

Please follow these steps to add this functionality:

  1. From Shopify's admin, select Online Store, then ActionsEdit code.
  2. Under "Assets", select theme.js.liquid.

    Note: If this file doesn’t exist, your main JavaScript file may be named: app.js, ajaxify.js, the same name as your theme, or something similar.

    Select theme.js

  3. Search for addItemFromForm, it will look something like this:

    ShopifyAPI.addItemFromForm(evt.target, itemAddedCallback, itemErrorCallback);

    Find addItemFromForm

  4. Copy and paste the following code after success: function(line_item){:
    // Bold:POv2
      if(typeof window.BOLD !== 'undefined'
         && typeof window.BOLD.common !== 'undefined'
         && typeof window.BOLD.common.cartDoctor !== 'undefined') {
        // NOTE: "cart" should be the variable containing the cart json data
        line_item = window.BOLD.common.cartDoctor.fixItem(line_item);
      }            
    // Bold:POv2

    Paste the code after

  5. Search for jQuery.ajax(params);.

    Search for the code

  6. Copy and paste the following code over top of this code:
    // Bold:POv2 - Use our add-to-cart functionality to enable file uploads with AJAX.
    if(typeof(BOLD)==='object' && BOLD.helpers && typeof(BOLD.helpers.addItemFromForm) === 'function') {
      BOLD.helpers.addItemFromForm(form, params.success, params.error, {endpoint:'/cart/add.js'});    
    } else {
      jQuery.ajax(params);
    }
    // Bold:POv2

    Screenshot shows code pasted in place

  7. Select Save.

Google recently introduced a new file format for their image uploads known as "WebPack". These image files are smaller than jpegs, while maintaining a better image quality. When downloading these files through Google Chrome, they will come through with the file extension ".webp".

This may be an issue when you or your customers are attempting to view files they've uploaded to a Product Options item. Currently, these files cannot be opened with most native image viewers (ie. Preview for Mac and File Viewer for Windows). 

However, they are able to opened and previewed through Chrome without issue.

Note: Visit .WEBP File Extension (links to FileInfo) for more information on 3rd-party programs that can preview this file type.

Additionally, these files can be downloaded through another web browser as standard .jpeg files and opened through any image viewer.

Visit Firefox, Opera, or Safari for more information on how to download these web browsers.

 


 

FAQs

Below is a list of frequently asked questions regarding the File Upload feature:

There is no way to restrict the type of files that are uploaded. Files are uploaded to Shopify in a format they accept. While we don't know the exact limitations, a file size larger than 10 MB does not appear to be accepted.

At this time, there is no way to limit the resolution for files being uploaded.

If your theme uses AJAX, file upload may not be working properly; there is a custom fix for this. Visit Use File Upload with an Ajax Theme for instructions.

We do not know the exact limits of file uploads. From our tests and user feedback, the maximum file size you can upload to Shopify appears to be 10MB per upload. The maximum image dimensions that can be uploaded is 2048 x 2048 pixels.

There are a few reasons why you may be seeing the C:/FakePath error on your store. Here are a few reasons as to why this error may be appearing:

 

AJAX Themes

Some popular themes on Shopify have built-in AJAX scripts. These scripts will have to be integrated with our Bold Options scripts in order to work properly. The best way to complete this integration is with an Automatic install, or to have our expert install team review your theme.
For non-AJAX themes, please contact our Merchant Success Team for further assistance.

 

Shopify Dynamic Checkout Buttons

Dynamic checkout buttons (or Buy Now buttons that appear on the product pages) are currently incompatible with Bold Product Options. This is because it skips the necessary "add to cart" functionality required to bring options to your stores checkout.

If this button exists and is enabled in the Product Page, it may cause cart items added by this button to output the C:/FakePath result. 

To remove this button from appearing on your store, please follow these steps:

  1. From the Shopify Admin, navigate to Online Store.
  2. Select Customize on your theme.
  3. Navigate to the Product Pages section.
  4. Disable the option for "Show dynamic checkout button".

Facebook Pixel

At this time, Facebook Pixel is incompatible with FormData. This means that the File Upload information will be unable to bring the information to the cart properly, and may result in showing the C:/FakePath error.

To test if Facebook Pixel is causing this error on your store, there is a Facebook Pixel Helper Chrome extension that may help. If this extension confirms that the Facebook Pixel is firing on this page, then it would be best to contact Merchant Success into reverting the file upload integration.

Was this article helpful?
0 out of 0 found this helpful