This article will talk through some troubleshooting steps if your native cart continues to be active while you have Smart Cart active.
Note: Previous versions of this article used Rebuy.libraries.$ to show the smart cart. Rebuy.libraries.$ will soon be deprecated, and your solution will need to be updated. Instructions on how to update this can be found below.
Rebuy's Smart Cart may load more slowly than Shopify's main theme files, causing the default cart to appear temporarily before the Smart Cart fully initializes. Improving the load speed of third-party applications can reduce this delay. Refer to the Load Rebuy Faster Guide for detailed steps.
Troubleshooting Smart Cart / Native Cart
In this video we will talk through some ways to troubleshoot issues with your native cart continuing to be active even when you have Smart Cart enabled and native cart disabled. One common issue occurs when the native cart remains visible due to conflicts in Shopify's settings or leftover scripts, which can impede proper Smart Cart operation. You may need to disable the native cart or remove conflicting elements to ensure smooth integration. See additional guidance below.
If you're still using the legacy smart cart, you can follow the video guide at the bottom of this article. However, we recommend upgrading to the new Smart Carts to ensure full support and access to the latest functionality updates.
What Causes Smart Cart Issues?
Several factors can contribute to Smart Cart functionality issues:
Native Cart Conflicts: If the default theme's cart settings are still active, they may interfere with the new Smart Cart experience. Ensure you disable the native cart via the theme's settings. See this guide for instructions: Disable Native Cart.
Outdated Code or Scripts: If your Shopify theme includes manual script tags, they can conflict with the Rebuy Connector. Removing these tags ensures seamless functionality.
Loading Time Delays: Rebuy's Smart Cart loads after Shopify's main theme files and may momentarily show the old cart during its initialization. This delay can occur when:
The cart icon is clicked before Rebuy has fully loaded.
There are speed issues loading third-party applications. You can improve load speed by following these instructions: Load Rebuy Faster.
Hiding the Shopify Native Cart
Replacing your cart drawer with Rebuy.
Most themes have a built-in cart drawer (slider cart, cart flyout) that slides out after a customer adds a product to the cart or clicks the cart icon. These generally offer a quicker way for the customer to checkout by skipping the cart page entirely, but not all drawers skip the cart page or have lots of bells and whistles!
Rebuy Developer Helpers
Since most cart drawers have their content (the cart) and an overlay (which darkens the rest of the screen and generally makes the screen unscrollable), these will need to be removed. When the Smart Cart is enabled in Rebuy and is either in live mode or being previewed, we add a class ".smart-cart--enabled" to the body tag, allowing you to target and apply CSS changes only when the class exists, as well as several smart cart event listeners.
Implementation Example
All of this can be done from the Smart Cart settings page in just a few steps!
Smart Cart Doesn't Open When Clicking Cart Icon
Open up the developer tools (right-click, inspect element), and inspect the element to find the element for the cart icon. Use a CSS selector of your choice to target the element, and insert it into the code here:
document.querySelector('INSERT-SELECTOR-HERE').addEventListener('click', () => {
Rebuy.SmartCart.show();
});
Paste that into the "Ready" callback in the Smart Cart Advanced settings (bottom of the page). In our example here, the selector is .header__icon--cart
Make Shopify Native Cart Close When Smart Cart Closes
Since we are using CSS to only hide the native cart, it is technically still open when the smart cart opens. For this reason, we need to be sure that the native cart properly closes when we close Smart Cart. If the native cart is not properly closed, users may not be able to scroll properly when the Smart Cart is closed.
Open up the developer tools (right-click, inspect element), and find the element for the close icon on the native cart. Use the selector and add that to this code:
document.querySelector('INSERT-SELECTOR-HERE').click();
Add this to the "hide" callback in the Smart Cart Advanced settings. In our example here, the selector is .drawer__close
Hide the Native Cart Drawer
Open up the developer tools (right-click, inspect element), and find the parent element that contains the entire cart. Then, in the "Custom CSS" section of the Smart Cart settings, add the selector and use this code. You will need to add the specific selector that you find for your store. You will replace "INSERT-SELECTOR-HERE" with the selector of your store.
.smart-cart--enabled INSERT-SELECTOR-HERE { display: none; }
In this example, the selector used is #CartDrawer
Note: Be sure to include a space between the .smart-cart--enabled and your selector.
With that, the Smart Cart should open and close as expected, and the native cart behind it is hidden!
Note: If you've used this example below, you will need to update the use of Rebuy.libraries.$ since it will soon be deprecated.
If the below solution is working for you, you can easily swap this code:
Rebuy.libraries.$('.cart-icon').click(function(){
// show Smart Cart once the icon is clicked
Rebuy.SmartCart.show();
});
for this:
document.querySelector('.cart-icon').addEventListener('click', () => {
// show Smart Cart once the icon is clicked
Rebuy.SmartCart.show();
});
This will remove the usage of jQuery and use vanilla JavaScript instead.
Legacy Smart Cart Troubleshooting
To learn more about our Rebuy JS Callbacks, check out this help doc.
Tips for Optimizing the Smart Cart
Use the Load Rebuy Faster Guide to address loading speed challenges.
Regularly audit your theme for outdated custom scripts that might interfere with the Smart Cart.
Ensure the Rebuy Connector is always enabled in Shopify to prevent functionality issues.