How to add an Upsells system in your cart page on Shopify

In this tutorial we will see how to create an upsells system in the cart page of your Shopify Store.

You no longer need to overload your theme with applications which are very often paid! Thanks to this Shopify tutorial you will be able to offer your customers upsells in the form of a collection of products 😉

How to create the system?

It’s very simple, we just need to create a snippet file with the code that you will find below and then we can add it to the shopping cart. Why do we do it this way instead of pasting the code directly in the cart file? Well because it’s cleaner and also easier to change the placement as needed 😉

Creating the Snippet

Go to Online Store – Actions – Edit Code. Unfold the Snippets folder and click on “Add a new snippet”, name it “dg-cart-upsells” and copy/paste the following code:

<style>
  .dgCartUpsell { text-align:center; margin:25px auto; max-width:1170px; }
  .dgCartUpsellCont { margin:0 auto; }
  .dgCartUpsellInner {  display:inline-flex; margin:0 auto; border:1px solid #f0f0f0; }
  .dgCartUpsellForm {  max-width:300px; padding:10px 15px; margin:10px; }
  .dgCartUpsellForm * { display:block; clear:both; width:100%; margin-bottom:15px; }
  .dgCartUpsell .dci-title { font-size: 16px; line-height: 21px; min-height: 45px; }
  .dgCartUpsellQty { display:none !important; }
  .dgCartUpsell input[type=number] { float:none; display:block; }
  .dgCartUpsell .btn-primary, .dgCartUpsell .btn-primary:hover { }
</style>

{% assign upsellCollection = "upsells" %}
{% assign upsellLimit = "4" -%}
{% assign upsellTitle = "You should also take a look at this!" %}
{% assign upsellAtc = "Add to cart" %}


<div class="dgCartUpsell">

  <h2>{{ upsellTitle }}</h2>

  <div class="dgCartUpsellCont">
    {% for collection in collections  %}
    {% if collection.handle == upsellCollection %}

    {% for product in collection.products limit:upsellLimit %}

    <div class="dgCartUpsellInner">

      <form action="/cart/add" method="post" class="dgCartUpsellForm">
        <img class="dci-image" src="{{ product | img_url: '600x600', scale: 2 }}" alt="{{ product.title | escape }}" >
        <strong class="dci-title">{{ product.title }}</strong> 

        <select name="id" class="dci-product-variants" >
          {% for variant in product.variants %}
          {% if variant.available %}    
          <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">
            {% if variant.title != "Default Title" %}{{ variant.title }} - {% endif %}
            {{ variant.price | money_with_currency }}            
          </option>
          {% else %}
          <option disabled="disabled">
            {{ variant.title }} - {{ 'products.product.sold_out' | t }}
          </option>
          {% endif %}
          {% endfor %}
        </select> 
        <div class="dgCartUpsellQty">
          <label for="quantity-{{forloop.index}}">Quantity</label>
          <input type="number" id="quantity-{{forloop.index}}" name="quantity-{{forloop.index}}" value="1" min="1" class="quantity-selector"> 
        </div>
        <button type="submit" name="add" class="btn btn-primary">{{ upsellAtc }}</button>
      </form>
    </div>
    {% endfor %}
    {% endif %}
    {% endfor %}
  </div>
</div>

Upsell placement

This time in the Templates folder open the cart.liquid file. Go to the bottom and copy/paste the following code:

{% include 'dg-cart-upsells' %}

How to use and customize the upsells system

Once the code is installed you will have to create an upsell collection that will be used to offer additional products to your customers.

Be careful! you will always display the same products no matter what’s in the cart because you have to know that at the theme level you can’t propose specific products that depend on what is added in the cart… Actualy, it’s possible, we could do that but it requires a lot more coding and goes beyond what’s doable for a free tutorial😉

So we need to create the collection by clicking on Products – Collections – Create a collection and title it “upsells” then put the products you want to offer as upsells in the cart.

What can we do in terms of customization?

You have 4 main options:

  • upsellCollection = « the name of your upsell collection » (the default name = upsells)
  • upsellLimit = « number of products to show »
  • upsellTitle = « upsell zone title »
  • upsellAtc = « add to cart button title »

Disclaimer: Works only with a cart page! If you have a theme with a mini cart (popup) or drawer (right column that opens) this system will not work!

This tutorial is also available in video format

Hope you found this tutorial helpful !

You have any ideas for new tutorials ? Any questions about this one ? Leave me a comment 😉

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

2 Responses

  1. Hi, Thank you for the tutorial it was very useful and clear, but I wanted to know to proceed if I want add different upsell collection for different items?

    1. Hey there, thanks for the comment. Unfortunately, as mentioned in the tutorial, you can only display the same products. If you want to show upsells that depend on the products from the cart, you’d need a more complicated system and it’d have to be through an app.

Leave a Reply

Your email address will not be published. Required fields are marked *