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:
An example of the slide out cart is this:
Before proceeding, make sure you understand some HTML first. 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.
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.