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 such as:

  • Brooklyn
  • Boundless
  • Debut
  • Express
  • Minimal
  • Narrative
  • Simple
  • Supply
  • Venture

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. Here are the instructions on how to render the Upsell box in the side cart:

  1. Navigate to your LimeSpot Admin Panel > Conversion > Website Personalization > Customize.
  2. Click on Global Settings > Code > Edit Code > JavaScript.
  3. 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'; 

4. 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.

Did this answer your question?