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

[miniscript]

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.