派迪教你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' }}h3><div><p class="field"><label for="address_country">countrylabel><select id="address_country" name="address[country]" data-default="{% if shop.customer_accounts_enabled and customer %}{{ customer.default_address.country }}{% elsif settings.shipping_calculator_default_country != '' %}{{ settings.shipping_calculator_default_country }}{% endif %}">{{ country_option_tags }}select>p><p class="field" id="address_province_container" style="display:none;"><label for="address_province" id="address_province_label">provincelabel><select id="address_province" name="address[province]" data-default="{% if shop.customer_accounts_enabled and customer and customer.default_address.province != '' %}{{ customer.default_address.province }}{% endif %}">select>p><p class="field"><label for="address_zip">zip/postal codelabel><input type="text" id="address_zip" name="address[zip]"{% if shop.customer_accounts_enabled and customer %} value="{{ customer.default_address.zip }}"{% endif %} /> p> <p class="field"><input type="button" class="get-rates btn button" value="{{ settings.shipping_calculator_submit_button_label | default: 'calculate shipping' }}" />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>{{ '//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 }}} );script>{% endunless %}

在新选项卡中打开shopify管理员,单击“ 在线商店”,然后选择“ 主题”

选择您要编辑的主题,选择省略号(...)按钮,然后选择“ 编辑html / css”。

选择“ 片段”文件夹,然后选择“ 添加新片段”。将代码段命名为“ shipping-calculator”;选择创建代码段。

现在,将剪贴板的内容粘贴到在线代码编辑器中,然后单击“ 保存”

要在页面上的特定位置显示运输计算器,请包含以下代码段:

{% include 'shipping-calculator' %}

在适当的地方。按着这些次序:

  • 选择在线商店,然后从shopify管理员中选择主题
  • 找到要编辑的主题后,选择省略号(...)按钮,然后选择“ 编辑html / css”。
  • 单击templates文件夹cart.liquid文件,以在在线代码编辑器中将其打开。
  • 搜索并在其下面添加上述代码。
  • 最后,保存更改。

剩下的就是自定义运费计算器。

前往您的“定制”主题页面。查找运费计算器部分,并自定义以下内容:

  • 是否显示计算器
  • 计算器上方显示的确切送货文本
  • 默认国家选择
  • 将在“提交”按钮上显示的副本

大功告成!

 

3.在购物车页面上显示交货日期选择器

让客户看到他们的产品何时交付不仅是标准的客户服务,而且还是购物网站上一流的用户体验。

要在购物车页面上包括日期选择器,请执行以下操作。

转到assets文件夹并打开它。assets目录中,打开theme.jstheme.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:label> <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" /> <span style="display:block" class="instructions"> we do not deliver during the week-end.span> p> div>

保存这些新更改。

layout文件夹下查看:单击theme.liquid文件以在在线代码编辑器中打开它。

标记之前,添加以下内容:

{{ '//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">script>

恭喜!现在,您将在商店的购物车页面上看到交货日期字段。单击文本字段将显示日期选择器。

 

强大的平台,但仅与定制的ux一样好

网站设计制作确实是一个灵活且非常实用的平台,它允许许多普通人以最低的技术技能快速进行在线销售。对于企业家来说,这是一个很好的平台,可以完成从直接运输到建立自己的商业帝国的一切工作。

但是,与任何平台一样,ux最终是使其成功的原因。值得庆幸的是,shopify的代码可让您轻松地在商店中针对各种结帐体验元素进行自定义:副本或文本,计算运费以及显示交货日期选择。

返回观点列表
本文标签:

相关专题

  • 品牌利来手机网址官网设计

    杭州派迪科技为高端客户提供品牌利来手机网址官网咨询策划,品牌利来手机网址官网设计,品牌利来手机网址官网建设开发服务,以国际化视野和标准为基础,为各行业领军品牌提供高端企业网站定制、策划、设计、互动与制作

    查看详情
  • 大策略营销门户网站

    杭州派迪科技有自己的营销型网站cms系统,适合白帽seo网站。特别对大策略的营销型门户网站制作有一定的经验,曾经为上海天擎外贸行业网站、浙江兆龙营销型门户、先临三维门户营销网站提供全程的利来手机娱乐的技术支持及seo优化指导

    查看详情
  • 集团/上市公司网站

    杭州派迪科技为杭州本地集团公司提供网页设计、制作、开发服务,为集团公司网站建设提供了响应式、营销型、品牌型、门户型网站建设需求,欢迎广大集团公司客户咨询

    查看详情
  • 外贸网站建设

    杭州派迪科技为高端客户提供外贸网站咨询策划,外贸利来手机网址官网设计,外贸利来手机网址官网建设开发服务,以谷歌搜索引起算法为基础,为各行业外贸公司提供高端企业外贸网站定制、策划、设计、互动与制作

    查看详情
  • 企业网站建设

    高端专业、令人印象深刻的用户界面、易于访问——企业网站必须反映一切,因为派迪科技在这里提供帮助,凭借精湛的技术、丰富的经验、与客户的持续沟通以及对每一个细节的关注,我们确保在快速的周期时间内提供优质的服务。

    查看详情
  • 杭州派迪科技模板网站建设专题_各行业方案专题栏目提供各行业产品适合的网站建设方案,帮助企业了解派迪科技建站效果等信息,您可以通过本站了解各行业网站建设方案,如需要获取本行业定制网站建设方案,可以联系在线客服或拨打电话咨询

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

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

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

派迪业务总监微信号

了解最新项目报价

派迪产品经理钉钉号

免费获取项目方案

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

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

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

cookie 偏好

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

管理cookie偏好

基本 cookie

始终允许

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

性能 cookie

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

功能性 cookie

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

定位 cookie

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

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

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

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