How to Add Reorder or Buy Again Button in Shopify

As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.

If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order details page of your Shopify store step by step. Let us take Shopify free Debut theme as an example. for all others, the backend logic is very similar. You can tailor as your requirement. if you can’t get it, do not hesitate to contact us. we would like to help you out.

Step 1: add customize javascript file
Step 2: add Reorder button styles
Step 3: create snippets for reorder button function
Step 4: render reorder button on the customer account page
Step 5: render reorder button in the order details page
Step 6: Test
Step 7: Conclusion

Step 1: add customize javascript file

Create a new js file under the Assets folder and name it stx_custom.js. your file location will be :
Themes -> Edit Code -> Assets -> stx_custom.js
Copy and paste the following code in:

(function($) {
  
  
  // stx reorder 
  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);
 
  
})(jQuery)

you can also download this file directly from Github.

let’s explain a little bit more for the above codes:

line 5: we define an object to process reorder request, it includes three functions: pushQueue, listen, and init.
line 8: pushQueue function implementation to call Shopify Ajax add-to-cart API directly push our product into customer’s cart.
line 36: listen function to deal with reorder button click event.
line 62: init function in order to bind the click event with our listen function.
line 67: call init function to bind the click event when page load js file finished.

Step 2: add Reorder button styles

Locate shopify store Debut theme’s style file at:
Themes -> Edit Code -> Layout -> theme.liquid

Copy and past the following lines in the end of the above theme style liquid file.

/* reorder style */

@-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: #fdb819;
  color: #000;
  -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: #fdb819;
}


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

.reorder-btn.loading .pt-reorder-text{
  display: none;
}
/* reorder style end */

you can also get this content from Github.
here we define the reorder button style and effect when you click the button.
obviously you can customize them as your need.

Step 3: create snippets for reorder button function

Create a new snippet file called stx_reorder.liquid at :
Themes -> Edit Code -> Snippets -> stx_reorder.liquid
Copy and paste the following codes in :

{% 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>

line 1-5: get the product variant data from line_item object of your order object . as you can see we need you pass the order object in.
line 7-12: save the product variant data in Reorder button data-* attributes, once reorder button clicked will get them and push to Shopify cart backend.
line 13: Reorder button name, whatever name you like, you can put here, for example : Buy Me Again.
line 14-17: loading effect when reorder button clicked, implemented with SVG graphics element.

Step 4: render reorder button on the customer account page

Add the following line :

<td>{% render "stx_reorder" order:order %}</td>

into your customer account template file:
Themes -> Edit Code -> Templates -> customers/account.liquid
at line 31, just in the order line loop.

Once you done, you account liquid file will look like this:

Step 5: render reorder button in the order details page

Add the following line :

<div class="stx-reorder-button">{% render "stx_reorder" %}</div>

into your customer account template file:
Themes -> Edit Code -> Templates -> customers/order.liquid
at around line 209´╝îif you have changed the original file, please refer to the following screenshot to put it at the right location.

Once you done, you order liquid file will look like this:

Step 6: Test

if all are correct , now you can login your store and visit your account, you will see reorder button in your order history table as below screenshot shown:

click reorder button, the order product will be added into your Shopify cart and your will be redirected to the cart page.

In your order details page , reorder button will be end of order data table, looks like this:

Actually you can put the button wherever you want, you just need to modify your customers/order.liquid file.

Step 7: Conclusion

In this guide, I show you how to add Reorder or Buy Again button in Shopify account and order details page from scratch. In this way your customer can re-purchase their favourite products quickly from their account or purchased history which means we save customer’s time and you have more chance to increase your profit from your existing customers. If you got any problems please let us know.

Please follow and like us:

You may also like...

Leave a Reply

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