If you would like to remind your customers of the selections they made in the widget, you can add their pickup/delivery/shipping information to the order status page.
You can change the text in the template to match your needs, or translate it to another language. If you are using a language other than English, please take a look at our Template for different languages.
Add the template
In your Shopify admin, click Settings, and then Checkout.
In the Order status page section, add the code below into the Additional scripts box.
<script>
{% if order.attributes.Pickup-Date and order.attributes.Pickup-Time %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Pickup Information</h2>',
'<p>Your order will be ready for collection at our {{ order.attributes.Pickup-Location-Company }} location on {{ order.attributes.Pickup-Date | date: "%A, %d %B" }} at {{ order.attributes.Pickup-Time }}</p>'
)
{% elsif order.attributes.Pickup-Date %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Pickup Information</h2>',
'<p>Your order will be ready for collection at our {{ order.attributes.Pickup-Location-Company }} location on {{ order.attributes.Pickup-Date | date: "%A, %d %B" }}</p>'
)
{% elsif order.attributes.Checkout-method == "pickup" %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Pickup Information</h2>',
'<p>Your order will be ready for collection at our {{ order.attributes.Pickup-Location-Company }} location.</p>'
)
{% elsif order.attributes.Delivery-Date and order.attributes.Delivery-Time %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Delivery Information</h2>',
'<p>Your order will be delivered locally by our team on the {{ order.attributes.Delivery-Date | date: "%A, %d %B" }} between {{ order.attributes.Delivery-Time }}</p>'
)
{% elsif order.attributes.Delivery-Date %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Delivery Information</h2>',
'<p>Your order will be delivered locally by our team on the {{ order.attributes.Delivery-Date | date: "%A, %d %B" }}</p>'
)
{% elsif order.attributes.Checkout-Method == "delivery" %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Delivery Information</h2>',
'<p>Your item will be delivered locally by our team. Contact us for more details on exact delivery dates/times.</p>'
)
{% elsif order.attributes.Shipping-Date %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Shipping Details</h2>',
'<p>Your order will arrive on the {{ order.attributes.Shipping-Date | date: "%A, %d %B" }}</p>'
)
{% endif %}
</script>Click Save.
The information the customer selected in the widget will now be added to the Order status page.
Due to Shopify limitations, the information may not show up straight away—the order might not be created yet when the order status page is generated. To make sure the information shows, your customers will need to refresh the page.
Store Pickup
Local delivery
Shipping
Template for different languages
In the template above, the attributes will always be in a format Day, DD Month (e.g. Wednesday, 27 April), regardless of the language you use. That is why you need to change the date format for our attributes when you're using other languages.
You can use the template below which uses the DD/MM/YYYY format or find the format that suits you at http://strftime.net.
If you would like to use another format, search for %d/%m/%Y in the template below, and replace it with the format you need. It needs to be changed on lines 5, 10, 20, 25 and 35.
Instead of date: "%d/%m/%Y" (23/04/2022), you would use date: "%m-%d-%Y" (04-24-2022)
<script>
{% if order.attributes.Pickup-Date and order.attributes.Pickup-Time %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Pickup Information</h2>',
'<p>Your order will be ready for collection at our {{ order.attributes.Pickup-Location-Company }} location on {{ order.attributes.Pickup-Date | date: "%d/%m/%Y" }} at {{ order.attributes.Pickup-Time }}</p>'
)
{% elsif order.attributes.Pickup-Date %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Pickup Information</h2>',
'<p>Your order will be ready for collection at our {{ order.attributes.Pickup-Location-Company }} location on {{ order.attributes.Pickup-Date | date: "%d/%m/%Y" }}</p>'
)
{% elsif order.attributes.Checkout-method == "pickup" %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Pickup Information</h2>',
'<p>Your order will be ready for collection at our {{ order.attributes.Pickup-Location-Company }} location.</p>'
)
{% elsif order.attributes.Delivery-Date and order.attributes.Delivery-Time %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Delivery Information</h2>',
'<p>Your order will be delivered locally by our team on the {{ order.attributes.Delivery-Date | date: "%d/%m/%Y" }} between {{ order.attributes.Delivery-Time }}</p>'
)
{% elsif order.attributes.Delivery-Date %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Delivery Information</h2>',
'<p>Your order will be delivered locally by our team on the {{ order.attributes.Delivery-Date | date: "%d/%m/%Y" }}</p>'
)
{% elsif order.attributes.Checkout-Method == "delivery" %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Delivery Information</h2>',
'<p>Your item will be delivered locally by our team. Contact us for more details on exact delivery dates/times.</p>'
)
{% elsif order.attributes.Shipping-Date %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Shipping Details</h2>',
'<p>Your order will arrive on the {{ order.attributes.Shipping-Date | date: "%d/%m/%Y" }}</p>'
)
{% endif %}
</script>
Limitations
Due to Shopify limitations, the information your customers selected in the widget may not show up straight away—the order might not be created yet when the order status page is generated. To make sure the information shows, your customers will need to refresh the page.