⚑️Latest

Shopify customer accounts: How to add a button to my customer's account page to start a return?

In case your customers have an account on your Shopify store, you can add a button to their order history page and order detail page to immediately start a return without entering any order details.

Note that this requires some coding knowledge and is best left to your developer. Feel free to send a link to this guide to them. Since every theme is different we do our best of detailing the steps here but cannot assist with every individual theme. In case the following steps do not work for you or you feel overwhelmed please reach out to your developer.

Step 1

In your Shopify dashboard, navigate to Online-Store / Themes / Click "Customize".

Step 2

In the lower left corner click on "Theme Actions" / "Edit Code".

1) Adding a button to the order history page

Under the Templates-Folder select "customers/account.liquid"

Look for the terms <thead> and <tbody> in the code on your screen. They represent the HEAD and the BODY of the table you see on your customer's account page. We are going to add a new column to the HEAD named "Returns" (or what you would like to call it) and new rows to the BODY that contain a button to start a return for the individual order.

The following is added to the HEAD as you can see in the screenshot below.

This adds a new column with the name "Returns". You can customize the word Returns to anything you like, just make sure the tags around it are still intact.

<th>Returns</th>

The following is added to the BODY as you can see in the screenshot below

<td>
<a class="btn btn--secondary btn--small" href="https://returns.richcommerce.co/return/new?c=yourCompanyIdentifier&orderNumber={{ order.name }}&orderEmail={{ order.email }}">
Start a return
</a>
</td>

Important: see the word "yourCompanyIdentifier" in the long text?

Go to your Rich Returns dashboard, navigate to Brand-Settings and look for the field titled "Unique identifier". This is your companie's unique identifier. Replace the one in the text above (yourCompanyIdentifier) with your own identifier. Leave everything else intact.

Make sure to press "Save" to actually save the changes. You should now see the changes immediately on the order history page. Click on the new button(s) to test the process.

Result

After adding the button and saving the changes a new column should have been added like the following:

2) Adding a button to the order detail page

In the Code-Editor under the Templates-Folder select "customers/order.liquid". Again the code will look heavily different depending on your theme.

We'll add a button to start a return directly under the Order Title which makes it convenient for customers to access it.

<p>
<a class="btn btn--secondary btn--small" href="https://returns.richcommerce.co/return/new?c=healthyfoodcompany&orderNumber={{ order.name }}&orderEmail={{ order.email }}">
Start a return
</a>
</p>

Again, look for the text "Unique identifier". Replace the one in the text above (yourCompanyIdentifier) with your own identifier. Leave everything else intact.

Make sure to press "Save" to actually save the changes. You should now see the changes immediately on the order details page. Click on the new button to test the process.

Result

After adding the button and saving the changes a new column should have been added like the following: