Shopify: Cash on Delivery

Some webshops have COD (Cash on Delivery) enabled. At first this should be an easy task. But the possibilities are limited to say the least.

  • Enable a custom Shipping method in the Shopify settings.

Well yes that’s the right answer, but what if you would like to charge the customer a certain amount?

At this time while writing this article there is no way to charge extra for selecting a certain Shipping Methode, only when having Shopify Premium.

The only reasonable way to make this work is to give the user/customer an option at the cart page (because this is the only location where we can influence the checkout flow)

The solution

Like I said, the only location where you could influence the checkout flow is of course at the cart page. My clients shop had an dynamic “Go to checkout” integrated, but this was of course to be disabled if you would like to get total control of the flow.

Concept: Add a checkbox where the user has to answer “Enable Cash on Delivery?”

  • Yes option would add a product including the extra charge, for example $5
  • No option would do nothing.

This option is mandatory, the user HAS to give an answer to continue to the checkout page (where we lose all control)

The Liquid

Template: Wokiee

snippets/cartpage-design1.liquid
  1. Create a product that has the extra charge included as price.
  2. Give it a name like “Cash on Delivery”

Lets start by looping through the cart items just to make sure is is already included or not, because of course users go back and put more items in the cart just before going to the “checkout” page. These are important things that you have to consider while influencing the flow.

{% for item in cart.items %}

  {% if item.product.id == 4828695756909  %}
    {% assign cart_has_cod = true %}
  {% endif %}

{% endfor %}

Than add the Yes/No option before the checkout button


  <div class="cod">
    <p class="cod_text">Utánvétellel fizetne?*</p>
    <div class="row">

    <!-- Disable button "Yes: if already cart_has_cod -->
    {% if cart_has_cod %}
      <div class="col-12 col-lg-6">
          <button id="cod_add" disabled class="btn btn-cod">Yes</button>
      </div>
        <div class="col-12 col-lg-6">
          <button id="cod_remove" class="btn btn-cod">No</button>
      </div>

    {% else %}
      <div class="col-12 col-lg-6">
        <button id="cod_add" class="btn btn-cod">Yes</button>
      </div>
      <div class="col-12 col-lg-6">
        <button id="cod_remove" class="btn btn-cod">No</button>
      </div>

    {% endif %}
    </div>
  </div>

I’ve also added that when selecting Yes, the extra charge will appear under the cart.total_price.

<!-- Show if cart_had_cod is true the current price -->
{% if cart_has_cod %}
  <tr id="cod">
     <th>COD Charge</th>
  <td>$5</td>
  </tr>

{% else %}
<tr id="cod" style="display: none">
  <th>COD Charge</th>
  <td>$5</td>
</tr>
{% endif %}

The Javascript.

I’ve had to change this allot and feel like the current setup is the stable version. But please check the code before adding it to your website.

First assign the cod product id.

var removeCod = {
  id: 33111707680877,
  quantity: 0
}

var addCod = {
  id: 33111707680877,
  quantity: 1
}

Here is the important part, this will add the product to the cart.json dynamically. If success show the #cod (the price)

/*
* Add shipping when button pressed
* Also check if item is already in cart
*/
$("#cod_add").click(function () {
  jQuery.ajax({
    type: 'post',
    url: '/cart/add.js',
    data: addCod,
    dataType: 'json',
    success: function () {
      jQuery.ajax({
        type: 'get',
        url: '/cart.js',
        dataType: 'json',
          success: function (data){
            //updatePrices(data);
            $("#cod").show(300);
        }
      })
    },
  });

To remove the item:

/*
* Remove shipping when button pressed
* Also check if item is already in cart
*/

$("#cod_remove").click(function () {
  jQuery.ajax({
    type: 'post',
    url: '/cart/change.js',
    data: removeCod,
    dataType: 'json',
    success: function () {
      jQuery.ajax({
          type: 'get',
          url: '/cart.js',
          dataType: 'json',
            success: function (data){
              //updatePrices(data);
              $("#cod").hide(300);
              $("#33111707680877").hide();
          }
        })
    },
  });

Remember: Here we use the cart ajax feature provided by Shopify.

Leave a Reply