An often overlooked part of the ecommerce experience is the order status page, which offers a unique opportunity to connect with customers. Although the sale has already taken place by the time customers land on this page, it is still a crucial step on a customer’s journey, and a critical touchpoint for your client’s brand.
The order status page is important, not only because it allows your clients to thank the customer for their purchase, but also because it can inform the customer about delivery methods, times, and who to contact if they have questions regarding their order. Savvy developers will be able to optimize this page to present a memorable experience for customers.
Since the order status page is not associated with a theme, it’s easy to miss when working on a client's store. While there are some limitations to this page, with careful use of Liquid and JavaScript, it’s possible to extend the page’s functionality and display personalized content.
Using Liquid in the additional scripts box will allow you to access the checkout and shop Liquid objects. This empowers clients to display specific messaging on the order status page and inform or support their customer following a purchase.
In this article, I’ll demonstrate practical ways to customize this page, by providing customers with a personalized experience based on what products they purchased, or where they’re shipping to. I’ll also show you how the order status page can improve the accuracy of your clients’ analytics.
And be sure not to miss how the release of order editing will impact app developers.
The additional scripts box
The first step in customizing the order status page is to understand how code is injected onto this non-theme page. The additional scripts box is a key component for customizing the order status page. This is found in the Checkout section of the admin. This box is used to insert code into the template for your order status page.
The most common use for the additional scripts box is to add scripts for conversion tracking purposes, but it’s possible to add other functionality to the order status page by entering code into this box. You can add any of the following:
- HTML
- Liquid
- JavaScript
It’s important to note that Shopify will automatically validate the Liquid code in the additional scripts box, so if there’s a Liquid error, your changes will not save. Before adding HTML or JavaScript, however, it’s highly advised that you validate and test your code enterally before adding it in, to ensure the checkout functions correctly.
Jason Bowman echos this advice in a blog article on adding Javascript to Shopify Checkout.
“Don't attempt to add JavaScript to your Shopify checkout using this method if you are not painfully aware of how to do it, and the potential risk it brings,” he writes.
If you are familiar with JavaScript, however, there’s a range of customizations which could suit your client’s requirements.
In these tutorials, we’ll be using Shopify’s Order status JavaScript asset in the additional scripts box. This allows developers to generate content boxes according to Liquid logic statements.
Landing pages are also a critical part of marketing your client's business. Learn more about how to build a custom landing page. Or, lean more about what a canonical URL is and why they're so important.
Displaying a discount code for particular products on the order status page
One of the most useful applications of the additional scripts box is to display specific content depending on certain conditions of an order. Adding this level of personalization makes the sales flow more specialized, and an unexpected gesture of goodwill can encourage repeat sales.
For example, a client might like to offer a discount code following the purchase of a particular product. Using JavaScript and Liquid logic, it’s possible to output specific content when a particular product has been purchased.
To achieve this effect, we need to create a script which generates a content box when specific parameters are triggered. In this case, the parameter will be the product title, and the script could look like this:
Following the opening <script> tag, we can see that a for tag will repeatedly execute the subsequent block of code according to the line items of the checkout. This will iterate through our checkout.line_items to see if the special product is in the order.
Using control flow tags with the line.title attribute, we are looking for a product with a title of 'Red Sports Tee'. If a product in the checkout matches this, a content box is generated using the Shopify.Checkout.OrderStatus JavaScript asset.
We can apply some basic HTML formatting within this content box, and I’ve used an <h2> tag to apply a header, as well as paragraph tags. In this example, I’m adding a friendly message with a discount code, but this could be personalized to match your client’s requirements.
When a customer checks out with this Red Sports Tee product, the order status page we’ve customized will appear like this:
It’s also possible to use different Liquid objects and attributes to set up similar conditional content for different situations. For example, if your client offers in-store collection, you could display the retail address on the order status page, but only if they select the local pickup option.
In that case, you could use the checkout.shipping_method.title attribute with control flow tags to output content based on the chosen shipping method. Our help docs show how this could be set up.
It’s worthwhile to examine your client’s unique business model to see what kind of content you could add to the add to the order status page to bolster your client’s business. By using the right copy here, you can establish your client’s brand at the final point in a sale.
Displaying content on the order status page based on location
Occasionally, clients will have messaging that is specific to where their customers are located. For example, your client could have physical locations in a number of countries or cities, and would like to invite nearby customers to their store.
Using Liquid attributes, we can identify the country, and even the state, selected during the checkout process. With these attributes, we can set up conditional Liquid tags to output location-specific content when a customer selects a particular location.
A key attribute here is checkout.shipping_address.country_code, which outputs the country a customer selects for shipping during checkout. What is interesting about this attribute is that it returns the value of the country field of the address in ISO 3166-2 standard format. These codes are all two letters, and the code for each country is found on the ISO website.
Using codes like these saves time and avoids errors, because instead of using a country's name, which could change depending on the language being used, we can use a combination of letters that are understood all over the world.
Another key attribute is checkout.shipping_address.province_code, which will allow us to identify a state or province. To find the postal abbreviation to use for a US state, you can check this list of state abbreviations from USPS.
Again, we’ll be using the order status JavaScript asset to generate a content box, along with our Liquid control flow tags and attributes. As an example, I’ve created two scenarios during which the content box would appear on the order status page.
In the first function, if a customer selects the US as their shipping country and New York as the state to ship to, the content box will appear with a message regarding a brick and mortar store on 5th Avenue. By combining the two Liquid attributes for country code and state code, we can get quite precise with localized messaging.
In the second function, we use elsif to extend this script and create an additional condition. If a customer selects United Kingdom, different content is loaded with a link to a map where a customer could locate their nearest store.
Also note here that the ISO code for the UK is ‘GB’. It’s important to double-check with the the ISO website to ensure you have the correct ISO code for the country you need to create a custom message for.
Now, when a customer checks out and selects a New York address, they will see this message:
While if they select anywhere in the UK, they will see this message:
As you can see, it’s possible to use Liquid’s control flow tags when creating more complex functions. If your client needed to, a different message could be created for as many countries or states as desired.
You might also like: Working with Product Variants When Building a Shopify Theme.
Using Liquid to run scripts only once on the order status page
This final tutorial will not make the order status page appear any different, but it will improve the accuracy of your client’s store analytics. It also demonstrates how versatile the additional scripts box is when adding Liquid.
Very often a customer may revisit the order status page to check their order or shipping details. If your client is running sales conversion tracking scripts, return visits might count as a second sale in their analytics.
To overcome this, we can use Liquid tags with the first_time_accessed property around the conversion tracking scripts. With the first_time_accessed inside a liquid logic statement, Shopify will run your scripts only the first time your customers see their order status page.
This could appear on the Additional scripts box like this:
If you want a script to run only on the first time that the order status page is accessed, then paste it between the {% if first_time_accessed %} and {% endif %} tags. If you want a script to run every time the order status page is accessed, then paste it below the {% endif %} tag.
Another application of this property could be to run a script only on return visits to the order status page. One of the main reasons a customer would revisit this page would be to check on their shipping details. If content could load with an option to contact your client in case of any questions, this could improve the post-sale customer experience.
This is achieved by simply creating an unless Liquid logic statement, which could look like:
Once this is added, a customer would see this message when they revisit the order status page:
An additional message can reassure customers, and this level of attention to customer care could lead to repeat purchases. As you can see, the first_time_accessed Liquid property can be used in creative ways on the order status page.
Customizing with care
The additional scripts box is a powerful tool in the sales flow, and careful use of Liquid can improve your client’s store. However, when inserting code into the order status page, it’s important to validate your HTML and JavaScript before adding it to the checkout.
As long as the code is tested and confirmed to be safe, you can create memorable experiences for your client’s customers. Hopefully with the help of this article, working with this feature will be a little bit easier.
