Notes Before You Begin:

This code allows you to show a product upsell on specific products that use an upsell template. This technique was first used on the Daft Punk UK store. https://uk.daftpunk.com/ 

The Logic

1. If the product upsell admin settings are enabled, then When a customer visits a product page the code looks for the name of the template the product is using. If the template contains “upsell” anywhere in the name this will trigger the product upsell code.
2. Next the code captures the product’s template in a variable and pulls in the latest product from the collection with the same name as the variable.
3. The customer can either choose to add or not add the upsell product to their cart.

BEGIN CODING

Open settings_schema.json and add the following code at the top of the file after the opening bracket “[”. This will create an admin setting within themes > customize themes to quickly turn the upsell code on and off.

  {
    "name": "Product Upsell",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable-product-upsell",
        "label": "Would you like to turn the product upsell feature on? Checked means yes, unchecked means no."
      }
    ]
  },  

Create liquid snippet named “upsell.liquid” and include the following code:

<!-- Trigger the modal with a button -->
<button style="display: none;" id="upsell-button" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Product Upsell Button</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Caputre the Current Product Collection and assign to upsell-collection variable
    pull in the products within the collection with the same name as the upsell-collection variable name. -->
    {% capture upsell-collection %}{{ product.template_suffix | handleize }}{% endcapture %}
    
    {% for product in collections.[upsell-collection].products limit: 1 %}
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">{{ collections.upsell.description }}</h4>      
        </div>
        <div class="modal-body col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="modal-image col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <img src="{{ product.featured_image.src | product_img_url: 'large' }}">
            </div>
            <div class="modal-form col-lg-6 col-md-6 col-sm-6 col-xs-6">
              <span class="title" itemprop="title">{{ product.title }}</span>      
              <span class="money" itemprop="price">{{ product.price | money }}</span>      
               {% if has_cart %}{% include 'product-add-to-cart-form' %}{% endif %}
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">No Thanks</button>
          <a href="/cart">
            <button id="modal-cart-button" type="button" class="btn btn-default"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart</button>
          </a>
        </div>
      </div>
    {% endfor %}
  </div>
</div>        

<script>
  window.onload = function() {
    
        var purchaseBtn = document.getElementById('purchase');
    
        purchaseBtn.onclick = function(){
            document.getElementById('upsell-button').click();
        }
    
  };
</script>

Open product-page.liquid and add the following code directly after the line that says {% include ‘product-specs’ %}

        {% if settings.enable-product-upsell %}
          {% if product.template_suffix contains 'upsell' %}
            {% include 'upsell' %}
          {% endif %}        
        {% endif %}

Open custom.scss and add the following CSS code:

/* =============================================
================================================
        MODAL UPSELL
================================================
==============================================*/

    .modal-content{
        img {
            display: block;
            float: left;
        }
        select#product-select {
            margin-bottom: 20px;
        }
        .detail-wrap.desc-wrap {
            display: none;
        }
        .modal-footer {
            display: inline-block;
            width: 100%;
        }
        .modal-form {
            display: inline-block;
            float: right;
        }
        .product-price {
            display: inline-block;
        }
        span.detail-title {
            display: inline-block;
            width: 100% !important;
            position: relative !important;
            margin-bottom: 15px;
        }
        .detail-title{
            margin-left: 15px; 
        }
        .detail-wrap.quantity-wrap {
            display: inline-block;
            padding: 0 !important;
            margin: 0 !important;
            border: none;
            width: 100%;
        }
        .modal-form, .modal-image{
            min-height: 0; 
        }
        .product-price {
            padding-left: 15px !important;
        }
        .product-quantity-wrapper{
            min-width:1px;
            display: block;
            margin: 0 auto;
        }
        .product-quantity-wrapper {
            width: 160px !important;
            display: block;
            margin: 0 auto;
        }
        span.money {
            font-size: 20px;
        }
        .detail-wrap {
            border: none;
        }
        .detail-wrap {
            padding: 0;
            padding-top: 60px;
            padding-bottom: 20px;
        }
        span.title {
            width: 100%;
            display: block;
            text-align: center;
            font-size: 28px;
        }
        span.money {
            width: 100%;
            display: block;
            text-align: center;
            font-size: 24px !important;
        }
        #modal-cart-button {
            color: white;
            background: black;
        }
        h4.modal-title {
            text-align: center;
            font-size: 28px;
        }
        .detail-wrap.quantity-wrap {
            display: none !important;
        }      
    }

Create a New Product Template

Within the Shopify code editor navigate to the templates section and click “Add a new template”. The template can be named anything you want, but must contain “upsell” somewhere in the name. This is because the code added in the earlier steps looks for the template name, if the template used on the product contains “upsell” in the name then it will include the upsell code. With the OLM base theme the code should look similar to the following:

{% include 'theme-variables' %}

{% include 'product-page' %}

{% include 'product-vendor-description' %}

{% include 'product-footer' %}

Assign a product to the new template

1. Navigate to the product you want the upsell template to show on.
2. Change the template to the name of the template you just created.