How to Add Reorder Button in Shopify in 2023?

Shopify merchants that want to make it simpler for their customers to reorder previously bought items frequently ask for the Add Reorder Button. It’s a crucial feature for many eCommerce companies that sell consumables, subscription-based Items, or often bought things.

You can find a step-by-step tutorial for Add Reorder Button in Shopify in this article. We will also go through this feature’s advantages and how it can increase sales and client loyalty. then let’s get going!

What is the Reorder Button?

A Shopify website’s Reorder button is a feature that enables users to quickly reorder previously purchased Items. By removing the need for buyers to look up the item they wish to purchase once more, it streamlines the purchasing process. The product is automatically added to their cart when they click the Reorder button, allowing them to continue to the checkout process without having to look for it again. 

Businesses that provide consumables, subscription-based products, or things that customers frequently buy can benefit particularly from this feature. It can enhance sales for the eCommerce company, simplify the buying experience, and improve client retention.

Advantages Of Add Reorder Button In Shopify

Let’s discuss the importance of having this option on your eCommerce website before getting into the specifics of Add Reorder Button in shopify.

1. First of all, with Add Reorder button makes it easier for your customers to make purchases. They can click the Reorder button to add the previous order to their cart rather than going to different pages of sites .
2. Also, it increases client retention. Customers are more likely to return and make more purchases if they have a good experience on your website. A modest but crucial step toward improving your customers’ buying experiences is the Add Reorder Button.
3. Add Reorder button, last but not least, might boost your sales. Customers are more inclined to make recurring purchases when they can readily place new orders. More sales and income will result for your company as a result.

Why Do We Need to Add Reorder Button?

• Instead of visiting other pages of the website, users can use the reorder button to repeat their previous purchase order.
• Simplifies the purchasing process for customers by allowing them to quickly and easily reorder previously purchased items.
• Saves customers time and effort, as they don’t need to search for the product again.
• Increases customer satisfaction by providing a convenient and streamlined shopping experience.
• Improves customer retention by making it easier for customers to repurchase items they regularly use or subscribe to.
• Can increase sales for the shopify business by encouraging repeat purchases and reducing cart abandonment rates.

How To Add Reorder Button In Shopify?

Step 1.  In the Theme Code, first go to the customers/account.liquid template.

• Click on “Themes” to access your store’s themes.
• Find the theme you want to add the reorder functionality  and click on the “Actions” button next to it.
• From the dropdown menu, select “Edit code” to access the theme’s code editor.
• In the code editor, on the left-hand side, you will see a list of folders and files that make up your theme.
• Look for a file called “customer-account.liquid” or “account.liquid” and click on it to open it in the code editor.
• If you cannot find this file, you can also try looking for it in the “Templates” folder instead.

Step 2. After that at the end of the Html page paste the javascript and the css code which is mentioned below:

  @-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;
}
 .reorder-btn span {
  pointer-events: none;
}
</style>

Here’s an example of the code you can use:

<script>
  
    document.querySelector('.reorder-btn').addEventListener('click', function(event) {
  var el = event.target;

    event.preventDefault();
 el.classList.add("loading");
    var ids = el.getAttribute('data-variant-ids').split(',');
    
    var quantities = el.getAttribute('data-variant-quantities').split(',');
    var inventories = el.getAttribute('data-variant-inventories').split(',');
    var inventory_policies = el.getAttribute('data-variant-inventory-policies').split(',');
    var inventory_trackers = el.getAttribute('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] != "")
      });
    }
    function pushQueue(i, data, el) {
      if (data[i].check_inventory) {
        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));
      }
         var request = new XMLHttpRequest();
      request.open("POST", "/cart/add.js");
      request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      request.onload = function() {
        if (i >= data.length - 1) {
          el.classList.remove("loading");
         window.location.href = "/cart";
        } else {
          pushQueue(i+1, data, el);
        }
      };
      request.onerror = function() {
        // add error handling here
      };
      request.send(JSON.stringify({
        quantity: data[i].quantity,
        id: data[i].id
      }));
    }
    pushQueue(0, data, el); 
 
  });

</script>

Step 3. Locate the <tbody> tag in the order history table.

• Find the for loop that starts with “{%- for order in customer.orders -%}” and ends with “{%- endfor -%}“. This for loop is responsible for displaying order details.
• Inside the for loop, add a new <td> tag in a new row below the existing order details.
• Inside the new <td> tag, insert your custom liquid snippet.
• Save the changes and preview the updated table on your store.

  <td class="text-nowrap text-end">
 {% if order.line_items.size > 0 %}
{% 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" style="z-index: -1;">REORDER</span>
  <span class="pt-spinner-container" style="z-index: -1;">
    <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>


{% endif %}
                        
                      </td>

Are you getting confused while doing this code?? Don’t worry only with one click you can buy this feature. Click Here and enjoy the feature.