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 expert if you are not comfortable proceeding with the following tutorial.

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>