SeedlogicSeedlogic
  1. Articles
  2. How to Add Custom Messages to Shopify Orders Page

Shopify

How to Add Custom Messages to Shopify Orders Page

Date Published: 6/11/2021

hero image

Last Updated: 6/11/2021

While Shopify provides a ton of features that allows each merchant to customize their store, they do limit the amount of access and functionality to the checkout and order confirmation pages. Unless you're on Shopify Plus, they restrict the checkout.liquid page entirely.

For both Shopify Plus and regular Shopify customers, there is a slick method for adding custom messages to the order confirmation page for your customers.

Why add a custom message?

There are several scenarios where a merchant might want to add a custom message:

  • They want to show a promo code after a customer makes a purchase to incentivize them to buy again

  • Their purchase requires further actions and a message needs to be displayed to show some information

  • To provide the customer location based actions such as picking up in store if they are located near a certain city or zip code

Adding a custom message

To add a custom message, you'll first need to find the Additional Scripts box located in Admin > Settings > Checkout.

Shopify additional scripts box

You are likely already familiar with this box as it's mainly used to place third-party tracking pixels that are activated when a customer makes a purchase.

To create a custom message we will use this function:

Shopify.Checkout.OrderStatus.addContentBox('html string here')

Example Scripts

Custom Promo Code

Say we want to build on the momentum of getting a sale by displaying a promo code to the customer after they ordered to incentivize them to buy again. We can use the following script:

<script>
      Shopify.Checkout.OrderStatus.addContentBox(
       '<p>Have a 10% discount on us! Use AWESOME18 with your next purchase</p>'
      )
</script>
example-order-scripts-1

Additional Order Details Alert

In some cases a purchase isn't the final action. Maybe a customer is required to fill out another document or continue through some other type of processing. An example may be a medical spa that needs a customer to fill out some sort of intake form that is outside of Shopify. In this case, we can show a special alert to that customer in their order screen:

<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2 style="font-weight:bold; color: white;">Thank you for your purchase!</h2>',
'<p>Complete this form prior to your visit.<br/><a style="font-weight:bold, color: white;" href="https://example.com">Visit Form</a></p>')
</script>
alert message on order page

Location-based Message

Say you have a brick and mortar store where your fulfillment originates or you just want to remind your local customers that you are near them. In this situation you may want to display a message based on the customer's shipping or billing address. In this example we'll add it some liquid that checks the customer's shipping address against location information such as in the US and province_code (city) NY. 

<script>
  {% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
  Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>Visit us in-store</h2>',
    '<p>Our store on 5th Avenue is open everyday from 9am to 5pm.</p>'
      )
  {% endif %}
</script>
location based message

You can read up more on updating the order status page here via Shopify.

If you'd like to read more on liquid operators you can visit this link or visit Shopify's liquid cheat sheet.

Code with Caution

As with any advanced technique there is the possibility for breaking changes to the order page which will cause an unfavorable user experience. Because there is no development or sandbox mode for a live site, it's always advised to test in a development store before adding code to your live site!

Recent Articles