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:
- Visit your Checkout Settings page.
- Scroll down to the Additional Scripts section.
- 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.