Optimize your Shopify Order status page (without Shopify Plus)

The Order status page is when your customers land when they complete their order. At first sight, this page is not customizable for non-Shopify Plus owners. However, on the /admin/settings/checkout section, you have a field called Additionnal scripts :

Here, you can add specific scripts - usually, that's also where you want to put conversion tracking scripts, to trigger the conversion or referrals.

But you can also add content to the Order Status page! It's the page customers will see just after completing their order, and that's particularly interesting for several scenarios : they're the most engaged at this moment, and the fact they're purchased a product is just the beginning.

This checkout page is not a thank you page - it's an opportunity!

Using this formula, you'll be able to add a box of your own on the page :

<script>Shopify.Checkout.OrderStatus.addContentBox(    '<h2>Title of the box</h2>',    '<p>Content of the box</p>'      ) </script>

While doing it, you have access to several liquid objects here : checkout & shop.

That can be useful for several scenarios. For instance, the main example Shopify use is based on the location of the customer, proposing him to check the retail stores :

‍

Other uses cases could be :

Send people to a feedback survey just after their purchase, tracking their identity via Typeform

For this, in Typeform, make sure to use hidden fields 😉

For the styling, we're adding a button in the new created box.

<script>
   Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>Welcome in the community!</h2>',
    '<p>We would love to have<a href="https://your.typeform.com/to/xxxx?firstname={{ checkout.customer.first_name }}&email={{ checkout.email }}&code={{ checkout.order.order_name }}">your feedback</a></p><a href="https://your.typeform.com/to/xxxxx?firstname={{ checkout.customer.first_name }}&email={{ checkout.email }}&code={{ checkout.order.order_name }}" style="display: inline-block!important; margin: 1em;padding: 5px 12px !important;min-height: 28px !important;min-width: 120px !important;font-size: 1.06667em;border-radius: 2px;background-color: red;color: #000;font-weight: 500;font-style: normal;letter-spacing: 0.1em;text-transform: uppercase;line-height: 1.8;text-decoration: none;text-align: center;vertical-align: middle;">let-a-go!</a>'
   )
</script>

Using the same kind of script, that's also a great way to introduce them to a referral program ✌️

Display something special for a particular product

<script>
 {%for line in checkout.line_items %}
// DEBUG looking at {{ line.title }}
   {%if line.title == 'Title of your product' %}
     Shopify.Checkout.OrderStatus.addContentBox(
       '<p>Wow, you just bought _______! We are thrilled - did you know that _______? </p>'
     )
   {% endif %}
 {% endfor %}
</script>

‍

‍

‍