Overview

With SC Product Options, you can create a file upload option so your customers can upload an image 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.

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.

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 SC 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.

   

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.

File Upload with an AJAX Cart

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 Actions > Edit 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.

   

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

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

   

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

   

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

   

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

   

7. Select Save.

File Uploads Downloading as .webp Files

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

Can I limit the type of files uploaded?

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.

I can't see my upload. What Happened?

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.

What is the maximum file upload size?

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.

Why am I seeing a C:/FakePath error?

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 SC 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 SC 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.