Add a Deep Link Return Button to Your Store
Plans: All plans Platforms: All platforms
A deep link is a pre-input order number and email address path at the end of your AfterShip returns page URL. It makes it convenient for customers to skip the order lookup step and directly land on the item selection page to begin the return initiation process.
In this tutorial, we will show you:
Prerequisites
Deep link format
Add a deep link return button on Shopify
Customer experience
Other platforms
Connect your online store to AfterShip Returns
Set up and customize your returns page
https://{returns_page_url.com}/instant?order_number={order_number}&email={email}
{returns_page_url.com}: Your returns page URL
{order_number}: Order number
{email}: Customer email address
Please replace the returns page URL variable with the real value to generate the deep link, then your customer can use the link to submit a return request without order lookup directly from the order history or order detail page on your website.
Please note that deep link return button is supported for the Classic Version of Customer accounts in Shopify where customers create an account and log in with email and password for now.
The support for the New Version of Customer accounts where customers log in with a one-time code sent to their email (no passwords) will roll out in December 2024. If you still wish to enable deep link for the new customer accounts version, please reach out to our customer support team.
Go to Online store > Themes in your Shopify admin.
In the Themes section, against the current theme, click the {..} icon and select Edit code.
Under Sections, find the main-order.liquid file. Here we are working with Shopify’s Dawn theme version 15.2.0.
Based on the Shopify theme, the file name may vary. You need to find the file that contains the layout and structure for displaying order details within a customer's account.
If you are inserting the deep link on the customer’s order details page within their account from where they can initiate the return directly, find the code given below.
Insert the code below after the code you found in Step 4.
You can change the column header title based on your requirements.
Again find the code below in the main-order.liquid file.
Insert the code below after the code you found in Step 6. You can choose one of the two options depending upon your returns page configuration in AfterShip Returns admin.
If you are using the AfterShip Returns branded returns page, insert the code below after the code you found in Step 6.
Replace the returns page URL variable {returns_page_url.com} with your return page URL to generate the deep link.
Change the button text variable {Request Return} with the text you want.
If you are embedding the return page using the Shopify proxy URL, insert the code below after the code you found in Step 6.
Replace the returns page URL variable {returns_page_url.com} with your return page URL to generate the deep link.
Change the button text variable {Request item} with the text you want.
Save the liquid file once done.
a. If AfterShip returns page URL is https://antiquevase.returnscenter.com/
b. If Shopify proxy URL is https://antiquevase.myshopify.com//apps/aftership-returns-center
Go to Online store > Themes in your Shopify admin.
In the Themes section, against the current theme, click the {..} icon and select Edit code.
Under Sections, find the main-account.liquid file. Here we are working with Shopify’s Dawn theme version 15.2.0.
Based on the Shopify theme, the file name may vary. You need to find the file that contains the layout and structure for displaying customers order history within a customer's account.
If you are inserting the deep link on the customer’s order history page within their account from where they can initiate the return directly, find the code given below.
Insert the code below after the code you found in Step 4.
You can change the column header title based on your requirements.
Again find the code below in the main-account.liquid file.
Insert the code below after the code you found in Step 6.
If you are using the AfterShip Returns branded returns page, insert the code below after the code you found in Step 6.
Replace the returns page URL variable {returns_page_url.com} with your return page URL to generate the deep link.
Change the button text variable {Request Return} with the text you want.
If you are embedding the return page using the Shopify proxy URL, insert the code below after the code you found in Step 6.
Replace the returns page URL variable {returns_page_url.com} with your return page URL to generate the deep link.
Change the button text variable {Request item} with the text you want.
If the AfterShip returns branded returns page deep link is added to your order details page, this is how the experience would be for customers.
If you are using other platforms, please insert the below deep link to your store’s code and change the variable to real value.
If the value is invalid, your customer can still modify the order information on the lookup page to submit a return request.
Overview
A deep link is a pre-input order number and email address path at the end of your AfterShip returns page URL. It makes it convenient for customers to skip the order lookup step and directly land on the item selection page to begin the return initiation process.
What you’ll learn
In this tutorial, we will show you:
Prerequisites
Deep link format
Add a deep link return button on Shopify
| Shopify page |
|---|
| Order detail page |
| Order history page |
Customer experience
Other platforms
Before your start
Connect your online store to AfterShip Returns
Set up and customize your returns page
Deep link format
https://{returns_page_url.com}/instant?order_number={order_number}&email={email}
{returns_page_url.com}: Your returns page URL
{order_number}: Order number
{email}: Customer email address
Please replace the returns page URL variable with the real value to generate the deep link, then your customer can use the link to submit a return request without order lookup directly from the order history or order detail page on your website.
Important consideration
Please note that deep link return button is supported for the Classic Version of Customer accounts in Shopify where customers create an account and log in with email and password for now.
The support for the New Version of Customer accounts where customers log in with a one-time code sent to their email (no passwords) will roll out in December 2024. If you still wish to enable deep link for the new customer accounts version, please reach out to our customer support team.
Add a deep link return button on Shopify
A. Customer order detail page
Go to Online store > Themes in your Shopify admin.
In the Themes section, against the current theme, click the {..} icon and select Edit code.
Under Sections, find the main-order.liquid file. Here we are working with Shopify’s Dawn theme version 15.2.0.
Based on the Shopify theme, the file name may vary. You need to find the file that contains the layout and structure for displaying order details within a customer's account.
If you are inserting the deep link on the customer’s order details page within their account from where they can initiate the return directly, find the code given below.
</caption>
<thead role="rowgroup">
<tr role="row">Insert the code below after the code you found in Step 4.
<th id="ColumnProduct" scope="col" role="columnheader">Return</th>You can change the column header title based on your requirements.
Again find the code below in the main-order.liquid file.
<tbody role="rowgroup">
{%- for line_item in order.line_items -%}
<tr role="row">Insert the code below after the code you found in Step 6. You can choose one of the two options depending upon your returns page configuration in AfterShip Returns admin.
a. AfterShip Returns branded returns page
If you are using the AfterShip Returns branded returns page, insert the code below after the code you found in Step 6.
<td> <a href="http://{returns_page_url.com}/instant?order_number={{ order.order_number }}&email={{ order.email }}" >Request Return</a > </td>Replace the returns page URL variable {returns_page_url.com} with your return page URL to generate the deep link.
Change the button text variable {Request Return} with the text you want.
b. Shopify proxy URL
If you are embedding the return page using the Shopify proxy URL, insert the code below after the code you found in Step 6.
<td> <a href="https://{returns_page_url.com}/apps/aftership-returns-center/instant?order_number={{ order.order_number }}&email={{ order.email }}" >Return item</a > </td>Replace the returns page URL variable {returns_page_url.com} with your return page URL to generate the deep link.
Change the button text variable {Request item} with the text you want.
Save the liquid file once done.
Demo
a. If AfterShip returns page URL is https://antiquevase.returnscenter.com/
<td>
<a href="https://antiquevase.returnscenter.com//instant?order_number={{ order.order_number }}&email={{ order.email }}"
>Request Return</a
>
</td>b. If Shopify proxy URL is https://antiquevase.myshopify.com//apps/aftership-returns-center
<td>
<a href="https://antiquevase.myshopify.com//apps/aftership-returns-center/instant?order_number={{ order.order_number }}&email={{ order.email }}"
>Request Return</a
>
</td>B. Customer order history page
Go to Online store > Themes in your Shopify admin.
In the Themes section, against the current theme, click the {..} icon and select Edit code.
Under Sections, find the main-account.liquid file. Here we are working with Shopify’s Dawn theme version 15.2.0.
Based on the Shopify theme, the file name may vary. You need to find the file that contains the layout and structure for displaying customers order history within a customer's account.
If you are inserting the deep link on the customer’s order history page within their account from where they can initiate the return directly, find the code given below.
</caption>
<thead role="rowgroup">
<tr role="row">Insert the code below after the code you found in Step 4.
<th id="ColumnProduct" scope="col" role="columnheader">Return</th>You can change the column header title based on your requirements.
Again find the code below in the main-account.liquid file.
<tbody role="rowgroup">
{%- for line_item in order.line_items -%}
<tr role="row">Insert the code below after the code you found in Step 6.
a. AfterShip Returns branded returns page
If you are using the AfterShip Returns branded returns page, insert the code below after the code you found in Step 6.
<td> <a href="http://{returns_page_url.com}/instant?order_number={{ order.order_number }}&email={{ order.email }}" >Request Return</a > </td>Replace the returns page URL variable {returns_page_url.com} with your return page URL to generate the deep link.
Change the button text variable {Request Return} with the text you want.
b. Shopify proxy URL
If you are embedding the return page using the Shopify proxy URL, insert the code below after the code you found in Step 6.
<td> <a href="https://{returns_page_url.com}/apps/aftership-returns-center/instant?order_number={{ order.order_number }}&email={{ order.email }}" >Request Return</a > </td>Replace the returns page URL variable {returns_page_url.com} with your return page URL to generate the deep link.
Change the button text variable {Request item} with the text you want.
Customer experience
If the AfterShip returns branded returns page deep link is added to your order details page, this is how the experience would be for customers.
Other platforms
If you are using other platforms, please insert the below deep link to your store’s code and change the variable to real value.
If the value is invalid, your customer can still modify the order information on the lookup page to submit a return request.
https://{returns_page_url.com}/instant?order_number={order_number}&email={email}Updated on: 17/10/2024
Thank you!