Add an "Edit your order" button to your confirmation email
A short snippet for your Shopify order confirmation email that links customers to the page where they can edit their order.
Customers can already edit from the thank-you page. Plenty close that page straight away, though, and the confirmation email is the next place they look. This adds a button to it.
It takes five minutes and uses only Shopify's own email template. You'll be pasting a small block of code, but you don't need to understand it.
Open the template
In Shopify admin go to Settings → Notifications → Order confirmation and click Edit code.
Find the right place
Search the code for <td class="button__cell">. It's usually near the bottom, after the order summary.
Paste the snippet
Paste the code below just above the closing </td> of that section.
Match your window
Change the 30 on the line assign edit_window_minutes = 30 to your own edit window, in minutes. One hour is 60 and 24 hours is 1440.
Save and test
Click Save, then use Shopify's Send test to check the button appears.
{% assign edit_window_minutes = 30 %}
{% assign order_age_seconds = 'now' | date: '%s' | minus: order.created_at | date: '%s' %}
{% assign edit_window_seconds = edit_window_minutes | times: 60 %}
{% if order_age_seconds < edit_window_seconds %}
<table class="row">
<tr>
<td class="button__cell" style="padding: 20px 0;">
<table class="button main-action-cell" align="center" style="margin: 0 auto;">
<tr>
<td class="button__inner" align="center" style="background-color: #1990c6; border-radius: 4px;">
<a href="{{ order.order_status_url }}" class="button__text" style="display: block; padding: 12px 30px; color: #ffffff; font-size: 16px; text-decoration: none; font-weight: bold;">
Edit your order
</a>
</td>
</tr>
</table>
<p style="text-align: center; color: #999; font-size: 13px; margin-top: 8px;">
You have {{ edit_window_minutes }} minutes to make changes to your order.
</p>
</td>
</tr>
</table>
{% endif %}
Make it yours
- Colour. Change
#1990c6to your brand colour. - Wording. Change "Edit your order" and the line underneath to whatever suits you.
Good to know
- The button links to the customer's order status page, which is where the Order Editing block appears. That block has to be added first. See order editing.
- The button is included only if the email is sent inside the window. If someone opens the email after the window has closed, the button is still there but the order page will show that editing has ended.
- With a long window, such as 3 days, change "minutes" in the last line to something that reads better, like "You can change your order for the next 3 days."