How to add content to the Shopify order status page

There comes a time when you need to provide additional information to the customer after completing their purchase, and the Shopify order status page is the perfect place to add it.

It’s surprising how many developers are unaware of this quick solution that allows you to display any information you want using a bit of JavaScript. I’ve added things like:

• A direct debit form
• Special offers
• Delivery information
• Public holiday store open and closing times
• Content within an iframe

Adding content is as simple as inserting the javascript below into the checkout scripts setting in the Shopify admin.

<script>
  // You can display messages depending on the shipping method by
  // wrapping the code in an if statement.
  {% if checkout.shipping_method.title == 'Pick-up at the store' %}
    // This function is where all the magic happens.
    Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Pick-up in store</h2>',
     '<p>We are open every day from 9am to 5pm.</p>'
    );
  {% endif %}
</script>

Below are a few different examples of how to display content.

Display a block containing delivery, store or click-and-collect information.

This example displays simple headings, paragraphs and a bulleted list. You can also add some basic styling to the content with some CSS.

<script>
  Shopify.Checkout.OrderStatus.addContentBox(
    '<h2 style="color:red;font-size:18px;font-weight:bold;">Pick-up in store</h2>',
    '<p>We are open every day from 9am to 5pm.</p>',
    '<p>Please bring the following with you:</p>',
    '<ul>',
    '<li>&check; A form of identification.</li>,
    '<li>&check; A copy of the order confirmation email.</li>,
    '</ul>'
  );
</script>

Display a special offer to first-time visitors.

This example displays a discount code to the customer after they have completed their purchase. Shopify has a tag, first_time_accessed, that can be used on the order status page. The discount code is not displayed when the customer returns to the order status page.

<script>
  {% if first_time_accessed %}
    Shopify.Checkout.OrderStatus.addContentBox(
      '<h2>Thanks for your order!</h2>',
      '<p>Get 10% off your next purchase with the code <strong>TENOFF</strong>.</p>'
    );
  {% endif %}
</script>

Display a feedback form.

An example of displaying a feedback form using an iframe. This could be a simple Google form or a service such as Survey Monkey.

<script>
  Shopify.Checkout.OrderStatus.addContentBox(
    "<h2>Thanks for your order!</h2>",
    "<p>We would be grateful if you could please complete this short survey about your recent shopping experience.</p>",
    '<iframe id="foo" src="https://foo.iamketan.design" style="height:500px;width:100%;"></iframe>'
  );
</script>

Final thoughts.

This feature has many different use cases, and it’s a great way to display extra information to the customer.