<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 history page of your Shopify store step by step.  Let us take Shopify free <a href="https://themes.shopify.com/themes/debut/styles/default">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><a href="#step1-add-cjf" title="#step1-add-cjf">Step 1:  add customize javascript file</a></strong><br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="step1-add-cjf">Step 1: add customize javascript file</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Create a new js file under the Assets folder and name it as stx_custom.js.<br>Copy and paste the following code in:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">(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&lt;ids.length; i++){
        data.push({
          id: ids[i],
          quantity: quantities[i],
          inventory: inventories[i],
          check_inventory: (inventory_policies[i] == "deny" &amp;&amp; inventory_trackers[i] != "")
        });
      }
      el.addClass('loading');
      self.pushQueue(0, data, el);
    }

    this.init = function(){
      $('.reorder-btn').on('click', self.listen);
    }
  }

  $(reorder.init);
 
  
})(jQuery)</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>you can also download this file directly from <a href="https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js">Github</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>line 5: we define an object to process reorder request, it includes three functions: pushQueue, listen and init.<br>line 8: pushQueue function implementation to call Shopify <a href="https://shopify.dev/api/ajax/reference/cart">Ajax add-to-cart API</a> directly push our product into customer's cart.<br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->