****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***
Step 1: 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 2: Go to the main account.liquid file and add the following snippet on the top of the file:
{% render 'quickreturns_block' %}
Step 3: 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.