Order status JavaScript asset

This page was printed on Mar 29, 2023. For the current version, visit https://help.shopify.com/en/manual/orders/status-tracking/customize-order-status/order-status-javascript-asset.

You can add JavaScript to the order status page of your checkout using the Additional scripts box in your Shopify admin.

The Shopify.Checkout.OrderStatus JavaScript asset can be used to add many types of content to your order status page, including:

  • notes on specific products
  • instructions for individual shipping methods
  • download links for digital products.

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:

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

Ready to start selling with Shopify?

Try it free