Signup

Adding information selected in the widget to the order status page

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, find the Additional scripts text box.
  3. 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>
  4. Click Save.

The information the customer selected it the widget will now be added to the Order status page. 

  • For pickup
  • For delivery

  • For shipping

Template for different languages

In the template above, the attributes will always say e.g. Wednesday, 27 April, regardless of the language you use. That is why the date format for our attributes needs to be changed. 

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.

E.g. 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>


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.