We Build Shopify Apps

Montreal-based Shopify experts cooking some Shopify apps.

Upsell products in the ajax drawer cart on Shopify

Note: this requires some coding skills and might not work on all themes as is. Some theme-dependant tweaks might be needed. This customization is not included in the monthly fee. We can implement it for you for a one-time fee, if our workload permits it.

To add one or more products as upsell in your ajax cart (drawer cart), you first need the Ultimate Upsell app.

Edit the theme.js.liquid file.

Locate the end of the Drawer.prototype.open function

if(UltimateUpsell && typeof UltimateUpsell.run === 'function'){

Another tweak, INSTEAD OF THE CODE ADDED ABOVE, would be to replace this code by the following (this is an alternative, don't use both code):

const runUU = function(count = 0) {
  if (window.UltimateUpsell) {
  } else {
    if (count < 10) {
      setTimeout(function() {
        runUU(count + 1);
      }, 300);


Locate the manual upsell snippet of code

The snippet can be found inside the See Advanced Options section.

Note: you can tick the box to always check Cart rules before displaying (or not) the upsell. For example, this is useful if you want to display an upsell only if product A is added to cart.

Implement it inside the Ajax cart theme file.

The ajax cart theme file can be named differently. It's common to ajax-cart.liquid or ajax-cart-template.liquid. Some themes also have the ajax cart code inside the theme.liquid file.

Test it

Once you completed the tasks above, you should see the upsell displayed in your ajax drawer cart. For example:

Upsell in Cart drawer - ajax cart

Redirect to cart when the upsell is added to cart

When customers click to Add to cart the upsold product(s), by default it "Stays on the same page", meaning the page will refresh and the ajax drawer cart will close. Making it refreshing the ajax cart without refreshing the page and without closing the ajax cart drawer involves quite some work that is very different for each theme. If you want this behavior and you are a developer, you'll probably succeed tweaking the code for it. Otherwise, don't try this at home. Instead, we suggest you change the default Add to Cart behavior inside the SETTINGS section of the app, at the bottom, to "Redirect to the cart page". This will redirect to the cart page once the upsold product is added to cart.

Tweak CSS (optional)

To fine-tune the font size, font color, margins, etc. You can overwrite some CSS classes. Inspect element and find the upsell CSS classes. Then, when you know what CSS classes to edit, Go to your theme.scss liquid file and write them down.

Here's an example:

Final result

Here's how it looks in the ajax drawer cart on Desktop.

### Mobile result If your ajax-cart template is the same on mobile, it should work there as well. But if the code is different for mobile devices in your theme files, then you will need to apply some mobile specific code your side as well to make the upsell display on mobile devices. In the example above, the code of the ajax cart was the same on desktop and mobile.

Try the Ultimate Upsell app today.

Get In Touch

Tabarnapp's mission is to help you get the most of each visit on your Shopify store.

E: support@tabarnapp.com