This article will give your customers a better experience on your site – Ships-a-Lot

This article will give your customers a better experience on your site and improve your average order size.

Zach Lukaszek, co-Founder of Ships-A-Lot

Zach Lukaszek is a former PhD student turned entrepreneur who enjoys writing about eCommerce, business, and programming.


bird@shipsalot.com

Zach Lukaszek, co-Founder of Ships-A-Lot

Zach Lukaszek is a former PhD student turned entrepreneur who enjoys writing about eCommerce, business, and programming.


bird@shipsalot.com

This article will give your customers a better experience on your site and improve your average order size.

Carrier Calculated, ecommerce, JavaScript, liquid, marketing, Shipping prices, web development -

Update: Code now adapted for inline form submission, 03/22/17

Audience & Possible Outcomes


Any Shopify store owner looking to improve user experience or motivate their customers to hit the cart size required for free shipping.

This snippet is designed for ease of installation and usability. It is meant to look good and get the job done on any theme, whether using an AJAX cart or not.

It can be easily configured to display 1 of the following 2 metrics in a visually appealing way:

  • The cost of the cheapest shipping method for the current shopping cart
  • A progress bar showing the customer's progress toward earning free shipping

Examples of each are shown below.

shipping price is displayed in real time

The order's shipping price is displayed in real time.


progress toward free shipping is displayed in real time

The customer's progress toward free shipping is displayed in real time.

Live demonstration


You can navigate here and add the item to your cart to see a live demonstration of the shipping price mode. Try increasing or decreasing the amount in your cart to see how the banner responds.

Motivation


Being an owner of Ships-A-Lot, I love shipping. I came across an AJAX endpoint buried away in very bottom of a long and esoteric support article which suggested to me that the shipping methods and prices were available to the front-end at any time and on any page. After some experimentation, I found my intuition was correct, so I wrote up this snippet to take advantage of it and demo the feature.

Reviewing shipping prices are a concrete step in any eCommerce sales funnel. If a customer deems the prices too high or methods unsatisfactory, they may bounce. There are many tools for changing the price and presentation. This is the first tool I am aware of to completely change this step's position in the sales funnel.

Installation


To install the code, perform the following steps:

  1. Create a new snippet called 'real-time-shipping'.
  2. Copy the code below into the snippet and save.
  3. Include the snippet on the first line of your theme.liquid file.
  4. Configure the code to your liking.

1. Create the file


Navigate to Online Store → Themes → ... → Edit HTML/CSS and, in the new scroll box, scroll down to a folder called 'Snippets'. Click on it and click 'Add a new snippet'. Name it 'real-time-shipping' and click 'Create Snippet'. Video:

2. Copy the code into the snippet


Copy the code below into the text area of the snippet and save it.


Video:

3. Include snippet in theme.liquid


Warning: completing this step will activate the snippet.

Open up the layout file theme.liquid. Make a new line at the very beginning of the file and type or paste the following:

{% include 'real-time-shipping' %}

Save theme.liquid. Video:

4. Configure the snippet to your liking


There are 10 customizations build into the liquid in this code, mostly focused around style or color. As mentioned before, there are two modes that can be loaded: real-time display of the cheapest shipping rate for the current shopping cart or a progress bar displaying progress toward free shipping.

The special options are explained in the bulleted list below:

  • {{ free_shipping_message }}: This is the message displayed in the banner when free shipping is available for the shopping cart.
  • {{ make_progress_bar }}: If false, the banner will display the cheapest current shipping price. If true, the banner will behave as a progress bar showing how close the cart is to earning free shipping.
  • {{ free_shipping_threshold }}: Cart total required to trigger free shipping. e.g. Your customer needs to spend $100.00 to earn free shipping at your store, so you would set this to "100".

The remaining variables are style related and are explained by the following two images:

shipping price variables

Shipping price style variables.


progress bar variables

Progress bar style variables.

Extension of functionality


If you are interested in expanding upon this functionality or tailoring it to your own site, please credit this article. A good place to start for either of these goals is the inclusion point for the snippet. The include adds a div with id="shipping_price" and the snippet's output is targeted on this DOM id.

With this knowledge, you could implement the data anywhere on your website. Enjoy!



Happy coding!

0 comments

Leave a comment

Please note, comments must be approved before they are published