Below you'll find a variety of useful snippets and techniques that you can use to customize the Shopify Order Confirmation page (AKA the "Order Status" page).

The Shopify Order Confirmation page from Splendid Spoon
The Shopify Order Confirmation page from Splendid Spoon

In this guide:

  1. A wrapper script to fire custom conversion / ad pixels only on the first page load
  2. Add a custom message to checkout confirmation
  3. Customize the messages / placeholder text in the checkout
  4. Add an optional, one-click survey question to the Confirmation Page
  5. How to test customizations made to the Order Confirmation page

When do customers see the Order Confirmation page?

Your customers will see the Shopify Order Confirmation page in two locations on their Customer Journey:

1. When a customer first completes their order (this is when Conversion Pixels and Scripts should fire).

2. When a customer comes back to check on the status of their order and shipping information. Shopify's default Order Confirmation and Shipping Confirmation emails include a "Track my shipment" button that takes them back to the Order Confirmation page.

The Shopify Shipping Confirmation email from Stasher reusable storage bags
The Shopify Shipping Confirmation email from Stasher reusable storage bags

Customizing your Shopify Order Confirmation page

1. A wrapper script to fire custom conversion / ad pixels only on the first page load


For most conversion / ad pixels that you add to your store, you'll want to ensure that they only fire the first time a customer arrives on the Order Confirmation page.

If the following custom code is not added, your conversion scripts / pixels will fire each time a customer visits to see the status of their order. This can cause lots of confusion for fellow Marketers and there's no easy way to reverse the damage once duplicate transaction data has been sent to external ad platforms.

The fix is straightforward, wrap your conversion scripts / pixels in this official Shopify snippet.

Add this content to the "Confirmation Scripts" section of Checkout Settings – yourstore.shopify.com/admin/settings/checkout

Add conversion scripts / pixels in the Shopify Admin panel
Add conversion scripts / pixels in the Shopify Admin panel

Heads Up: There's no built-in version control on this content in the Shopify admin panel, so I highly recommend that you use GitHub Gists or a dedicated "Shopify Admin Content" GitHub repo to keep track of this Additional scripts content.

2. Add a custom message to checkout confirmation

Add a custom message box to the Shopify Order Confirmation page
Add a custom message box to the Shopify Order Confirmation page


To add a custom messaging section to the confirmation page, you can add the following script to the Additional scripts field in Checkout settings.

Note that this script would go in the "Scripts you want to run on every visit to confirmation page" section of the conversion script wrapper logic.

<script>
Shopify.Checkout.OrderStatus.addContentBox('<h2>Pick-up in store</h2>',
'<p>We are open everyday from 9am to 5pm.</p>')
</script>

This field supports liquid, so you can use snippets like Thanks again, {{ customer.name | default: "customer" }}!


Shopify provides some additional variations on this in their help center documentation:

3. Customize the messages / placeholder text in the checkout

Edit Order Confirmation page default text using the Shopify Language Editor
Edit Order Confirmation page default text using the Shopify Language Editor


Want to update the default copy in the Shopify checkout flow and Order Confirmation page?

There's no need to add custom HTML or JavaScript to update the default system text that appears throughout the checkout process. To customize messages / placeholder text throughout checkout, use the Shopify Language Editor.

This can be found under Online store > Themes > Actions > Edit languages

Here's a step-by-step guide to making changes to text on the Order Confirmation page.

4. Add an optional, one-click survey question to the Confirmation Page

An example post-purchase survey with the Enquire Shopify App
An example post-purchase survey with the Enquire Shopify App


I highly recommend the Enquire Shopify app for this: https://apps.shopify.com/enquire

If you're looking for more flexibility in survey logic, you can embed a TypeForm and pass through Shopify email + order ID as Hidden Fields. Example:

<a class="typeform-share button" href="https://YOUR-STORE.typeform.com/to/FORM-ID?order_id={{ order_number }}&email_address={{ order.email }}" data-mode="popup" data-auto-open=true data-hide-headers=true data-hide-footer=true data-submit-close-delay="5" target="_blank"> </a> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>

How to test customizations made to the Order Confirmation page

It's always a good idea to confirm the changes that you've made before sending customers through your checkout flow.

Each time you want to test a change that you've made to your Order Confirmation page, place an order with your personal credit card and then just cancel the order in the Shopify admin panel before the order is sent to be picked up for fulfillment.

Just kidding! Thankfully, there are a couple of tricks that we can use to avoid the need to place an order and cancel it. (We don't want to mess with our metrics / ad campaigns or get caught sending too many test shipments to 1600 Pennsylvania Avenue or 10 Downing Street.)

Test what an Order Confirmation page looks like for a specific customer's order:

If you're looking to simply preview what an Order Confirmation page looks like for a specific order, you can use a built-in Shopify feature available on all orders.

This is a great way to confirm visual changes that you may have made, like changes to the wording on the Confirmation Page, the addition of a post-purchase survey app like Enquire, etc.

When viewing any individual order, select "View order status page" from the "More actions" dropdown menu and you'll be able to see exactly what that customer sees when they click on the "Track my order" button in their Shopify Order Confirmation email.

View the Order Status page for an existing Shopify order
View the Order Status page for an existing Shopify order

An important note: No need to worry about throwing off your analytics or ad conversions by using this impersonation tool. Shopify's built-in Google Analytics and Facebook Pixel integrations will only fire on the customer's original visit to the Order Confirmation page.

As long as you're using the {% if first_time_accessed %} liquid helper, any additional scripts or pixels that you may be firing in the Additional scripts section of Shopify checkout settings will also be ignored when using this impersonation mode.

Test that your conversion scripts and/or Liquid variables are outputting correctly on the Order Confirmation page

Testing conversion scripts and verifying the output of Liquid variables without placing a test order requires us to get a bit more creative, but it's still a straightforward process.

As an example, let's imagine that you recently added an ad script or pixel that required you to pass through Order Total ({{ total_price | money_without_currency }}) and Order Number ({{ order_number }}).

To confirm that your Liquid tags will output the correct values when a customer hits the Order Confirmation page when they complete an order, you can output the values in a hidden div element on the page.

The trick here is to add the snippet that you want to test in the Scripts you want to run on every visit to confirmation page section of the confirmation scripts snippet.

Once these are added to the Additional scripts section of the Checkout settings, you can use the method above ("Test what an Order Confirmation page looks like for a specific customer's order") to view the confirmation page. Hit "View Source" and do a "Command/Control + F" for the unique ID ("search-for-me" in the snippet above) to see the values that will be output by the Liquid tags you've provided.

Looking for the "search-for-me" string in the Order Status page's source code
Looking for the "search-for-me" string in the Order Status page's source code

If the values are malformed or blank, it's likely that you have a syntax error in your Liquid tag. If the values match what you expect, you can remove the testing snippet, save the updated Additional scripts content, and you're all set!


Testing native Facebook + Google Analytics events:  The exception to the above is when you want to verify purchase events fired by either the native Shopify Google Analytics Ecommerce integration or the native Shopify Facebook Pixel integration.

Because those conversion pixels are fired outside of what's editable in the Additional scripts section of checkout, you'll need to make a live test order to confirm.

BTW, to get the most mileage out of your live test order, be sure that you have the Facebook Pixel Helper and Google Analytics Debugger Chrome extensions installed + activated before placing your test order.


Hire a developer to make customizations to the Order Confirmation page

If you're looking to make a customization to the Shopify Order Confirmation / Order Status page that isn't listed here, send an email to us at behindthecheckout[at]lebel.io – there's a good chance we can help you out.