Order Notes for Vend Ecommerce


Latest update: - Mikey Jarvis

Order Notes for Vend Ecommerce

What are order notes:

If you are using the latest version of the Alpaca Theme (2.3 or higher), you will now be able to include a field for order notes on your ecommerce cart page. This order notes feature will allow you to capture special instructions on how to prepare and deliver an order.

When your customer arrives at the order page they will see an order notes box, this feature will be on by default and will be titled "Special instructions for seller".

If you'd like to customise the title of this box you can do so by following the steps below:


Customise your order note label:

Important: We recommend this for advanced users only. Editing the wrong HTML/CSS can break your store and prevent customer access. Before proceeding you may want to take a backup of this text by saving it into a word document. If you aren't sure about this, get in touch with our support team for additional help.

You can edit the label that appears above or alongside the order notes box by editing your template and change the words to fit your needs. To do this:

1. Select Alpaca under Themes:

2. Select Edit HTML/CSS:

3. Select the en.default.json file under the locales folder:

Once here, find the following value at around line 32:

      "note": "Special instructions for seller",

And replace the text after "note" to be what you want to display. For example, if you want to say "Enter name you'd like printed on the T-shirt below", you'd change the text to:

      "note": "Enter the name you'd like printed on the shirt below",

After saving these changes the outcome will look something like the below image:


Turn off order notes:

By default order notes are turned on for those with the latest Alpaca Theme (v2.3 or higher). If you wish to disable the order notes box, head to your Customise theme page, and, in the Cart page section, uncheck the box “Allow order comments".


Add an order note for an old theme:

Important: We recommend this for advanced users only. Editing the wrong HTML/CSS can break your store and prevent customer access. Before proceeding you may want to take a backup of this text by saving it into a word document. If you aren't sure about this, get in touch with our support team for additional help.

If you are on an earlier version of Alpaca (pre v2.3) you can add order notes to your cart page by following the instructions below:

1. Select Alpaca under Themes:

2. Select Edit HTML/CSS:

3. Select the cart.liquid file under the templates folder:

Replacing the following code on around line 98:

<div class="cart__row">
  <div class="grid">
    <div class="grid__item text-right">
      <p>
        <span class="cart__subtotal-title">{{ 'cart.general.subtotal' | t }}</span>
        <span class="h3 cart__subtotal">{{ cart.total_price | money }}</span>
      </p>
      <p><em>{{ 'cart.general.shipping_at_checkout' | t }}</em></p>
      <input type="submit" name="update" class="btn--secondary update-cart" value="{{ 'cart.general.update' | t }}">
      <input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">
    </div>
  </div>
</div>

to the code below:

<div class="grid cart__row">
  <div class="grid__item seven-twelfths small--one-whole">
    <label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
    <textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
  </div>

  <div class="grid__item text-right five-twelfths">
    <p>
      <span class="cart__subtotal-title">{{ 'cart.general.subtotal' | t }}</span>
      <span class="h3 cart__subtotal">{{ cart.total_price | money }}</span>
    </p>
    <p><em>{{ 'cart.general.shipping_at_checkout' | t }}</em></p>
    <input type="submit" name="update" class="btn--secondary update-cart" value="{{ 'cart.general.update' | t }}">
    <input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">
  </div>
</div>

What if I don't use Alpaca?

If you use third party theme, you will not be able to enable the order note box by default. For more information, contact your theme creator for availability.

Powered by Zendesk