The Order Status Page, also known as the Order Confirmation Page, is a final screen that customers see after completing a purchase. It contains essential details such as order number, shipping status, and estimated delivery date. By customizing the order status page, store owners improve customer satisfaction, strengthen brand identity, and simplify order tracking for customers to obtain the right information. This includes modifying the layout, adding personalized messages, and integrating design elements.
Why Customize the Order Status Page on Shopify?
The order status page is the final page in your store's checkout process. This page allows customers to track their orders and view order information.
However, the order status page is more than just a digital receipt. Optimizing it can improve user experience, strengthen your brand identity, and increase customer retention. Since shoppers are most attentive at this stage, it is an ideal moment to highlight related products, upsells, or social proof.
Order Tracking: Keep customers informed with real-time updates related to their order status. This transparency reduces the need for customers to contact support for order status inquiries.
Customize Message: Merchants add more personalized messages, branding, promotional content, and other information to drive engagement, like newsletter sign-ups.
Marketing Opportunities: Promote related products, offer discount codes, and provide limited-time offers directly after checkout.
Customer Feedback: Embed forms or prompts to collect feedback from customers about their shopping experience, which is valuable for improving the product or service.
Customer Support: Provide clear links or contact options so customers can quickly reach out if they have issues or questions about their order for assistance.
How to Customize Order Status Page on Shopify?
To customize the order status page on Shopify, go to your Shopify admin dashboard and click Settings at the bottom left. Then, select Checkout to access and modify the order status page.
- Enable Order Updates
- URL to Order Status Page
- Translate Order Status Page
1. Enable Order Updates
If you want to send real-time notifications to customers when their order status changes. This includes automated emails, SMS, or push notifications that inform customers about order processing, shipping, and delivery. These notifications often have links to a tracking page where customers can view live updates and estimated arrival times.
From your admin panel, go to Settings>Checkout section, tick Show a link for customers to track their order, and click Save to apply it.
2. URL to Order Status Page
The URL to the order status page is a specific web address containing an ID that customers use to check the status of their order. This URL directs to a page where customers enter their order number and email address to retrieve detailed information about their order. Shopify merchants share this URL in order confirmation emails.
3. Translate Order Status Page
Translate the order status page text and content to different languages. If you have already changed the Shopify theme language, then the page is already in the chosen language. However, you can modify the specific branding line like “Thank You For Order” into “Thanks For Ordering”. These changes are done through the status field under Checkout and the system tab, in your Shopify admin dashboard.
Additionally, there are apps available on the Shopify App Store that enhance customization of the order status page. These apps help you add more functionality and design options beyond what is available through Shopify's native settings, providing more extensive checkout customization options.
Is There Any Other Method to Customize the Order Status Page?
Yes, you can also customize the order status page by using the Order Status API. This allows you to modify the page by adding custom messages, functionality, and integrating additional resources. This API integration provides flexibility to offer a more personalized and informative order status page. You can insert custom scripts or HTML to include custom thank you messages, promotional offers, or additional information relevant to the customer. Once you've made the changes, test them to ensure they work as well.
How To Add a Custom Script to the Order Status Page?
Adding a custom script involves adding code to the order status page setting. This allows store owner to implement personalized functionalities, such as custom tracking, analytics, promotional messages, or integrations with third-party services, according to their specific business needs. But, this requires knowledge of the programming languages HTML, CSS, JavaScript, and Liquid.
This customization is done through the Shopify Admin Dashboard> Checkout. Find the additional script section and paste your custom script into the Additional scripts box.
Below are some custom scripts you can add to in order status page.
Show content based on user location. This script changes the content on the page based on the user’s location. Paste this code in an additional script box.
<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>YOUR TITLE HERE</h2>',
'<p>YOUR MESSAGE HERE</p>'
)
{% endif %}
</script>
Showing content for a specific product will display product-specific information on the order status page.
<script>
{% for line in checkout.line_items %}
// DEBUG looking at {{ line.title }}
{% if line.title == 'Downloadable product' %}
Shopify.Checkout.OrderStatus.addContentBox(
'<p>Download your product <a href="#">Here!</a></p>'
)
{% endif %}
{% endfor %}
</script>
Add a promo code to the order status page for customers to take advantage of discounts or promotions to boost sales. To add a promo code on the order status page, paste this script in an additional script box.
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<p>Save 15% on your next purchase! Use code SAVE15 at checkout</p>'
)
</script>
How to Restore a Previous Version of the Order Status Page
Revert the order status page to an earlier version of the page layout, content, or design after changes have been made. This is used to undo recent changes and return the page to a previous saved state, ensuring the page shows earlier configurations and functionality.
This action is performed when recent changes cause issues or dissatisfaction with the current version of the page. By reverting to a previously saved state, you can resolve the problems that arise from recent changes and ensure that the page works smoothly.
In the Shopify admin dashboard, navigate to Settings>Checkout. In the additional scripts section, click on revert to undo the changes. Then select the reason to revert the changes and click on Revert.