3种方法来实现更好的网站用户体验

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">

    返回观点列表
    本文标签:

    相关专题

    体验从沟通开始,让我们聆听您的需求!

    开始您的数字化品牌体验! 15158117070 期待您的来电!

    [ 网站建设×品牌官网设计×大策略营销门户×微信小程序开发×微信公众号开发]

    派迪业务总监微信号

    派迪业务总监微信号

    了解最新项目报价

    派迪产品经理微信号

    派迪产品经理微信号

    免费获取项目策划

    我们正使用 cookies 来改善您的访问体验

    派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

    如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》

    Cookie 偏好

    如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

    管理cookie偏好

    基本 cookies

    始终允许

    这些 cookies 是网站运行所必需的,不能在我们的系统中关闭。它们通常仅针对您所做的相当于服务请求的操作而设置,例如设置您的隐私首选项、登录或填写表格。您可以将浏览器设置为阻止或提醒您有关这些 cookies 的信息,但网站的某些部分将无法运行。这些 cookies 不存储任何个人身份信息。

    性能 cookies

    始终允许
    这些 cookies 使我们能够计算访问量和流量来源,以便我们可以衡量和改进我们网站的性能。它们帮助我们了解哪些页面受欢迎和不受欢迎,并了解访问者如何在网站上移动。这些 cookies 收集的所有信息都是汇总的,而且是匿名的。如果您不允许这些 cookies,我们将不知道您何时访问了我们的网站,也无法监控其性能。

    功能性 cookies

    这些 cookies 收集信息用于分析和个性化您的定向广告体验。您可以使用此拨动开关来行使选择不获取个人信息的权利。如果您选择关闭,我们将无法向您提供个性化广告,也不会将您的个人信息交给任何第三方。

    定位 Cookies

    这些 cookies 可能由我们的广告合作伙伴通过我们的网站设置。这些公司可能会使用它们来建立您的兴趣档案,并在其他网站上向您展示相关广告。它们不直接存储个人信息,而是基于唯一标识您的浏览器和互联网设备。如果您不允许使用这些 cookie,您将体验到较少针对性的广告。

    我们正使用 cookies 来改善您的访问体验

    派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

    如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》