A popular request we have is to add our Upsell box to AJAX side carts. The Upsell box is automatically added to default Shopify themes. Here is a list to name a few:
Brooklyn | Boundless | Debut |
Express | Minimal | Narrative |
Simple | Supply | Venture |
Any theme that has a standard ajax cart setup will automatically be compatible with the Upsell box showing in the AJAX side cart.
Note: All user activities on the Ajax Cart are attributed to "Cart" and not the host page.
Read on to learn more on how to add the Upsell box if your theme does not have the standard ajax cart.
An example of the slide-out cart is this:
For themes that don't automatically support it, adding the following 3 lines of JavaScript inside the box designer could make the Upsell box appear on the side cart. Please kindly note that not all themes are supported by our code due to certain restrictions and thus it would not be able to render the Upsell box in those themes' AJAX containers.
Before proceeding, make sure you understand some HTML first and you will also need the LimeSpot Personalizer app installed on your Shopify store. Here are the instructions on how to render the Upsell box in the side cart:
Navigate to your LimeSpot Admin Panel > Conversion > Website Personalization > Designer.
Make sure the Upsell box is enabled on the Cart page.
Click on the "<>" icon.
Paste this code into the JavaScript editor and go back to the box designer preview:
LimeSpot.Shopify.AjaxCartContainerQuerySelector = '';
LimeSpot.Shopify.AjaxCartInnerQuerySelector = '';
LimeSpot.Shopify.AjaxCartButtonQuerySelector = '';
a. Open your Developer Tools by either pressing F12 or right-click on the desired section and click Inspect Element.
b. Find the HTML element that covers the entire cart drawer. This is usually an ID. Paste this value into the first line:
LimeSpot.Shopify.AjaxCartContainerQuerySelector = '#CartDrawer';
c. Figure out where you want the box to appear on the side cart. This is usually above the cart items. Find a unique placement sibling and paste this value into the second line:
LimeSpot.Shopify.AjaxCartInnerQuerySelector = '#CartContainer';
d. The last element is the button that toggles the cart drawer. It allows the LimeSpot box to appear in cart drawers whenever it is triggered. Now paste this value into the third line. This is typically an HTML class.
LimeSpot.Shopify.AjaxCartButtonQuerySelector = '.cart-btn.js-drawer-open-right';
5. Now "Save" your changes and click on the cart icon in your theme and the Upsell box should appear. If everything looks good, remember to Publish this live.
