Blog

How can I add an upsell on my Shopify product page?

You can add an upsell on your Shopify product page by adding some custom code to your Shopify Theme.

Step 1: Duplicate your Shopify Theme
Before making any edits to your Shopify Theme, I recommend you first duplicate your theme. Click on the dots next to your active theme and create a copy. You can rename the copy "Backup DD/MM/YY", so that you will always have a backup to fall back on. Now make a second copy and call it "testing".

Step 2: Open the code editor
Now hover over the dots next to your theme copy and click on "Edit Code" to open the code editor.

Step 3: Open the main-product.liquid file
In the code editor, you will see a sidebar on the left hand side. In the side bar, search for the sections folder and open the main-product.liquid file inside the folder. This file is the template for your Shopify Product Page.

Step 4: Add a Upsell block on the Shopify Product Page
Below you will see a code snippet that you can add inside the main-product.liquid file. This code snippet adds an extra block to your Shopify Product Page.

In plain English the code says: When the "upsell" block is added to the product page, it will show the following elements. First, it will display a heading, that you can type yourself in the theme customizer. Then, it will show the featured image of the product you choose to upsell. Moreover, it will also show the product title and price of the product you choose to upsell. And then it will display a variant selector, where you could for instance, choose your size, like XS, S, M, L or XL. And finally, it will show an add to card button.

{%- when "heading" -%}
<div>
	<h2>{{ block.settings.heading }}</h2>
<div class="outer_upsell_box">
<div>
	<img src="{{ block.settings.product.featured_image | img_url: '150x150' }}" alt="{{ block.settings.product.title }}">
</div>
<div class="upsell_info_box">
	<h3>{{ block.settings.product.title }}</h3>
    <p>{{ block.settings.product.price | money }}</p>
    <form id="variantSelector">
      {% for variant in block.settings.product.variants %}
          {% if variant.title contains 'Sorbet'%}
             <div class="variant-option">
                 <input type="radio" id="sizeName" name="size" onclick="check(this.value)" value="{{variant.id }}">
                 <label for="sizeName">{{ variant.option2 }}</label>
             </div>
          {%endif%}
      {% endfor %}
     </form>
</div>
</div>
<a id="upsell_add_to_card_link" class="product-form__submit button button--full-width button--primary" href="">Add to Cart</a>
</div>

Step 5: Add the Javascript code snippet
To make sure the add to card button works, you will need to add the below javascript code snippet to your main-product.liquid file as well.

In plain English, when you choose the size of the product, like XS, S, M, L, XL. Then, the Javascript will add the variant to the add to cart link. So that when you click on the add to cart link, you will have the right size of the product in your basket. Every variant you create in your Shopify dashboard has a unique variant ID number, the Javascript code takes this variant ID number adds it to the button.

<script>
      function check(size) {
      document.getElementById("upsell_add_to_card_link").href=`https://negative-underwear-123.myshopify.com/cart/${size}:1`
      }
</script>

Step 6: Add the schema snippet
Next, you must add the schema snippet to your main-product.liquid file. This snippet adds buttons to your theme customizer. When you open the theme customizer on your Shopify product page, you will be able to type a heading like "Complete the set" or "Recommend Products". You will also be able to select the product you would like to display in the upsell section in the theme customizer. You can do this manually from the drop-down or link a product metafield if you want to add products dynamically.

{% schema %}
{
  "name": "t:sections.main-product.name",
  "tag": "section",
  "class": "section",
  "blocks": [
    {
      "type": "heading",
      "name": "Heading",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Complete the set"
        },
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        }
      ]
    },

Step 7: Add this code snippet to your section-main-product.css file
In the theme editor, you must now go to the Assets folder and find the section-main-product.css file. In this file, you must copy and paste this code snippet at the bottom of the file. This code snippet makes the upsell section look nice.

.outer_upsell_box {
  display: flex;
}

.upsell_info_box{
  margin-left: 20px;
}

.variant-option {
  display: inline-block;
}

.variant-option label {
    padding: 5px 11px;
    background-color: #F4F6F6;
    cursor: pointer;
    font-size: 11px;
    width: 34px;
    height: 24px;
    display: inline-block;
    list-style: none;

}

input[type="radio"] {
  /*Just the bit of hiding the radio buttons (without losing accessibility, of course) can be done with the following CSS:*/
  /*Using opacity: 0; isn't ideal, as the button is still there, taking up space in the page. Positioning it out of view is the way to go.*/
    left: -999em;
    position: absolute;
}

#upsell_add_to_card_link {
  width: 438px;
}

Shopify Product add-ons without an app

In summary, this code allows you to add Shopify product add-ons without an app. You do not need to install an upsell app, and you can still upsell recommended products directly on your Shopify product page.

Increase your Average Order Value

The greatest benefit of adding a custom Upsell section on your product page is that you can increase your average order value. Instead of just buying 1 x product, some of your customers may end up buying multiple products.

But the upsell section also makes your Shopify site more customer friendly. You might for instance sell sets of items. And when your customer is looking to buy a top, they might straight away see the matching pants, and they won't have to search any further.

Let's make your Shopify website better by adding this custom upsell section to your store.

• Increase your average order value
• Great user experience
• Convenient shopping for customers
• Unique product recommendations
• Add to cart directly on the product page
• No App needed

Looking for a Shopify Developer?

My name is Manon and I am a Shopify Web Developer. If you have any questions about adding a Upsell Section on your Shopify Product Page, I am happy to help. I am also more than happy to install the Upsell section for you. Just drop me a line on the contact page and I will get back to you personally.