Photo Proof of Delivery

You can use take photos to provide a Photo Proof of Delivery for your orders on EasyRoutes. This feature requires either a EasyRoutes Pro+ or a Growth plan. Learn about how to change or upgrade your plan to get access.

How it works

You can attach up to four proof of delivery photo to any stop with a Shopify order. Once your photos are taken and attached, EasyRoutes then provides URLs to the photos that are stored and accessible via an order's attributes (under Additional Details). You can then use these photos in your order delivery notifications.

Steps for Attaching a Photo Proof of Delivery:

  1. In a route page, open the Driver View and view a stop with an order
  2. Press on More -> "Attach Proof of Delivery"
  3. Press "Add photo":
  4. Take your photo with your device's camera. And confirm the photo that you want to use. 
  5. Press Attach. Your photo will begin uploading.
  6. Once your photo is uploaded, you will see this photo on your stop page in the driver view.

If you're running into issues with taking or uploading a photo, you likely need to update your mobile device's permission settings for access to the camera in your browser or in the Shopify App. Review Troubleshooting Steps for Proof of Delivery for more.

Integrating with your Email Notification Templates

You can show your Photo Proof of Delivery in any of your email notifications using Shopify's order attribute tags once the photo is taken and uploaded. Since it's for confirming a delivery, this works best with the Delivered or the Missed delivery notifications.

Here is a sample that you can copy and paste directly into your template:

<br>{% if attributes["EasyRoutes Delivery Photo"] %}
  <p>Proof of delivery:</p>
  <img src="{{attributes["EasyRoutes Delivery Photo"]}}"
       alt="EasyRoutes Delivery Photo"
       width="480">
  <p style="font-size: 12px">Powered by <a style="font-size: 12px" href="https://easyroutes.app/?utm_source=shopify&utm_medium=email&utm_campaign=pod">EasyRoutes</a></p>
{% endif %}<br>

Note: if you are using multiple photos then, the 2nd, 3rd and 4th photos can be added by replacing the "EasyRoutes Delivery Photo" attribute with "EasyRoutes Delivery Photo 2", "EasyRoutes Delivery Photo 3", "EasyRoutes Delivery Photo 4" like in this snippet below:

<br>{% if attributes["EasyRoutes Delivery Photo"] %}
  <p>Proof of delivery:</p>
  <img src="{{attributes["EasyRoutes Delivery Photo"]}}"
       alt="EasyRoutes Delivery Photo"
       width="480">
{% endif %}<br>
{% if attributes["EasyRoutes Delivery Photo 2"] %}
  <img src="{{attributes["EasyRoutes Delivery Photo 2"]}}"
       alt="EasyRoutes Delivery Photo 2"
       width="480">
{% endif %}<br>
{% if attributes["EasyRoutes Delivery Photo 3"] %}
  <img src="{{attributes["EasyRoutes Delivery Photo 3"]}}"
       alt="EasyRoutes Delivery Photo 3"
       width="480">
{% endif %}<br>
{% if attributes["EasyRoutes Delivery Photo 4"] %}
  <img src="{{attributes["EasyRoutes Delivery Photo 4"]}}"
       alt="EasyRoutes Delivery Photo 4"
       width="480">
{% endif %}<br>
{% if attributes["EasyRoutes Delivery Photo"] %}
  <p style="font-size: 12px">Powered by <a style="font-size: 12px" href="https://easyroutes.app/?utm_source=shopify&utm_medium=email&utm_campaign=pod">EasyRoutes</a></p>
{% endif %}


Steps

  1. Visit your Notification Settings.
  2. Click on any of the Delivered or Missed delivery email templates.
  3. In the Email body (HTML) input box, locate the following lines of code:
    {% capture email_body %}
    
    {% endcapture %}
    	
  4. Just above the endcapture block of code, paste the code snippet for above which would add the proof of delivery This is before the HTML content and after your order's email snippets.
  5. Click the Save button.

Integrating with your SMS Notification Templates

You can show your Photo Proof of Delivery in any of your text notifications using Shopify's order attribute tags once the photo is taken and uploaded. Since it's for confirming a delivery, this works best with the Delivered or the Attempted Delivery notifications.

Note: if you are using multiple photos then, the 2nd, 3rd and 4th photos can be added by replacing the "EasyRoutes Delivery Photo" attribute with "EasyRoutes Delivery Photo 2", "EasyRoutes Delivery Photo 3", "EasyRoutes Delivery Photo 4"

Here is a sample that you can copy and paste directly into your template:

{{ if order.attributes["EasyRoutes Delivery Photo"] }} Please refer to this photo to see where it was left: {{ order.attributes["EasyRoutes Delivery Photo"] }} {{ endif }}

Steps:

  1. Visit your Notification Settings.
  2. Click on the SMS template you wish to edit.
  3. Located the section of code where you would like to insert your EasyRoutes photo.
  4. Paste in the relevant code snippets above.
  5. Click the Save button.

Integrating with your Order Status Page

  1. Visit your Checkout Settings page.
  2. Scroll down to the Order processing section.
  3. In the Additional Scripts text box, paste in the code snippet shown below: 
{% if order.attributes["EasyRoutes Delivery Photo"] %}
<script>
 var photoUrl = "{{order.attributes["EasyRoutes Delivery Photo"]}}"
 var photo = '<img src="'+ photoUrl+ '"alt="EasyRoutes Delivery Photo" width="480" />' + '<p style="font-size: 12px">Powered by <a style="font-size: 12px" href="https://easyroutes.app/?utm_source=shopify&utm_medium=email&utm_campaign=pod">EasyRoutes</a></p>'
 Shopify.Checkout.OrderStatus.addContentBox(
  '<h2>Proof of Delivery</h2>', photo, 
)
</script>
{% endif %}

or use the following snippet for multiple photos:

{% if order.attributes["EasyRoutes Delivery Photo"] %}
<script>
 var photoUrl = "{{order.attributes["EasyRoutes Delivery Photo"]}}"
 var photo = '<img src="'+ photoUrl+ '"alt="EasyRoutes Delivery Photo" width="480" />' 

{% if order.attributes["EasyRoutes Delivery Photo 2"] %}
var photoUrl2 = "{{order.attributes["EasyRoutes Delivery Photo 2"]}}"
photo = photo + '<img src="'+ photoUrl2+ '"alt="EasyRoutes Delivery Photo 2" width="480" />' 
{% endif %}

{% if order.attributes["EasyRoutes Delivery Photo 3"] %}
var photoUrl3 = "{{order.attributes["EasyRoutes Delivery Photo 3"]}}"
photo = photo + '<img src="'+ photoUrl3+ '"alt="EasyRoutes Delivery Photo 3" width="480" />' 
{% endif %}

{% if order.attributes["EasyRoutes Delivery Photo 4"] %}
var photoUrl4 = "{{order.attributes["EasyRoutes Delivery Photo 4"]}}"
photo = photo + '<img src="'+ photoUrl4+ '"alt="EasyRoutes Delivery Photo 4" width="480" />' 
{% endif %}


photo = photo + '<p style="font-size: 12px">Powered by <a style="font-size: 12px" href="https://easyroutes.app/?utm_source=shopify&utm_medium=email&utm_campaign=pod">EasyRoutes</a></p>'
 Shopify.Checkout.OrderStatus.addContentBox(
  '<h2>Proof of Delivery</h2>', photo, 
)
</script>
{% endif %}