We Build Shopify Apps

Montreal-based Shopify experts cooking some Shopify apps.

Shopify Post Image

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'){  
    UltimateUpsell.run({});
}


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


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