How to Show Upsell’s and Cross-sell’s on Shopify Cart Without using an app.

How to Show Upsell’s and Cross-sell’s on Shopify Cart Without using an app.

miniscript
Shopify Partner
28 1 11

I am working in e-commerce sector as a developer from 6 years. I worked on hundreds of stores and notice one thing that upselling and cross-selling play important role to boost your conversion. Whether it’s Magento, Shopify or any other CMS these are very important for every store.

So In this article I will be explaining to you how to show UpSell or Cross-sell on Cart for Shopify store without any app with just a single file of liquid and JavaScript code. You don’t need to pay for any app now. It’s dead simple and you can create it on your own. This will also work with any Shopify theme.

Let’s start 

Caution

I am using the Cartjs.org JavaScript library to add products in the cart, it’s very powerful and fast which makes our life easier to work with cart events.
But you can use any library for this we just need to get product id and call the Add to cart.

Let’s create one snippet which we can use anywhere to show Cross-sell or Upsell. Let’s name it as upsell.liquid

  1. We’re creating one collection in shopify admin for upsell/cross-sell products. (upsell-products).
  2. Then we will fetch that specific collection by name with liquid code snippet as explained below.
  3. we need to include this snippet into cart.

 

{% comment %} Create liquid variable for collection {% endcomment %}
{% assign upsellCollection = 'upsell-products' %}
<div class="c-upsell js-upsell">
    {% comment %} Use Product ID as Data Attribute which we will use for Add to Cart Event {% endcomment %}
    {% for product in collections[upsellCollection].products %}
    <div class="c-upsell__product js-product" data-product-id="{{ product.id}}">
        <div class="c-upsell__productImage">
            {% comment %} Fetch Product Images{% endcomment %}
            {% for image in product.images %}
            <img class="c-upsell__innerImage" src="{{ image | img_url: '586x' }}" alt="Product Img" />
            {% endfor %}
        </div>
        {% comment %} Fetch Product title & Price {% endcomment %}
        <h2 class="c-upsell__productTitle">{{ product.title }} </h2>
        <p class="c-upsell__productPrice"> {{ product.price }}</p>
        {% comment %} Add to Cart Button {% endcomment %}
        <a href="#" class="c-upsell__atc js-atc">Add to Cart</a>
    </div>
    {% endfor %}
</div>
{% comment %} Now we're done with Liquid code and collection will be appeared on where we add it {% endcomment %}

 

Now we need to write some JavaScript for Add to Cart. We will be using cartjs.org (as mention above) to make this happen.

In JavaScript, we’re doing following events

  1. Fetching the product ID from [data-product-id] attribute.
  2. Pushing that to Array [upsellProductArr].
  3. Using Cartjs.org API to add product to the cart. You can read more about API’s here https://cartjs.org/pages/reference

 

function upsellProduct() {
	// Create an empty Array in which we'll be pushing our product ID 
	const upsellProductArr = [];
	//get the Product ID from Attribute
	const productID = document.querySelector('.js-product').getAttribute('data-product-id');
	// Now push this product ID to Array
	upsellProductArr.push(productID);
	// Console.log to check you're pushing correct ID into array
	console.log(upsellProductArr);
}
// Let's Find our ATC button
const button = document.querySelector('.js-atc');
	// Now Add click event use our Array to add to cart the Product 
button.addEventListener('click', event => {
	upsellProduct();
	// This is CartJS API - Attaching link for reference 
	CartJS.addItem(upsellProductArr[0], quantity = 1);
});
// Done

 

 

This feature is very helpful to improve the conversion and method itself is very easy. You can customize this as per you can requirement like adding a slider into products.

If you like this give me applaud and share it with your colleagues.

Made with Love. 

@miniscript 
Technical Lead at Anatta.

Replies 14 (14)

ChengRuiSi
Tourist
7 0 0

Hi @miniscript 

Thank you for sharing this code. 

I'm trying to implement this for my store. 

I was able to make the upsell collection to show on my product page, but still no luck with actual adding to cart work. 

In javascript, do I need to input my actual product ID here?

upsellProductArr.push(productID);

 

also, another problem is when the collection shows on my page, the price is wrong. it should be 29.95, and it shows as 2995. Anything that I can do?

 
 
 

Thank you in advance! 

miniscript
Shopify Partner
28 1 11

Yes @ChengRuiSi we can get this ID from liquid code data-product-id="{{ product.id}}">  which will return product id so which we can pass to the JS and send request to add. 

Bigforest
Shopify Partner
10 0 3

Hi

Can you show me the sample shop that has applied your code, I just want to make sure, your help is correct 

ChengRuiSi
Tourist
7 0 0

Hi! Thank you for getting back to me. 

I'm sharing my preview link ( I worked on a copied theme, so this is the only way it seems that I can share? let me know if you can't access to this)

https://cajjjnn751geazuz-1476231237.shopifypreview.com

It is on the "see all keyboards" and click on any keyboard product, and under the 'add to cart' I added the upsell section. 

Any help will be greatly appreciated!

 

worcesterint
Visitor
1 0 0

I also have he same problems, is this still a viable solution and if so what can I do to fix the issues?

miniscript
Shopify Partner
28 1 11

Hi can you show me what problem you're facing?

miniscript
Shopify Partner
28 1 11

@Bigforest Hi you can take a look here - CARIUMA : Comfortable Sustainable Shoes & Best Skate Sneakers but now we have slightly modified the approach.  Now we're using Storefron API's for that. 

idwithin
Excursionist
23 0 5

Hi there, this does not work. Any uodate?

miniscript
Shopify Partner
28 1 11

Hi Guys - This is working solution please let me know what you're facing. I have implemented this on multiple projects. 

idwithin
Excursionist
23 0 5

I added the code as per your instructions and nothing worked with adding the product to the cart. It was on the cart page.

It was on debut theme.

Several people talk about how it has never worked for them on this thread yet. Saying basically exactly the same thing. The first comment talks about how it doesn't add to cart.

brought in cart.js, added the code to cart template. Then added in the JS. Nothing happens.

 

idwithin
Excursionist
23 0 5

Hi there I have added the cart.js to my shopify theme, and this code. Yet nothing seems to work at all. Am I missing something? Is the code supposed to be edited further by me and this is why it is not working? I am on debut theme.

WoutervdMeer
Shopify Partner
83 1 15

Hi @miniscript ,

 

Can you help me out with adding these pieces of code to my debut theme?

The first piece of code is added to upsell.liquid.

Is this the same for the second piece of code?

And what information should I customize?

Kind regards,

Wouter vd Meer

Kind regards,
Wouter van der Meer
info@biervaneigenbodem.nl
https://www.biervaneigenbodem.nl/

manusam
New Member
5 0 0

Hey there @miniscript 

 

I've been looking for something like this for a while.

 

I think I followed the instructions correctly, but please do tell me if I got something wrong:

1- create a collection and call it upsell-products of course add products to it;

2- create a snippet file and call it upsell.liquid;

3- copy and paste both codes above (ajax too?) on the snippet file;

4- although not provided I assumed I needed to go to the cart-drawer.liquid file and paste a render 'upsell' code for it to display.

 

The thing is nothing shows. Could you provide some guidance or an updated code that would work with the Dawn 12.0 theme?

 

Thanks so much!

wh31_wh1222
Excursionist
26 0 4

Hi, is this visible on the add to cart drawer