How do I show Supertime date and time information in my order status page?

Do you want to show the date/time a customer has picked on their Order Status page?

You can show the selected date, time and delivery method for a customer's order on the post-checkout confirmation page by using Shopify's Additional Scripts feature. Paste the following snippet into the Additional Scripts box on your Checkout settings page:

{% if order.attributes %}
<script>
SupertimeOrder = {
  deliveryMethod: "{{ order.attributes["Supertime Delivery Method"] }}",
  deliveryDate: "{{ order.attributes["Supertime Delivery Date"] }}",
  timeslot: "{{ order.attributes["Supertime Timeslot"] }}"
};
</script>
<script async src="{{ "https://getsupertime.com/supertime.js?shop=" | append: shop.permanent_domain }}"></script>
{% endif %}

Optionally, if you want to customize the "Delivery Details" title text, the "Delivery Method" text and add your own instructions text, use this snippet and add your own text:

{% if order.attributes %}
<script>
SupertimeOrder = {
  deliveryMethod: "{{ order.attributes["Supertime Delivery Method"] }}",
  deliveryDate: "{{ order.attributes["Supertime Delivery Date"] }}",
  timeslot: "{{ order.attributes["Supertime Timeslot"] }}",
  deliveryDetailsText: "Order Pick-up and Local Delivery Instructions",
  additionalInstructionsText: "We will be in touch to confirm your availability.",
  deliveryMethodText: "Delivery Zone:"
};
</script>
<script async src="{{ "https://getsupertime.com/supertime.js?shop=" | append: shop.permanent_domain }}"></script>
{% endif %}

Steps:

  1. Visit your Checkout Settings page.
  2. Scroll down to the Additional Scripts section.
  3. In the Additional Scripts text box, paste in the code snippet shown above. Your "Additional Scripts" section should now include this snippet and look something like this:

    Click the Save button at the bottom of the page to save your settings.

You may also customize your Order Confirmation page using Additional Scripts in a more custom manner using these liquid variables:

  • Date: {{ attributes["Supertime Delivery Date"] | date: format: "basic" }}
  • Time (24 hour time): {{ attributes["Supertime Timeslot"] }}
  • Time (12 hour time or custom time formats):{{ attributes["Supertime Timeslot"] | slice: 0,4 | time_tag '%-I:%M %p' }} - {{ attributes["Supertime Timeslot"] | slice: 8,12 | time_tag '%-I:%M %p' }}
  • Delivery Method: {{ attributes["Supertime Delivery Method"] }}

Refer to this article in the Shopify Help Center for additional details.