Diagnosing issues with add-to-cart functionality

Some Shopify Checkout merchants may be using themes that are incompatible with Recharge. Specifically, they may encounter an issue with adding Recharge subscriptions to their cart, because of the method their theme uses for performing this action.

This means that when a customer adds an item to cart, it will be missing Recharge subscription info and/or discounts associated with that subscription option.

Description of issue

Shopify themes use Ajax to add items to the cart in real time. This means code sends items to the cart without reloading the page, or sending the customer to another page.

📘

What is Ajax?

From Wikipedia:
Short for "Asynchronous JavaScript and XML"... with Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

This functionality works without issue on many themes i.e. Debut.

There are two main scenarios where this issue occurs:
A. The theme was developed differently from a Shopify checkout supported themes.
B. The theme is a Shopify checkout supported theme, but a developer has modified it.

In both scenarios, the JavaScript that adds an item to the cart doesn't account for the Recharge-specific* subscription information that is present on the page when a customer selects the subscription option.

The result is the item is sent to cart without any subscription information. You may see the item in the cart, but not as a subscription item and/or without some subscription information.

Troubleshooting

1. Navigate to a product page
2. Right click and select inspect on your browser
3. Click the Network tab
4. Send an item to cart with a subscription selected, and click on add.js in the Name column.
5. If this issue is present, the properties item will be empty.

Example SCI-supported theme:

Example unsupported theme:

Next steps