This is an advanced tutorial and requires knowledge of liquid programming, Javascript, HTML/CSS for implementation. We will recommend you to work with a developer/partner or reach out to us over live chat if you need any recommendation for a qualified partner.
There could be many use cases where you would like to capture some more information from customers to decide on a refund or exchange request and the requirements may differ across different businesses. To keep things simple and give control on designing the right user experience to capture, we have exposed the code for you to insert custom fields at any step during the returns/exchange journey. Here are the steps:
From your Shopify admin, go to Online Store > Theme > Edit code
Under Layout, open theme.liquid and copy paste the below code before </body> tag:
{% if request.path contains 'return_prime' %}
<style>
.returnprime_modal {
display: block;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.returnprime_modal_content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
}
.returnprime_close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
} .returnprime_close:hover,
.returnprime_close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.returnprime_feedback_form input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.returnprime_feedback_form button {
width: 100%;
background-color: #000;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style> <script>
function sendPayload(payload) {
let returnprime_custom_event = new CustomEvent("returnprime_custom_field", {
detail: payload,
});
document.dispatchEvent(returnprime_custom_event);
}
function modalScript() {
var modal = document.getElementById("ReturnprimeModal");
var span = document.getElementsByClassName("returnprime_close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
function addHtmlContent() {
let htmlContent = `<div class="returnprime_question_content">
<div id="ReturnprimeModal" class="returnprime_modal">
<div class="returnprime_modal_content">
<span class="returnprime_close">×</span>
<p style="font-size:15px;">We will need some more information to understand your issue better</p>
<div class="returnprime_feedback_form">
<div class="returnprime_feedback_item">
<label style="font-size: 13px;">Are all original labels intact?</label>
<input type="text" name="answer" placeholder="Yes/No style="
margin-bottom: 10px;">
</div>
<div class="returnprime_feedback_item">
<label style="font-size: 13px;">Do you have original packing with you?</label>
<input type="text" name="answer" placeholder="Yes/No">
</div>
<button type="button" id="submit__feedback style="
margin-top: 20px;"> Submit </button>
</div>
</div>
</div>
</div>`;
document.querySelector('.returnprime-custom-widget').innerHTML = htmlContent;
modalScript();
// onclick of submit button send payload to custom event
let payload = [];
document.querySelector("#submit__feedback").addEventListener('click', () => {
document.querySelectorAll(".returnprime_feedback_item").forEach((el, i) => {
const key = el.querySelector('label').innerHTML;
const value = el.querySelector('input').value;
payload.push({
key: key,
value: value
})
sendPayload(payload)
document.getElementById("ReturnprimeModal").style.display = "none";
});
});
}
if (window.location.pathname.includes('return_prime')) {
document.addEventListener("returnprime_return_page", (e) => {
addHtmlContent();
});
document.addEventListener("returnprime_exchange_page", (e) => {
addHtmlContent();
});
} </script>
{% endif %}This is a sample code and it will show a popup/modal on the 1st step of request page. You can make changes to the code to target any other page/element on the page to design custom experiences.
Note: You can have up to 10 key value pairs which means, you can add up to 10 different questions. |
Here is how it will look on customer journey if you use the above code without any changes:
4. The additional details data is shown on your Return Prime dashboard in below format:
Most common use cases for using custom fields:
You want to capture additional information based on the reason customers select. For e.g., if they select Size Issue in reason, you can show one more option to choose from sub reasons like Bigger Size/Smaller/Size etc. and understand the issue better and have deeper insights on your customers problems.
Your business requires a strict policy to be followed before processing the return and you want to ensure customers answer each of these so you can make an informed decision. For e.g., you can give a checklist asking if the products have their labels intact, the original packaging is preserved etc.
You want to show a series of questionnaire to understand your customers as lot of times they are not really sure of their compatibility with your products. For e.g., if they choose Size issue as reason for return, you can ask if they used the size guide available on the product page, if they use any other brand of same size and it fits in etc.
Still, have questions? Click the blue chat button