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

miniscript
Excursionist
21 1 9

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.

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! 

0 Likes

Hi

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

0 Likes
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!

 

0 Likes