Custom delivery widget

Shopify Hack


TL;DR How/why I created a delivery widget for the cart (rather than checkout) page of my Shopify store both to offer sameday delivery for particular products and cross-sell complimentary products increasing AOV.


Summary

This case study documents the implementation of a custom delivery widget to the checkout of www.mattt.com.au and the initial impact this had upon average order value and cart conversion rate.

  • Addressed the unique requirements of managing and communicating delivery of made-to-order vs ready made products.
  • Reconfigured the checkout flow, bringing selection of delivery onto first page.
  • Ability to further modify delivery options for high value customers in the future.
  • Resulted in a sustained 12% increase in average order value and 104% increase in cart conversion rate in subsequent three month period.

The problem

As a designer and maker of made-to-order bags and accessories (www.mattt.com.au, password — “handmade”) the majority of orders I receive are for products that are not yet made. While this is great for my inventory management (I don’t ever have to hold much stock) it can make it tricky for customer to purchase a bag at the last minute : (

A way of working around this has been to carefully manage the bags I do have already sewn and clearly indicate this on the website so customers can be confident they will receive their order promptly.

As I also sell these products in a retail space attached to my studio the Shopify POS app makes it very easy to only allow customers to purchase what I have on hand. This syncing of the inventory is particularly useful at busier times such as Christmas and Mother’s Day : )

While it is straightforward to tag and group these products into appropriate collections within Shopify (tagging with either READY or CUSTOM), it becomes trickier when trying to communicate the delivery options available due to some limitations in the default Shopify checkout delivery functionality.

A selection of Already Sewn products — www.mattt.com.au/sewnThese limitations can be summarised as:
  • No way to easily offer different shipping options on products based on tags. This can only be achieved through differences in product price or weight.
  • No control over the order the delivery options are displayed at checkout, instead they are listed from cheapest to most expensive and then alphabetically. This means for my website in-store collection would be the default (which is only selected for 5% of orders).
  • The delivery options are displayed on the second page of checkout, making it difficult for customers to be reassured what they will be charged for delivery.
  • No easy way to view the local and international shipping options in one place, a number of customers opt to post gifts directly to family overseas once they can see it is cost effective.
  • Limited opportunities to up-sell or incentivise customers to add products to reach a target for free shipping.
  • No way to over change delivery rates based on customer groups (accounts tagged as VIP etc).
  • Discount codes can either be applied to the shipping OR the products in the cart, not the total amount of the order. This is a problem if a discount code is used to create a simple gift voucher for a customer.

How I solved it

After attempting to solve these problems with the default Shopify shipping functionality it became apparent a custom delivery widget would be the most elegant way to create the quite specific behaviour required.

The first step in implementing this solution would be to hide or repurpose the existing standard delivery and shipping fields in the checkout.

While it would be possible to set all the products to require no shipping and thus completely remove this page from the checkout, as customers often expected to use an alternate address for shipping gift orders this wasn’t the most appropriate approach.

I therefore utilised the theme language translation feature (where admin can adjust the text labels used throughout the checkout) to re-appropriate the shipping page to more prominently collect email newsletter signup intent (see below).

Reappropriated second page of checkout showing email newsletter signup options.

To setup the widget each shipping option was set up as a product in the Shopify admin and added to an appropriate Smart Collections based on Vendor and tags.

Delivery products in admin area of website.

To further refine the delivery widget so that the exact date an order would be shipped would be displayed (especially useful around busy times such as Mother’s Day and Christmas) I added a number of variants to each delivery product.

Product detail of delivery product, showing variants related to week of year — Wk10 etc

These were then manipulated with a simple Liquid script that calculated the current week number using the {{ ‘now’ }} value. While this isn’t particularly accurate as it is the date/time of the server farm rather than the current browser instance, for calculating the week number it worked perfectly fine (especially as the cart page would be reloaded every time a customer added or removed a product).

As a failsafe the first variant has been set up as a default value (when there isn’t a match for the week number) and the last variant is a value for products requiring same-day delivery.

Variants were also added for each week number with a sku containing “free” so that orders over $300.00 would trigger the use of these variants and apply free shipping.

An additional benefit of setting up delivery options as products is that they can be updated by simply importing a CSV file (the method I also use for regular products on the website). Additionally shipping COGS can also be readily tracked (for the cost of packaging, postage and processing time) in the same way they are for the bags.

To make it as easy as possible for customers to use the modified cart page the widget hides the checkout button until a delivery option is selected.

Cart page before delivery option is selected, note upsell prompt under Express Delivery option.

Upon selection of a shipping option the checkout button is displayed along with a MATCHING MATTZIPS option and prompt to add additional products for free express delivery (in the example below this is $20). This was previously a gift wrapping option, though low interest by customers coupled with negative benefit to the businesses bottom line (it cost more to provide than could be charged) encouraged this change.

Cart page after delivery option is selected, note matching matttZIPs and prominent upsell prompt

Along with this basic functionality there are a number of small micro interactions and refinements I’ve made to the delivery widget.

An example of this being that if a customer removes the only product in the cart AND a delivery option has been selected both the product and delivery option are removed rather having a delivery option selected without a product in the cart.

Feedback & Improvements

Robustness

Although the delivery widget was a little complicated to implement having used the widget for three years (and hundreds of orders) I’ve found this to be quite a robust solution to both update and maintain

Customer response

Customers have responded positively to the delivery widget, reporting that they find it easy to use and that being able to view shipping rates for international delivery along with local delivery is appreciated.

Incorrect delivery selection

Although I was concerned that customers might select the incorrect delivery option (rather than the options being filtered by their address) over the three years of use there hasn’t been a single case of this occurring.

Refinements

While the current implementation of the delivery widget works well there are many ways it could be further refined.

As a merchant the single biggest improvement would be to add a number of options to the theme customisation area rather than needing to edit the code itself.

These options could include:

  • Being able to select the collection shown for the extra products.
  • Setting the value at which free shipping applies (currently $300.00).
  • Adding the ability to offer special shipping rates for VIP customers and/or based upon historical spend or customer lifetime value (CLV).

Outcomes

By displaying targeted shipping information (cost and timing) along with dynamically calculating eligibility for free shipping (and an elegant way to add related high-margin products to increase cart value above the requisite $300) the delivery widget has had a direct and sustained impact on average order value, conversion rate and CLV.

The delivery widget (without any other website enhancements) had the following sustained impact over the proceeding three months:

  • 12% increase in average order value to $249.00
  • 104% increase in conversion rate, 1.36% to 2.77% (2.35% is the accepted industry average for e-commerce).
Cart conversion rate for same three month period in previous year — 1st February 2016 to 30th April 2016
Cart conversion rate for subsequent three month period — 1st February 2017 to 30th April 2017

Thanks!

Thank you for reading this short case study, if you’d like to know more about this project (or have any suggestions for how it could be improved) I’d love to hear from you.

I’d also be more than happy to share the code I’ve used (if you’re brave) if you might find it useful.

I’ll also be posting other write-ups of other E-commerce Hacks I’ve used to add extra functionality to my website.