Shopify是网络上最著名和使用最广泛的电子商务平台之一。各行各业的商人都可以轻松地使用它在线销售他们的产品或服务。该平台目前拥有数千名商人。
Shopify的前提是允许没有太多复杂技术和编程知识的用户开放自己的在线店面。这自然是平台成功的重要组成部分,因为普通的Joes可以辞职,成为成功的企业家。
在Shopify平台中,从商家的角度来看,用户体验中最有趣的方面是结帐过程,因为结帐过程的设计方式极大地影响了Shopify网站上的转化。
以下是一些出色的指针,可针对高级UX自定义平台的结帐流程…
1.调整结帐副本
购物者在结帐过程中阅读的内容会影响网站的购物车放弃率,并且是他们在最终单击或点击最终结帐号召性用语按钮时所遇到的摩擦的一个因素。
因此,必须更改此最重要的文字以减少结帐摩擦并提高说服力,这是必须的,下面是操作方法:
有时,在向购物者提供准确和清晰的信息时,简单的更改会改变世界。例如,让购物者知道他们将用什么货币付款对于良好的用户体验至关重要,因为这消除了转化途中的意外惊喜。
在Shopify仪表板中,转到Preferences,然后单击General。
在“ 调整标准和格式”中,选择“ 签出语言”,然后单击“ 检查”。您会看到一个翻译屏幕。在这里,为您的翻译提供一个名称(例如,您的商店叫什么名称)。找到您想要更改的文本;假设它在“ 创建您的订单”中。输入要显示在购物车页面上的文本(阅读:翻译)。
现在,滚动到页面底部,然后选择“ 将其用于我的结帐语言”。
值得一提的是,Shopify仅允许您在结帐页面上正式更改语言(英语为西班牙语等)。但是,此解决方案在其平台上可让您使用翻译功能来实际修改结帐页面上副本的特定措辞。
2.包括运费计算器
对购物者而言,最令人沮丧的莫过于被运输成本所蒙蔽了!实际上,哈里斯(Harris)的一项民意调查证实,有66%的在线购物者将运输成本列为最糟糕的宠儿。因此,在结帐页面上配备方便的运费计算器可以极大地提高Shopify客户的用户体验,因为他们会自动获得当场的运费估算,从而消除了隐性费用。
为此,请先使用以下JS代码片段将jquery.cart.min.js上传到主题资产:
/**
* 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.gnu.org/licenses/gpl.html* http://www.opensource.org/licenses/mit-license.php**/ "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:"${{amount}}"},_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
然后,选择并复制所有文本,在新选项卡中打开Shopify管理员,然后单击Online Store,然后单击Shopify管理员中的主题。
找到所需的主题后,单击省略号按钮(…);单击“确定”。然后点击编辑HTML / CSS。在“ 资产”文件夹中,选择“ 添加新资产”。对话框打开时,选择创建空白文件选项卡;输入jquery.cart.min作为名称,然后选择.js作为新文件的扩展名。点击添加资产。最后,粘贴您先前复制的内容,然后选择保存。
现在,您必须添加到“定制主题”页面。
首先找到并单击“ 编辑HTML / CSS”页面上的“ 配置 ” 。在Config文件夹上,选择settings_schema.json文件。现在,该文件将在在线文本编辑器中打开。
转到settings_schema.json文件的底部,然后在最后一个方括号(]之前和最后一个大括号(}之后)添加以下代码:
{ "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) ." } ] }
点击保存。
现在该继续介绍运输计算器代码段了。
复制此代码:
{% unless settings.shipping_calculator == 'Disabled' %} <div id="shipping-calculator"> <h3>{{ settings.shipping_calculator_heading | default: 'Get shipping estimates' }}p> <p class="field"> <input type="button" class="get-rates btn button" value="{{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' }}" /> {{ '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js' | script_tag }} {{ '/services/javascripts/countries.js' | script_tag }} {{ 'shopify_common.js' | shopify_asset_url | script_tag }} {{ 'jquery.cart.min.js' | asset_url | script_tag }} <script> Shopify.Cart.ShippingCalculator.show( { submitButton: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }}, submitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }}{% if customer %}, customerIsLoggedIn: true{% endif %}, moneyFormat: {{ shop.money_with_currency_format | json }} } ); 并在其下面添加上述代码。最后,保存更改。 剩下的就是自定义运费计算器。
前往您的“定制”主题页面。查找运费计算器部分,并自定义以下内容:
- 是否显示计算器
- 计算器上方显示的确切送货文本
- 默认国家选择
- 将在“提交”按钮上显示的副本
大功告成!
3.在购物车页面上显示交货日期选择器
让客户看到他们的产品何时交付不仅是标准的客户服务,而且还是购物网站上一流的用户体验。
要在购物车页面上包括日期选择器,请执行以下操作。
转到Assets文件夹并打开它。在Assets目录中,打开theme.js或theme.js.liquid文件,并将其添加到文件底部:
$(document).ready( function() { $(function() { $("#date").datepicker( { minDate: +1, maxDate: '+2M', beforeShowDay: jQuery.datepicker.noWeekends } ); }); });
然后,保存更改。
停留在“ 编辑HTML / CSS”页面上。在Sections文件夹中,选择cart-template.liquid文件以在在线代码编辑器中打开它。找到您的购物车表单的结束标记,即
在上方,添加以下行:
<div style="width:300px; clear:both;"> <p> <label for="date">Pick a delivery date:标记之前,添加以下内容:
{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }} <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" defer="defer">