Order status JavaScript asset

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.

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

You can add custom content to your order status page with the Shopify.Checkout.OrderStatus order status JavaScript asset, such as the following examples: - notes on specific products - instructions for individual shipping methods - download links for digital products

To add this Javascript asset from your Shopify admin, go to Settings > Checkout. Scroll down to the Order status page section, and then add the Javascript asset into the Additional scripts box.

This JavaScript asset can also be accessed through ScriptTag.

How it works

Shopify.Checkout.OrderStatus contains a function for generating new content:

addContentBox(params)

This function adds a content box where each parameter passed into the function is rendered as a separate row.

HTML5 is supported inside the function and you can use liquid outside of the function.

Example

You can add content when a particular shipping method has been used. This code adds the store's operating hours to the order status page when a customer choose the pick-up in store shipping method.

<script>
  {% if checkout.shipping_method.title == 'Pick-up at the store' %}
    Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Pick-up in store</h2>',
     '<p>We are open everyday from 9am to 5pm.</p>'
    )
  {% endif %}
</script>