Shopify is one of the most well-known and widely used e-commerce platforms on the web. Merchants from all industries can easily use it to sell their products or services online. The platform currently boasts thousands of merchants.
Shopify’s premise is to allow users without much sophisticated tech and programming know-how to open up their own online storefronts. This has naturally been a huge part of the success of the platform, as average Joes can quit their day jobs and become successful entrepreneurs.
In the Shopify platform, the most interesting area to the user experience from a merchant’s point of view is the checkout process, as how this is designed greatly impacts conversions on a Shopify site.
Here are some stellar pointers to customize the platform’s checkout process for superior UX…
1. Tweaking the Checkout Copy
What shoppers read during the checkout process impacts a site’s cart-abandonment rate and is a factor in the friction they experience as they move to finally clicking or tapping on the final checkout call to action button.
Therefore, changing this all-important text to reduce checkout friction and promote persuasion is a necessity, and here’s how to do it:
Sometimes, a simple change makes all the difference in the world when it comes to giving accurate and clear info to shoppers. For instance, letting shoppers know what currency they’ll be paying with is essential to good UX since that eliminates unexpected surprises on the path to conversions.
In the Shopify dashboard, head to Preferences and then General.
In Adjust Your Standards and Formats, select Checkout Language, and click Inspect. You’ll see a translation screen appear. Here, provide your translation with a name (for example, what your shop is called). Find the text you wish to alter; let’s say it’s in Create Your Order. Input the text (read: the translation) that you want to show up on the cart page.
Now, scroll to the bottom of the page and select Use This for My Checkout Language.
It’s worth mentioning that Shopify only officially lets you change the language (English to Spanish, etc.) on the checkout page. However, this workaround in its platform lets you use the translation function to actually modify the specific wording of the copy on the checkout page.
2. Including a Shipping Rates Calculator
Nothing’s more frustrating to shoppers than being blindsided by the cost of shipping! In fact, a Harris poll confirms that 66% of online shoppers rank shipping costs as their worst pet peeve. Thus, having a handy shipping rates calculator on your checkout page can drastically improve the UX for your Shopify customers because they’ll be automatically given an estimate of shipping costs on the spot, eliminating hidden fees.
To do this, begin by uploading the jquery.cart.min.js to theme assets by using this JS code snippet:
/**
* Module to add a shipping rates calculator to cart page.
*
* Copyright (c) 2011-2016 Caroline Schnapp (11heavens.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
"object"==typeof Countries&&(Countries.updateProvinceLabel=function(e,t){if("string"==typeof e&&Countries[e]&&Countries[e].provinces){if("object"!=typeof t&&(t=document.getElementById("address_province_label"),null===t))return;t.innerHTML=Countries[e].label;var r=jQuery(t).parent();r.find("select");r.find(".custom-style-select-box-inner").html(Countries[e].provinces[0])}}),"undefined"==typeof Shopify.Cart&&(Shopify.Cart={}),Shopify.Cart.ShippingCalculator=function(){var _config={submitButton:"Calculate shipping",submitButtonDisabled:"Calculating...",templateId:"shipping-calculator-response-template",wrapperId:"wrapper-response",customerIsLoggedIn:!1,moneyFormat:"$"},_render=function(e){var t=jQuery("#"+_config.templateId),r=jQuery("#"+_config.wrapperId);if(t.length&&r.length){_.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var n=_.template(jQuery.trim(t.text())),a=n(e);if(jQuery(a).appendTo(r),"undefined"!=typeof Currency&&"function"==typeof Currency.convertAll){var i="";jQuery("[name=currencies]").size()?i=jQuery("[name=currencies]").val():jQuery("#currencies span.selected").size()&&(i=jQuery("#currencies span.selected").attr("data-currency")),""!==i&&Currency.convertAll(shopCurrency,i,"#wrapper-response span.money, #estimated-shipping span.money")}}},_enableButtons=function(){jQuery(".get-rates").removeAttr("disabled").removeClass("disabled").val(_config.submitButton)},_disableButtons=function(){jQuery(".get-rates").val(_config.submitButtonDisabled).attr("disabled","disabled").addClass("disabled")},_getCartShippingRatesForDestination=function(e){var t={type:"POST",url:"/cart/prepare_shipping_rates",data:jQuery.param({shipping_address:e}),success:_pollForCartShippingRatesForDestination(e),error:_onError};jQuery.ajax(t)},_pollForCartShippingRatesForDestination=function(e){var t=function(){jQuery.ajax("/cart/async_shipping_rates",{dataType:"json",success:function(r,n,a){200===a.status?_onCartShippingRatesUpdate(r.shipping_rates,e):setTimeout(t,500)},error:_onError})};return t},_fullMessagesFromErrors=function(e){var t=[];return jQuery.each(e,function(e,r){jQuery.each(r,function(r,n){t.push(e+" "+n)})}),t},_onError=function(XMLHttpRequest,textStatus){jQuery("#estimated-shipping").hide(),jQuery("#estimated-shipping em").empty(),_enableButtons();var feedback="",data=eval("("+XMLHttpRequest.responseText+")");feedback=data.message?data.message+"("+data.status+"): "+data.description:"Error : "+_fullMessagesFromErrors(data).join("; ")+".","Error : country is not supported."===feedback&&(feedback="We do not ship to this destination."),_render({rates:[],errorFeedback:feedback,success:!1}),jQuery("#"+_config.wrapperId).show()},_onCartShippingRatesUpdate=function(e,t){_enableButtons();var r="";if(t.zip&&(r+=t.zip+", "),t.province&&(r+=t.province+", "),r+=t.country,e.length){"0.00"==e[0].price?jQuery("#estimated-shipping em").html("FREE"):jQuery("#estimated-shipping em").html(_formatRate(e[0].price));for(var n=0;n<e.length;n++)e[n].price=_formatRate(e[n].price)}_render({rates:e,address:r,success:!0}),jQuery("#"+_config.wrapperId+", #estimated-shipping").fadeIn()},_formatRate=function(e){function t(e,t){return"undefined"==typeof e?t:e}function r(e,r,n,a){if(r=t(r,2),n=t(n,","),a=t(a,"."),isNaN(e)||null==e)return 0;e=(e/100).toFixed(r);var i=e.split("."),o=i[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1"+n),s=i[1]?a+i[1]:"";return o+s}if("function"==typeof Shopify.formatMoney)return Shopify.formatMoney(e,_config.moneyFormat);"string"==typeof e&&(e=e.replace(".",""));var n="",a=/\{\{\s*(\w+)\s*\}\}/,i=_config.moneyFormat;switch(i.match(a)[1]){case"amount":n=r(e,2);break;case"amount_no_decimals":n=r(e,0);break;case"amount_with_comma_separator":n=r(e,2,".",",");break;case"amount_no_decimals_with_comma_separator":n=r(e,0,".",",")}return i.replace(a,n)};return _init=function(){new Shopify.CountryProvinceSelector("address_country","address_province",{hideElement:"address_province_container"});var e=jQuery("#address_country"),t=jQuery("#address_province_label").get(0);"undefined"!=typeof Countries&&(Countries.updateProvinceLabel(e.val(),t),e.change(function(){Countries.updateProvinceLabel(e.val(),t)})),jQuery(".get-rates").click(function(){_disableButtons(),jQuery("#"+_config.wrapperId).empty().hide();var e={};e.zip=jQuery("#address_zip").val()||"",e.country=jQuery("#address_country").val()||"",e.province=jQuery("#address_province").val()||"",_getCartShippingRatesForDestination(e)}),_config.customerIsLoggedIn&&jQuery(".get-rates:eq(0)").trigger("click")},{show:function(e){e=e||{},jQuery.extend(_config,e),jQuery(function(){_init()})},getConfig:function(){return _config},formatRate:function(e){return _formatRate(e)}}}();
Then, select and copy all the text, open the Shopify admin in a new tab, and click Online Store and then Themes from the Shopify admin.
After you locate the theme you like, click on the ellipsis button (…); then click on Edit HTML/CSS. On the Assets folder, choose Add a new asset. When the dialog opens up, select the Create a Blank File Tab; input jquery.cart.min for the name and choose .js as the new file’s extension. Click on Add Asset. Finally, paste the contents that you copied earlier, and choose Save.
Now, you have to add to the Customize theme page.
Start by finding and clicking on Config on the Edit HTML/CSS page. On the Config folder, select the settings_schema.json file. The file now opens up in the online text editor.
Go down to the bottom of the settings_schema.json file, then add the following code prior to the last square bracket ( ] ) and after the final curly bracket ( } ):
{
"name": "Shipping Rates Calculator",
"settings": [
{
"type": "select",
"id": "shipping_calculator",
"label": "Show the shipping calculator?",
"options": [
{
"value": "Disabled",
"label": "No"
},
{
"value": "Enabled",
"label": "Yes"
}
],
"default": "Enabled"
},
{
"type": "text",
"id": "shipping_calculator_heading",
"label": "Heading text",
"default": "Get shipping estimates"
},
{
"type": "text",
"id": "shipping_calculator_default_country",
"label": "Default country selection",
"default": "United States"
},
{
"type": "paragraph",
"content": "If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the spelling to use here, refer to the first checkout page."
},
{
"type": "text",
"id": "shipping_calculator_submit_button_label",
"label": "Submit button label",
"default": "Calculate shipping"
},
{
"type": "text",
"id": "shipping_calculator_submit_button_label_disabled",
"label": "Submit button label when calculating",
"default": "Calculating..."
},
{
"type": "paragraph",
"content": "Do not forget to include the snippet shipping-calculator in your cart.liquid template where you want the shipping calculator to appear. You can get the snippet here: [shipping-calculator.liquid](https:\/\/github.com\/carolineschnapp\/shipping-calculator\/blob\/master\/shipping-calculator.liquid) ."
}
]
}
Click Save.
It’s time to move on to the shipping-calculator snippet.
Copy this code:
<div id="shipping-calculator">
<h3></h3>
<div>
<p class="field">
<label for="address_country">Country</label>
<select id="address_country" name="address[country]" data-default=""></select>
</p>
<p class="field" id="address_province_container" style="display:none;">
<label for="address_province" id="address_province_label">Province</label>
<select id="address_province" name="address[province]" data-default=""></select>
</p>
<p class="field">
<label for="address_zip">Zip/Postal Code</label>
<input type="text" id="address_zip" name="address[zip]" />
</p>
<p class="field">
<input type="button" class="get-rates btn button" value="" />
</p>
</div>
<div id="wrapper-response"></div>
</div>
<script id="shipping-calculator-response-template" type="text/template">
<p id="shipping-rates-feedback" <% if (success) { %> class="success" <% } else { %> class="error" <% } %>>
<% if (success) { %>
<% if (rates.length > 1) { %>
There are <%- rates.length %> shipping rates available for <%- address %>, starting at <%= rates[0].price %>.
<% } else if (rates.length == 1) { %>
There is one shipping rate available for <%- address %>.
<% } else { %>
We do not ship to this destination.
<% } %>
<% } else { %>
<%- errorFeedback %>
<% } %>
</p>
<ul id="shipping-rates">
<% for (var i=0; i<rates.length; i++) { %>
<li><%- rates[i].name %> at <%= rates[i].price %></li>
<% } %>
</ul>
</script>
<!--[if lte IE 8]>
<style> #shipping-calculator { display: none; } </style>
<![endif]-->
//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js
/services/javascripts/countries.js
shopify_common.js
jquery.cart.min.js
<script>
Shopify.Cart.ShippingCalculator.show( {
submitButton: ,
submitButtonDisabled: ,
moneyFormat:
} );
</script>
Open up the Shopify admin in a new tab, click on Online Store, and then select Themes.
Pick the theme you want to edit, select the ellipsis (…) button, and then select Edit HTML/CSS.
Select the Snippets folder, and choose Add a New Snippet. Name the snippet “shipping-calculator”; select Create Snippet.
Now, paste the clipboard’s content into the online code editor, and hit Save.
To show your shipping calculator in a specific spot on the page, include this snippet:
Liquid error: This liquid context does not allow includes.
in the appropriate place. Follow these steps:
- Select Online Store and then choose Themes from your Shopify admin.
- When you locate the theme to edit, select the ellipses (…) button, and choose Edit HTML/CSS.
- Click the cart.liquid file under the Templates folder to open it within the online code editor.
- Search for the </ form> and add the above mentioned code underneath it.
- Finally, save the changes.
All that’s left is to customize the shipping rates calculator.
Head to your Customize theme page. Look for the Shipping Rates Calculator section and customize the following:
- Whether or not to show the calculator
- The exact shipping text that’s shown above the calculator
- The default country selection
- The copy that’s going to be shown on the submit button
You’re all done!
3. Showing a Delivery Dates Picker on the Cart Page
Letting customers see when their product will be delivered isn’t just standard customer service—it’s also superb UX on a shopping site.
To include a date picker on the cart page, do the following.
Head to the Assets folder and open it. Within the Assets directory, open the theme.js or theme.js.liquid file and add this to the bottom of the file:
$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +1,
maxDate: '+2M',
beforeShowDay: jQuery.datepicker.noWeekends
} );
});
});
Then, save the changes.
Stay on the Edit HTML/CSS page. In the Sections folder, select the cart-template.liquid file to open it inside the online code editor. Find the closing tag of your cart form, which is </ form>
Above </ form>, add this line:
<div style="width:300px; clear:both;">
<p>
<label for="date">Pick a delivery date:</label>
<input id="date" type="text" name="attributes[date]" value="" />
<span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
</p>
</div>
Save these new changes.
Look under the Layout folder: Click on the theme.liquid file to open it up inside of the online code editor.
Before the </head> tag, add this:
//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" defer="defer"></script>
Congrats! You’ll now get to see a delivery date field right on your store’s cart page. Clicking in the text field causes the date picker to appear.
A Powerful Platform, but Only as Good as Your Customized UX
Shopify is indeed a flexible and very usable platform that allows a lot of ordinary people to sell online fast with minimal technical skills. It’s a great platform for entrepreneurs doing everything from drop shipping to beginning their business empire.
However, as with any platform, the UX is, ultimately, what makes it successful. Thankfully, Shopify’s code allows for easy customizations in your store across various elements of the checkout experience: the copy or text, calculating shipping rates, and displaying delivery date selections.
| LAST DAY: Remove Image Backgrounds with PhotoScissors v3 – only $9.97! |  |
from Webdesigner Depot https://www.webdesignerdepot.com/2017/05/3-ways-to-pimp-shopify-for-better-ux/
No comments:
Post a Comment