If you would like to remind your customers of the selections they made in the widget, you can add their pickup/delivery/shipping information and a delivery note to the order status page.
Merchants on Starter, Basic, Shopify or Advanced Shopify plans have the ability to add Zapiet - Pickup + Delivery information to the status page by adding a code snippet.
Merchants on Shopify Plus plan have the ability to enable the order status widget.
Enable order status widget with a code snippet
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 section.
Merchants on Starter, Basic, Shopify or Advanced Shopify plans have the ability to add Zapiet - Pickup + Delivery information to the status page by adding a code snippet.
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
Add the delivery note template
You can add the delivery note that the customer left in our widget to the order status page.
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['Delivery-Note'] %}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Delivery Note</h2>',
'<p>{{ order.attributes["Delivery-Note"] }}</p>'
);
{% endif %}
</script>Click Save.
The delivery note that customer added 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.
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.
Order status widget
Merchants on Shopify Plus plan have the ability to enable the order status widget.
Requirements
You need to be on the Shopify Plus plan.
In Online Store > Themes tab, click Customize next to the theme you want to edit.
Click Home page, then Checkout.
Click Checkout, then Thank you.
Click Add app block.
Click the Order status widget by Zapiet - Pickup + Delivery to enable our widget.
You will see our widget at the order status page.
Click Save.
The order status extension widget is now enabled on your store.
