You can add a custom delivery note to an order, and make it mandatory if needed.

Please reach out to us at [email protected]—we’ll be happy to implement this for you. Only proceed if you are comfortable editing code yourself.


Add a custom delivery note to the cart page

Step 1

Within your cart file (e.g. cart.liquid, cart-template.liquid, main-cart.liquid) file, place the following code where you would like the delivery note field to appear.

<div id="storePickupApp"></div>
<div id="delivery-note-container" style="display:none">
  <label for="deliveryNote" class="label--block">Please enter delivery instructions. (Required)</label>
  <textarea name="attributes[Delivery-Note]" id="deliveryNote" class="input--block" required style="min-width:330px; min-height: 100px;"></textarea>
</div>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    var noteContainer = document.querySelector("#delivery-note-container");
    ZapietEvent.listen("selected_method", function(method) {
      if (method == "delivery") {
        noteContainer.style.display = "block";
      } else {
        noteContainer.style.display = "none";
      }
    });
  });
</script>

If you are using the Online store 2.0 version of our widget, you will need to add the <div id="storePickupApp"></div> right above the code, to make sure the note appears right after the widget.

<div id="storePickupApp"></div>

Step 2

Depending on the widget version your store is on, add the code below.

<script type = "text/javascript">
    let delivery_selected = false;
$(document).ready(function() {
    window.ZapietEvent.listen('selected_method', function(method) {
        if (method == "delivery") {
            $('#delivery-note-container').show();
            delivery_selected = true;
        } else {
            $('#delivery-note-container').hide().val("");
            delivery_selected = false;
        }
    });
});
</script> 

Online store 2.0

If you are using our widget on Online store 2.0, you will need to

  • Add the code in Store Pickup + Delivery > Developers, under Custom JS

  • Remove these 2 lines of code

    <script type="text/javascript">

    </script>

Versions 7.1.2. and older

If you are using our widget on on older version of our app (that has our files), you will need to

  • Add the code in your storepickup-addons.liquid file

For both versions, if the code is not working, try adding jQuery on top of the cart file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> 

When a customer selects Local Delivery, an additional text field will appear where they can add their custom delivery notes.


Make the delivery note required

To make the delivery note field required before a customer continues to checkout, replace the code in Step 2 mentioned above with the code below, depending on the widget version you're on.

<script type="text/javascript">
  let delivery_selected = false;
$(document).ready(function() {  
  window.ZapietEvent.listen('selected_method', function(method) {
    if (method == "delivery") {   
      $('#delivery-note-container').show();
     delivery_selected = true;
    } else {
      $('#delivery-note-container').hide().val("");
      delivery_selected = false;
    } 
  });
  $("body").on('click', '[name="checkout"]', function() {
    var note_field= $('[name="attributes[Delivery-Note]"]').val();
    if(delivery_selected) {
      if(typeof note_field == 'undefined' || note_field == ''){
        alert('Please enter delivery instructions.');
        return false;
      }
      }
    });  
});
</script> 

If your customers try to continue to checkout without adding a delivery note, they will get a notification "Please enter delivery instructions". They will not be able to check out before they add a note.

Did this answer your question?