File Upload Feature in Product Options

With Bold Product Options, you can create a file upload option so your customers can upload an image with to be included with their order.

Whether you're selling custom products, or just want to print a t-shirt logo - offer the ability to upload images to your customers.

 Example

Screen_Shot_2020-12-22_at_12.43.24_PM.png
This will look different depending on the web browser and any customizations you may have.

 


 

How it Works

When your customers purchase an item with an uploaded file, the file will appear as a clickable attachment within the order section of your Shopify Admin. All images and files will be stored on Shopify's servers, and a link to the file's location will automatically be generated.

 Pro-Tip

If you would like to give your customers the option to upload multiple files on a single product page, please follow steps 4 through 7 as many times as needed.

When uploaded, a preview of the uploaded image will be displayed. Clicking the link will display the image in both the cart and your confirmation emails.

  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.

    Note: If a newly created product is not appearing in the product selector, select Sync with Shopify at the top of the product selector.

    Select Sync with Shopify

  4. Select Create New Option.
  5. Enter an Option name for Public Display. (IE. 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, the file upload option will appear on your product page after a minute or so.

We recommend refreshing the page to help speed this process up.

 


 

Functionality

Please select an option below to view more information.

 Caution

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

Overview

AJAX themes do not work with Product Options' file uploads, but Product Options 2.0 has a customization that allows you to have both file uploads and an AJAX cart.

  1. From the Shopify 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 has since 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). 

They are, however, able to be opened and previewed through Google Chrome without issue.

Note: Please visit .webp File Extension for more information on 3rd-party programs that can preview this file type.

.webp files can be downloaded through a web browser as standard .jpeg files, and opened through any image viewer.

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

 


 

FAQs

There is no way to restrict the type or resolution of the files that your customers upload. Files are uploaded to Shopify in a format that Shopify accepts.

Your theme may be using AJAX.

Please visit File Upload for an AJAX Cart above for instructions on how to implement our fix for AJAX themes.

While we don't know the exact limitations, it seems that files are limited to a maximum size of 10MB per upload, while images are restricted to a maximum of 2048x2048 pixels in size.

There are a few reasons why you may be seeing C:/FakePath on your store. Please see below for more information.

 


 

AJAX Themes

Some popular Shopify themes 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 installation of Product Options' code, 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 (AKA buy now buttons) are not compatible with Bold Product Options.

Dynamic checkout buttons completely skip the necessary add to cart functionality required to bring Product Options to your store's checkout.

If dynamic checkout/buy now buttons are enabled on your product page(s), they will cause your customer's cart items to output the C:/FakePath error.

To remove these buttons from your store, please follow the steps below.k

  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 not compatible with FormData.

The file upload information will not be able 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 our Merchant Success team for further assistance.

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