<!-- 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 details 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. You can tailor as your requirement. if you can't get it, do not hesitate to <a href="https://www.mojoin.com/about-us/">contact us</a>. we would like to help you out.</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><a href="#step2-reorder-style"><strong>Step 2:  add Reorder button styles</strong></a><br><strong><a href="#step3-reorder-button-func">Step 3:  create snippets for reorder button function</a></strong><br><strong><a href="#step4-reorder-in-account">Step 4:  render reorder button on the customer account page</a></strong><br><strong><a href="#step5-reoder-button-inorder">Step 5:  render reorder button in the order details page</a></strong><br><strong><a href="#step6-test">Step 6:  Test</a></strong><br><strong><a href="#step7-conclusion">Step 7:  Conclusion</a></strong></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 stx_custom.js. your file location will be :<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Assets </strong>-&gt; <strong>stx_custom.js</strong><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>let's explain a little bit more for the  above codes:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>line 5</strong>: we define an object to process reorder request, it includes three functions: pushQueue, listen, and init.<br><strong>line 8</strong>: 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><strong>line 36</strong>: listen function to deal with reorder button click event.<br><strong>line 62</strong>: init function in order to bind the click event with our listen function.<br><strong>line 67</strong>: call init function to bind the click event when page load js file finished.<br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="step2-reorder-style">Step 2: add Reorder button styles</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Locate shopify store Debut theme's style file at:<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Layout</strong> -&gt; <strong>theme.liquid</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Copy and past the following lines in the end of the above theme style liquid file.</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="">/* 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 */</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>you can also get this content from <a href="https://github.com/michaelyue/shopifytailor/blob/main/stx_reorder_style.css">Github</a>.<br>here we define the reorder button style and effect when you click the button.<br>obviously you can customize them as your need.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="step3-reorder-button-func">Step 3: create snippets for reorder button function</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Create a new snippet file called stx_reorder.liquid at :<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Snippets</strong> -&gt; <strong>stx_reorder.liquid</strong><br>Copy and paste the following codes 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="">{% 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 %}

&lt;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 }}">
  &lt;span class="pt-reorder-text">REORDER&lt;/span>
  &lt;span class="pt-spinner-container">
    &lt;svg class="pt-spinner" viewBox="0 0 20 20" aria-label="Loading" role="status">
      &lt;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;">&lt;/path>
    &lt;/svg>
  &lt;/span>
&lt;/div>
</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p><strong>line 1-5</strong>: get the product variant data from <a href="https://shopify.dev/api/liquid/objects/line_item">line_item</a> object of your <a href="https://shopify.dev/api/liquid/objects/order">order</a> object . as you can see we need you pass the order object in.<br><strong>line 7-12</strong>: save the product variant data in Reorder button <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">data-* attributes</a>, once reorder button clicked will get them and push to Shopify cart backend.<br><strong>line 13</strong>: Reorder button name, whatever name you like, you can put here, for example : Buy Me Again.<br><strong>line 14-17</strong>: loading effect when reorder button clicked, implemented with <a href="https://www.w3schools.com/html/html5_svg.asp">SVG</a> graphics element.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="step4-reorder-in-account">Step 4: render reorder button on the customer account page</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Add the following line :<br></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="">&lt;td>{% render "stx_reorder" order:order %}&lt;/td></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>into your customer account template file:<br><strong>Themes</strong> -&gt; <strong>Edit Code</strong> -&gt; <strong>Templates </strong>-&gt; <strong>customers/account.liquid</strong><br>at <strong>line 31</strong>, just in the order line loop.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once you done, you account liquid file will look like this:<br></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":420,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-customer-account.png" alt="" class="wp-image-420"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 id="step5-reoder-button-inorder">Step 5: render reorder button in the order details page</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Add the following line :<br></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="">&lt;div class="stx-reorder-button">{% render "stx_reorder" %}&lt;/div></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>into your customer account template file:<br><strong>Themes</strong> -&gt; <strong>Edit Code</strong> -&gt; <strong>Templates </strong>-&gt; <strong>customers/order.liquid</strong><br>at around <strong>line 209</strong>，if you have changed the original file, please refer to the following screenshot to put it at the right location.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once you done, you order liquid file will look like this:<br></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":421,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-customer-order.png" alt="" class="wp-image-421"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 id="step6-test">Step 6: Test</h2>
<!-- /wp:heading -->

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

<!-- wp:image {"id":422,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-inyouraccount.png" alt="" class="wp-image-422"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>click reorder button, the order product will be added into your Shopify cart and your will be redirected to the cart page.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In your order details page , reorder button will be end of order data table, looks like this:</p>
<!-- /wp:paragraph -->

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

<!-- wp:image {"id":423,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-order-details.png" alt="" class="wp-image-423"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Actually you can put the button wherever you want, you just need to modify your customers/order.liquid file.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- mojoin-home-page -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6569971233827474" data-ad-slot="4992576575" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- /wp:html -->

<!-- wp:heading -->
<h2 id="step7-conclusion">Step 7: Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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  <a href="https://www.mojoin.com/about-us/">let us</a> know.</p>
<!-- /wp:paragraph -->