[How-to] Increase conversion rate by reminding of a free shipping

Posted by giosg.com on 20-Jun-2016 09:51:11

One of the top most cited reasons for not purchasing online is the cost of shipping. Customers see shipping costs as the number one barrier to buying, and the situation is made even worst if there is no up-front information available about it. Since offering free shipping would also entirely remove this obstacle related to shipping costs, it is safe to assume that free shipping would make converting these visitors into buying customers significantly easier.

Therefore, to increase conversion rate, it is good to remind customers of an existing perk, like "free shipping on orders over xxx". Let us show you how!

How to remind of a free shipping on orders over X value

To lower the barrier to buying and fight against shopping cart abandonment, you can show the visitor a "free shipping" banner when the size of the visitor’s shopping basket exceeds a value you have set. To demonstrate how this can be used we have created an example rule for free delivery with the following specifications:

  • as soon as the visitor's shopping cart value is 100 or more, a banner informing the customer about "Free shipping on orders over 100" will appear on the right, lower corner of the screen. Click the picture below to see how it works (NB! set to work only on desktop computer):

Remind of a free shipping - banner


Requirements

To do this you need have giosg LIVE with the following features in use:

  • giosg RULES - for building custom rules to match actions with unique situations

  • giosg BASKET - for monitoring shopping baskets in real-time

Instructions

1) Start by choosing "Rules" from the menu, then Click "+ create new rule" button. Following window will open:

How to create rules giosg live console

2) Start filling in the fields:

  • Choose the room where you want to display this rule from the ”At these rooms” menu
  • Click + Add new condition button to choose the right condition, in this case choose 1) ”Shopping cart size being more than the value” and then write "100" to the ” value more than” field above, and then add another condition 2) "Visitor is using a device type" and choose "Desktop computer" to the "Visitor is using a" field.
  • Choose an action from the ”Perform this action” menu, in this case choose ”Run a custom Javascript” and then add this to the code field:
// Settings
var imageUrl = "https://giosg-chat-public-eu.s3.amazonaws.com/assets/1/AIjZHPw6QbpYMWfuZ3IxCc3jAb1zqh.jpg";


/*
* DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU ARE DOING! :)
*/

// Banner element. jGiosg is just a renamed version of jQuery.
var element = jGiosg('.banner-bottom');
if (!element.length){
element = jGiosg('<div class="banner-bottom"></div>')
.css({
// You may change the z-index here!
"z-index": 999,
"position": "fixed",
"cursor": "pointer",
"display": "none",
"right": "0px",
"transform": "translateX(-50%)",
"bottom": 0
})
.appendTo("body");

jGiosg('<div class="banner-content"></div>')
.css({"float": "left"})
.appendTo(".banner-bottom");

// Banner image
jGiosg('<img src="' + imageUrl + '">')
.appendTo(".banner-content");

// Closing button
jGiosg('<span class="close-banner">&times;</span>')
.css({
"float": "right",
"display": "inline-block",
"padding": "0px 10px",
"margin-right": "-10px",
"cursor": "pointer",
"font-weight": "bold",
"font-size": "200%",
"background-color": "white"
})
.appendTo(".banner-bottom");
}
// Close banner on click
jGiosg('.close-banner').click(function() {
jGiosg('.banner-bottom').slideUp();
});

// Change color on hover
jGiosg('.close-banner').hover(function() {
jGiosg(this).css({
"background-color": "#a09a9a",
"color": "white"
});
}, function() {
jGiosg(this).css({
"background-color": "white",
"color": "black"
});
});

element.slideDown("slow").delay(1000);
  • If you don't want use the banner above (it's all yours!), you can replace the picture with your own, you need to first dowload this new picture to "Assets" (Left side menu), by by choosing "Upload a file" and then copying the picture link to your desktop.  After this you need to go back to "Rules" and modify the code. This is quite simple to do, just remove the current picture URL and paste the new picture URL between " " characters. (See the part of the code you need to modify highlighted with color!)
  • Then, you still need to give a name for the rule by typing it to the ”Name” field under ”Settings” menu
  • Remember to also enable the rule by clicking the ”Enabled” option.
  • And finally click "Save changes" to finish creating the rule!

Good, well done! Now you can just sit back and admire your work! You can track results in Reports -> Rules .

If you have any questions or want to now more about how to create rules in general, come and chat with us!

 

Topics: How to