How to add Return/Exchange button in Order History Page ( Legacy Accounts Only )

In Order to add Return and Exchange buttons in the Order History Page, follow the steps below: 

Step 1: Change the “Customer accounts”  from “Customer accounts” to “Legacy” by clicking on Settings>Customer accounts. 

Note: 

  • You can only customize the orders page for Legacy accounts. Stores using "New Customer Account" cannot customize the account or orders history page. Please switch to Legacy accounts from Settings → Customer Accounts
  • Turn off the "Self-Serve Returns" option

     

 

Step 2:  Click on Online Store and then Themes. 

 

 

Step 3: Click on the three dots beside your theme and  from the dropdown, click on “Edit Code” 

 



Step 4:  Create a new snippet in the Snippet section with the name quickreturns_block.liquid and add the following code to the file.

<script>
   const storeUrl = "{{ shop.domain }}";
   function requestReturn(elem, store, order, customer) {
       elem.classList.add("loading");
       fetch('https://' + storeUrl + '/apps/quickreturns/order-detail', {
               method: 'POST',
               headers: {
                   'Content-Type': 'application/json',
               },
               body: JSON.stringify({
                   store: store,
                   order: order,
                   customer: customer
               }),
           })
           .then((response) => response.json())
           .then((data) => {
               if (data.success) {
                   window.location = data.url;
               } else {
                 elem.classList.remove("loading");
               }
           })
           .catch((error) => {
               console.error('Error:', error);
               elem.classList.remove("loading");
           });
   }
</script>

<style>
 .return-btn {
   margin: 10px !important;
 }

  .return-btn::after {
     content: '' !important;
     display: block;
     width: 1.2em;
     height: 1.2em;
     position: absolute !important;
     left: calc(50% - 0.75em) !important;
     top: calc(50% - 0.75em) !important;
     border: 0.15em solid transparent;
     border-right-color: white;
     border-radius: 50% !important;
     animation: loading-rotate 0.7s linear infinite;
     opacity: 0;
 }

 @keyframes loading-rotate {
   from {
     transform: rotate(0);
   }
   to {
     transform: rotate(360deg);
   }
 }

 .return-btn.loading {
   color: transparent !important;
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
 }

 .return-btn.loading::after {
   opacity: 1;
 }
 
</style>

Step 5: Go to the main account.liquid file and add the following snippet on the top of the file:

{% render 'quickreturns_block' %}


Step 6: Add the following code to add an extra column for each row of the orders. 

<td>

                   {% assign order_date = order.created_at | date: "%s" | times: 1 %}
                   {% assign ago = 'now' | date: "%s" | minus: 2592000 | times: 1 %}
                   
                   {% if order.fulfillment_status == 'fulfilled' and order_date > ago %}
                      <button onclick="requestReturn(this, '{{ shop.domain }}', '{{ order.id }}', '{{ customer.id }}')" class="return-btn" data-order='{{ order.id }}'>Return / Exchange</button>
                   {% else %}
                      <p>Not Eligible</p>
                   {% endif %}

</td>

 

Don't forget to save the file, and you are good to go. For any support, You can contact the support team at any point of time.