Displaying content on your order status page based on criteria

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify Partner if you are not comfortable proceeding with the following tutorial.

Note

Additional scripts to customize the order status page are deprecated.

Merchants on the Basic, Shopify, and Advanced plans can make customizations to the order status page using the checkout and accounts editor. Shopify Plus merchants can use Checkout Extensibility to customize their order status page.

You can display content on your order status page based on the following criteria:

• your customers' locations
• an order for a particular product
• a shipping method

Display content based on customers' locations

You can add a custom message to the order status page that is displayed only to customers with shipping addresses in a certain region. For example, you can choose to display a message only to customers who live in New York, USA. You can specify as many locations as you like.

Steps:

Desktop

1. From your Shopify admin, go to Settings > Checkout.
2. In the Additional scripts text box, paste the following sample code:

<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>

1. Edit the code to specify where customers must be to receive the custom message. To do this, you need to edit the country and state abbreviations inside the Liquid {% if %} statement at the top of the code block. The message in the example above is set to display for customers who live in New York, USA.
   • To display the message to customers in a different state, replace NY with the state abbreviation of your choice. To find the postal abbreviation to use for a US state, you can check this list of state abbreviations from USPS.
   • To display the message to customers in New York as well as another state, add and checkout.shipping_address.province_code == 'XX' where XX is the state abbreviation of your choice. To add more states, repeat this step.
   • To display the message to customers in a different country, replace US with the country abbreviation of your choice. You also need to replace NY with a state or province abbreviation in the new country. If you prefer not to specify a state, then delete the following: and checkout.shipping_address.province_code == 'NY'.
   • For additional guidance on writing Liquid if statements, see the Liquid reference on Control flow tags.
2. Place a test order to view the results on the order status page.

Display content based on an order for a particular product

Learn how to iterate through your checkout.line_items to see if your special product is in the order.

Steps:

Desktop

1. From your Shopify admin, go to Settings > Checkout.
2. Scroll down to the Additional scripts section.
3. Copy the following code to your clipboard (command + c on a Mac, ctrl + c on a PC).

<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>

1. Paste the code into the Additional scripts box. (press ctrl + V on a PC or command + V on a Mac)
2. Complete a test order to view your order status page.

Display content based on shipping method

You can use a conditional script with the variable checkout.shipping_method.title to display content on the order status page when a particular shipping method has been used for an order.

For example, you might have pickup in store for customers who live close enough to your brick and mortar store. You can give them the retail address of your store on the order status page if they select the in-store pickup option.

Steps:

Desktop

1. From your Shopify admin, go to Settings > Checkout.
2. Scroll down to the Additional scripts section.
3. Copy the following code to your clipboard (command + c on a Mac, ctrl + c on a PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Paste the code into the Additional scripts box. (command + v on a Mac, ctrl + v on a PC)
2. Complete a test order to view your order status page.