Common Problems with Ajax Add-to-cart Actions
Ajax -enabled themes provide a great shopping experience for customers, but using Ajax add-to-cart methods can commonly cause issues with Shopify line item properties and apps that add them (as ours does).
Does my theme use Ajax?
First, try adding a product to your cart. Is there a cool effect that does this without the page refreshing / reloading? This means that your theme is using an Ajax add-to-cart method, and it may not properly support line-item properties.
Ajax Issues with Line Item Properties
Issue: When products are added to the cart, none of the options are shown on the cart page / checkout.
Description: The Ajax add-to-cart action doesn't refresh the page when items are added to the cart. With some themes, the Ajax add-to-cart method won't pull in the line item properties associated with the product (which is typically done with a page refresh). This means that when the product is added to the cart, the Product Customizer options are not added along with the item (which is why you don't see them displayed).
- The theme can pull the line item properties in during the Ajax add-to-cart action, so your theme developer needs to fix the Ajax add to cart action to include line item properties with the product. Please send the theme developer Shopify's documentation on using the Ajax API so they can patch this issue.
- If there's an option in your theme to disable the Add-to-Cart Ajax, we recommend doing so, as this should resolve the issue and properly add the line items along with the product. You can typically find this by going to Online Store > Themes > Customize, and looking at the Product or Cart settings. There's often a setting to disable Ajax add to cart.
- If there's no setting, your theme developer might be able to manually disable this for you.
Ajax Issues with File Uploads
Issue: Options are included in the cart and orders except file upload options.
Description: Unfortunately image uploads will never work with an Ajax add-to-cart method. In order to upload the file, all major browsers (as well as Shopify's system for line item properties), require the page to refresh to pull in the file. Without this page refresh, there's nothing that we can do from our end to add the file upload to your orders. Your theme must allow for page refreshes to account for this.
- If there's an option in your theme to disable the Add-to-Cart Ajax, we recommend doing so, as this should resolve the issue and properly add the file upload when the product is added to the cart. You can typically find this by going to Online Store > Themes > Customize, and looking at the Product or Cart settings. There's often a setting to disable Ajax add to cart.
- If your theme can't disable this, then your theme should properly recognize when a file upload is added to the form, or your theme author should disable this manually for you. Many themes check for an upload field and refresh the page if it's included, but some themes are not built with extending your store in mind. If your theme does not refresh the page for file uploads, please reach out to your theme developer to ask them to:
- Add support for disabling the Ajax add to cart
- Force a page refresh instead of using Ajax if a file upload is present on the page
I'm Confused -- Can You Help?
Of course! Dealing with issues like this can be difficult when you're unfamiliar with the developer lingo. We're happy to be a part of this conversation and explaining the issue to the theme author.
Just get in touch with us and we'll be happy to be a part of the conversation to help your theme appropriately handle line item properties with Ajax actions.