This article covers how to include an NPS One Click survey within your Shopify Order confirmation email.
For a complete overview of the One Click survey feature itself, see One Click survey links overview.
Please note:
Editing your Shopify order confirmation email template requires working directly with HTML and Liquid code. If you are comfortable doing this, the steps below will walk you through everything you need.
Before making changes, copy the existing template code and save it somewhere safe, so you can paste it back in if anything goes wrong.
If you would prefer us to set this up for you, please get in touch and we will be happy to help. We will just need you to accept a collaborator access request from us so we can access your store.
Before you start
You will need:
An NPS question set up in Grapevine Surveys with One Click survey links generated
Access to your Shopify admin to edit your order confirmation email template
Adding customer data to your One Click links
Because this is an order confirmation email, both customer and order objects are available to you via Shopify Liquid. Appending these to each One Click link means Grapevine Surveys can attribute every response to a specific customer and order.
Take each One Click link from Grapevine Surveys and append the following parameters to the end:
&email={{ customer.email }}&first_name={{ customer.first_name }}&last_name={{ customer.last_name }}&customer_id={{ customer.id }}&order_id={{ id }}So a link that starts like this:
https://yourstore.myshopify.com/tools/survey/one-click/[survey-code]/[question-code]?answer=0
Becomes this:
https://yourstore.myshopify.com/tools/survey/one-click/[survey-code]/[question-code]?answer=0&email={{ customer.email }}&first_name={{ customer.first_name }}&last_name={{ customer.last_name }}&customer_id={{ customer.id }}&order_id={{ id }}Repeat this for each of the 11 links (scores 0 through 10).
Please note:
URL parameters are optional. If you leave them out, the survey will still record the response, but it will be anonymous.
For full details on available Shopify Liquid objects, see Using Shopify objects within your on-site survey URL.
Adding the survey to your order confirmation email
In your Shopify admin, go to Settings and then Notifications.
Click Customer notifications.
Under the Order processing section, click Order confirmation.
Click Edit code to open the HTML editor.
In the Email body (HTML) area, scroll towards the bottom of the code and locate the line
<table class="row footer">. Click at the end of the</table>line immediately above it to place your cursor there, press Enter to create a new line, and paste the example HTML code in. This will place the survey just above the footer at the bottom of the email, after all the order details. Take care not to accidentally overwrite or remove any surrounding code.Click Save and use the Preview option to confirm the survey displays correctly.
Adding your survey links
In the code block below, each button is marked with a placeholder like ***PASTE_YOUR_SCORE_0_LINK_HERE***. Replace it with the link you created above for that score. The number in the placeholder tells you exactly which link goes where.
Each placeholder sits between quotation marks inside an href attribute. Replace only the placeholder text, keeping the quotation marks either side:
Before:
<a href="***PASTE_YOUR_SCORE_0_LINK_HERE***" ...>
After:
<a href="https://yourstore.myshopify.com/tools/survey/one-click/abc123/def456?answer=0&email={{ customer.email }}&..." ...>What it will look like
Your survey block will look something like this when it appears in the email:
Example HTML code
<table align="center" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; background: #ffffff; border: 1px solid #eeeeee; border-radius: 2px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #2c2c2a; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
<tbody>
<!-- Intro text -->
<tr>
<td style="font-size: 16px; line-height: 160%; padding: 25px 25px 0 25px;">
<p style="margin: 0;">To help us provide you the best experience possible, we would love your feedback.</p>
</td>
</tr>
<!-- NPS Survey Block -->
<tr>
<td style="padding: 25px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; background-color: #f2f4f8; border: 1px solid #d9dbde; border-radius: 3px;">
<tbody>
<!-- Question -->
<tr>
<td style="font-size: 15px; padding: 16px; color: #2c2c2a;">
On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?
</td>
</tr>
<!-- Labels -->
<tr>
<td style="padding: 0 16px 4px 16px;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; color: #a5a5a5; font-size: 13px;">
<tbody>
<tr>
<td align="left">Not at all likely</td>
<td align="right">Extremely likely</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Score buttons 0-10 -->
<tr>
<td style="padding: 0 16px 16px 16px;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; text-align: center;">
<tbody>
<tr>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_0_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">0</a></td>
<td style="width: 4px;"> </td>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_1_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">1</a></td>
<td style="width: 4px;"> </td>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_2_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">2</a></td>
<td style="width: 4px;"> </td>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_3_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">3</a></td>
<td style="width: 4px;"> </td>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_4_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">4</a></td>
<td style="width: 4px;"> </td>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_5_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">5</a></td>
<td style="width: 4px;"> </td>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_6_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">6</a></td>
<td style="width: 4px;"> </td>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_7_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">7</a></td>
<td style="width: 4px;"> </td>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_8_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">8</a></td>
<td style="width: 4px;"> </td>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_9_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">9</a></td>
<td style="width: 4px;"> </td>
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_10_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">10</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Thank you -->
<tr>
<td style="font-size: 16px; line-height: 160%; padding: 0 25px 25px 25px;">
<p style="margin: 0;">Thank you, we really appreciate it!</p>
</td>
</tr>
</tbody>
</table>
Testing your email
Before your order confirmation goes live, send a test to confirm everything is working correctly.
Use Shopify's Preview option to check the survey block renders as expected.
Place a test order on your store to trigger a real order confirmation email and click one of the score buttons.
Check within Grapevine Surveys to confirm the response was recorded correctly, with the customer and order data attached.
If a link does not work, double-check that the full URL has been correctly pasted and that no characters have been accidentally removed.
After a customer clicks
When a customer clicks a score button in the email, one of the following will happen depending on your survey configuration:
If the survey has further questions, the customer is taken to a page on your store to complete them. Their score is automatically recorded from the One Click link and does not need to be re-selected.
If the survey has only one question, the customer is shown a Thank You page on your store.
Tip: If a customer clicks more than one score button, each click will be recorded as a separate response. To prevent this, enable the Only capture one response per customer setting under the Settings tab in Grapevine Surveys.
Need any help?
If you have any questions about this guide or anything else Grapevine Surveys related, please do just get in touch.