For some e-commerce stores, having a button that allows your customers to re-order the products they previously ordered is absolutely essential, yet most Shopify stores don't have this feature and it's hurting their customer lifetime value as a result. In this article we share with you lovely folk of the Shopify community, instructions on how to add a re-order button to your Shopify website. The above image shows what it looks like using a test order I made here on Smooth.ie.

When the button is clicked all the products from that order are added to the cart and then the customer is redirected to the cart page.

The reorder button is placed on the customer's account page beside each order and on the customers order page.

STEP 1

To get started you need to upload 3 pieces of code to your website. For the first piece of code you need to create a new snippet in your snippets folder and call it:

snippets/smoothie-reorder.liquid

The first piece of code should be added into a new snippet called smoothie-reorder.liquid.

{% capture variant_ids %}{% for line_item in order.line_items %}{{ line_item.variant_id }},{% endfor %}{% endcapture %}
{% capture variant_quantities %}{% for line_item in order.line_items %}{{ line_item.quantity }},{% endfor %}{% endcapture %}
{% capture variant_inventories %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_quantity }},{% endfor %}{% endcapture %}
{% capture variant_inventory_policies %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_policy }},{% endfor %}{% endcapture %}
{% capture variant_inventory_trackers %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_management }},{% endfor %}{% endcapture %}

<div class="reorder-btn btn flip-front"
    data-variant-ids="{{ variant_ids }}"
    data-variant-quantities="{{ variant_quantities }}"
    data-variant-inventories="{{ variant_inventories }}"
    data-variant-inventory-policies="{{ variant_inventory_policies }}"
    data-variant-inventory-trackers="{{ variant_inventory_trackers }}">
  <span class="pt-reorder-text">REORDER</span>
  <span class="pt-spinner-container">
    <svg class="pt-spinner" viewBox="0 0 20 20" aria-label="Loading" role="status">
      <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" style="fill: white;"></path>
    </svg>
  </span>
</div>

STEP 2

Now you need to add the following code to the main JavaScript file in your theme which is most likely in:

assets/theme.js

this.reorder = new function(){
  var self = this;

  this.pushQueue = function(i, data, el){
    
    //LOW STOCK -- add as many as possible if stock is below requested ammount
    if(data[i].check_inventory){
      data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));
    }
    
    $.ajax({
      url: '/cart/add.js',
      method: 'POST',
      data: {
        quantity: data[i].quantity,
        id: data[i].id
      },
      complete: function(res){
        if(i >= data.length - 1){
          //products from queue are now added to the cart -> stop loading signal and go to cart
          el.removeClass('loading');
          window.location.href = '/cart';
          return;
        }else{
          // Calls are async as required by Shopify Docs
       	  self.pushQueue(i+1, data, el);
        }
      }
    });
  }

  this.listen = function(){
    var el = $(this);
    var ids = el.attr('data-variant-ids').split(',');
    var quantities = el.attr('data-variant-quantities').split(',');
    var inventories = el.attr('data-variant-inventories').split(',');
    var inventory_policies = el.attr('data-variant-inventory-policies').split(',');
    var inventory_trackers = el.attr('data-variant-inventory-trackers').split(',');
    ids.splice(-1, 1);
    quantities.splice(-1, 1);
    inventories.splice(-1, 1);
    inventory_policies.splice(-1, 1);
    inventory_trackers.splice(-1, 1);
    
    var data = [];
    for(var i=0; i<ids.length; i++){
      data.push({
        id: ids[i],
        quantity: quantities[i],
        inventory: inventories[i],
        check_inventory: (inventory_policies[i] == "deny" && inventory_trackers[i] != "")
      });
    }
    el.addClass('loading');
    self.pushQueue(0, data, el);
  }
  
  this.init = function(){
    $('.reorder-btn').on('click', self.listen);
  }
}
$(reorder.init);

The JavaScript parses the data attributes that are added to the reorder button in smoothie-reorder.liquid and it uses that data to add each item to the cart one-by-one when the button is clicked. It's important to note that the items are added to the cart asynchronously as it is required by Shopify.

STEP 3

The last piece of code we need to add is to style the button. The button we are using has a spinner that appears while the products are being added to the cart. This can take some time especially if there are a lot of products in the order that is being re-ordered. We can add the following code to the main css file for the theme which is most likely:

assets/theme.scss.liquid

@-webkit-keyframes rotating{
	from{
	    -webkit-transform:rotate(0deg);
	    -o-transform:rotate(0deg);
	    transform:rotate(0deg)
	}
	to{
	    -webkit-transform:rotate(360deg);
	    -o-transform:rotate(360deg);
	    transform:rotate(360deg)
	}
}
@keyframes rotating{
	from{
		-ms-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		transform:rotate(0deg)
	}
	to{
		-ms-transform:rotate(360deg);
		-moz-transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
		-o-transform:rotate(360deg);
		transform:rotate(360deg)
	}
}


.pt-spinner {
    -webkit-animation: rotating .5s linear infinite;
    animation: rotating .5s linear infinite;
    height: 100%;
  
}

.pt-spinner-container{
  display: none;
  height: 22px;
  margin-top: -4px;
}

.reorder-btn{
  width: 100px;
  height: 38px;
  display: inline-block;
  padding: 12px 14px 9px;
  margin: 0;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 13px;
  background-color: #373738;
  color: #fff;
  -webkit-transition: background-color 0.2s ease-out;
  -moz-transition: background-color 0.2s ease-out;
  -ms-transition: background-color 0.2s ease-out;
  -o-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
}
.reorder-btn:hover{
  background-color: #2a2a2b;
}


.reorder-btn.loading .pt-spinner-container{
  display: inline-block;
}

.reorder-btn.loading .pt-reorder-text{
  display: none;
}

STEP 4

With those three pieces of code added to the theme, all we need to do now is include the snippet "smoothie-reorder.liquid" in the right place. The snippet requires that you have an order object assigned to the variable called "order." If the order is not assigned to that variable you can pass the variable to the snippet as order when it is called like so:

{% include "smoothie-reorder", order: someOrderObject %}

CUSTOMER ORDER PAGE

The template for the customer order page is:

templates/customers/order.liquid

In this file we need to add the following snippet as in the image below:

<div style="margin-bottom: 20px;">{% include 'smoothie-reorder' %}</div>

CUSTOMER ACCOUNT PAGE

The template for the customer account page which contains a list of all the customer's orders is located here:

templates/customers/account.liquid

In this file, we need to add a new column to the table of orders, so we add the following two lines of html to the table as in the image below:

<th>Action</th>

<td>{% include 'smoothie-reorder' %}</td>

The end.