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>