All Collections
Zapiet - Pickup + Delivery
Advanced
Adding information selected in the widget to the order status page
Adding information selected in the widget to the order status page
Jelizaveta avatar
Written by Jelizaveta
Updated over a week ago

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

  1. In your Shopify admin, click Settings, and then Checkout.

  2. 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>

  3. 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.

Did this answer your question?