Common Recharge Cart issues

Some themes and settings may create conflicts with the Recharge Cart and Recharge Cart drawer overlay. This guide lists common issues that arise and provides additional troubleshooting steps.

The Recharge Cart is hidden

If the Recharge Cart is displayed behind other elements from your store, this is typically caused by a Z-index mismatch.

Steps to resolve:

1. In the flow, open the Cart node and click Customize cart. 
2. In the lower right select Edit advanced settings. 
3. In the cart's advanced settings, find the Z-index configuration.
4. Ensure the cart has a higher Z-index value than the element overlaying it.
5. Apply the changes.
6. Save the cart.

Add to cart goes to /cart

When a customer clicks Add to cart, they are taken straight to the /cart page rather than the Recharge Cart.

Steps to resolve:

1. In the flow, open the Cart node and click Customize cart. 
2. In the lower right select Edit advanced settings. 

3. In the cart's advanced settings, find the Override add to cart selector box.

   

4. Check the Override add to cart selector box.
5. Choose How you would like to override the add to cart selector. Recharge recommends Let Recharge automatically update all add-to-cart selectors.
6. Apply the changes.
7. Save the cart.

Add to cart opens another cart or two carts 

When a customer clicks Add to cart, the original cart is opened instead of Recharge's or both carts are opened.

Steps to resolve:

1. In the flow, open the Cart node and click Customize cart. 
2. In the lower right select Edit advanced settings. 
3. In the cart's advanced settings, ensure the Override add to cart selector is checked and choose Manually enter add-to-cart selectors.

4. Find the Add to cart selector field.

   

5. Insert the correct selector in this field. This selector can be retrieved by:

   • Inspecting the "Add to cart" element. 

     

   • Specifying the following element in the field:

     

6. Apply the changes.
7. Save the cart.

The cart icon doesn't update

While changing the quantities of products in the cart, the number of cart items displayed doesn't automatically change unless the page is refreshed.

Steps to resolve:

1. In the flow, open the Cart node and click Customize cart. 
2. In the lower right select Edit advanced settings. 

3. In the cart's advanced settings, ensure the Override cart count selector is selected and then find the Cart count selector field.

   

4. Insert the correct selector in this field. This selector can be retrieved by:

   • Inspecting the Cart icon.

     

   • Specifying the following cart count element in the field.

     

5. Save the changes.
6. Save the cart. 

Using Shopify's native cart

Enabling the Recharge Cart overrides Shopify's native cart. If issues still arise with Recharge Cart, we recommend disabling Shopify's native cart to make our override smoother.

To disable your native Shopify theme cart:

1. Access the Shopify admin.
2. Navigate to Online Store.
3. Choose the theme you want to have the cart removed from.
4. Click Customize.
5. Access the theme settings.
   • On the left-hand side of the customization screen you'll see a column with various customization options.
   • Look for the Theme Settings option in this column and click on it.
6. Navigate to the cart settings
   • Within the "Theme Settings" section, locate the option labeled Cart, Cart Drawer, or Cart Page.
   • Click on the Cart option to access the settings related to your e-commerce store's shopping cart function.
7. Select cart type.
   • Under the Cart settings, you should find an option to set the Cart Type. Choose the Page option.
8. Saves changes.  

The Recharge Cart is being overridden by another cart 

If your store's Cart button (typically in the top-right corner) still opens the theme's build-in cart instead of the Recharge Cart, you can remap it using the Override cart trigger selector.

Steps to resolve:

1. In the flow, open the Cart node and click Customize cart. 
2. In the lower right select Edit advanced settings. 

3. In the cart's Advanced Settings, check Override cart trigger selector. 

   

4. Insert the correct selector. This can be any valid CSS selectors such as ID's, classes, or data attributes.
5. Save changes.

This ensures the cart button triggers the Recharge Cart rather than the native theme cart.