Shopify是网络上最著名和使用最广泛的电子商务平台之一。各行各业的商人都可以轻松地使用它在线销售他们的产品或服务。该平台目前拥有数千名商人。
Shopify的前提是允许没有太多复杂技术和编程知识的用户开放自己的在线店面。这自然是平台成功的重要组成部分，因为普通的Joes可以辞职，成为成功的企业家。
在Shopify平台中，从商家的角度来看，用户体验中最有趣的方面是结帐过程，因为结帐过程的设计方式极大地影响了Shopify网站上的转化。
以下是一些出色的指针，可针对高级UX自定义平台的结帐流程…
1.调整结帐副本
购物者在结帐过程中阅读的内容会影响网站的购物车放弃率，并且是他们在最终单击或点击最终结帐号召性用语按钮时所遇到的摩擦的一个因素。
因此，必须更改此最重要的文字以减少结帐摩擦并提高说服力，这是必须的，下面是操作方法：
有时，在向购物者提供准确和清晰的信息时，简单的更改会改变世界。例如，让购物者知道他们将用什么货币付款对于良好的用户体验至关重要，因为这消除了转化途中的意外惊喜。
在Shopify仪表板中，转到Preferences，然后单击General。
在“ 调整标准和格式”中，选择“ 签出语言”，然后单击“ 检查”。您会看到一个翻译屏幕。在这里，为您的翻译提供一个名称（例如，您的商店叫什么名称）。找到您想要更改的文本；假设它在“ 创建您的订单”中。输入要显示在购物车页面上的文本（阅读：翻译）。
现在，滚动到页面底部，然后选择“ 将其用于我的结帐语言”。
值得一提的是，Shopify仅允许您在结帐页面上正式更改语言（英语为西班牙语等）。但是，此解决方案在其平台上可让您使用翻译功能来实际修改结帐页面上副本的特定措辞。
2.包括运费计算器
对购物者而言，最令人沮丧的莫过于被运输成本所蒙蔽了！实际上，哈里斯（Harris）的一项民意调查证实，有66％的在线购物者将运输成本列为最糟糕的宠儿。因此，在结帐页面上配备方便的运费计算器可以极大地提高Shopify客户的用户体验，因为他们会自动获得当场的运费估算，从而消除了隐性费用。
为此，请先使用以下JS代码片段将jquery.cart.min.js上传到主题资产：
/**
然后，选择并复制所有文本，在新选项卡中打开Shopify管理员，然后单击Online Store，然后单击Shopify管理员中的主题。
找到所需的主题后，单击省略号按钮（…）；单击“确定”。然后点击编辑HTML / CSS。在“ 资产”文件夹中，选择“ 添加新资产”。对话框打开时，选择创建空白文件选项卡；输入jquery.cart.min作为名称，然后选择.js作为新文件的扩展名。点击添加资产。最后，粘贴您先前复制的内容，然后选择保存。
现在，您必须添加到“定制主题”页面。
首先找到并单击“ 编辑HTML / CSS”页面上的“ 配置 ” 。在Config文件夹上，选择settings_schema.json文件。现在，该文件将在在线文本编辑器中打开。
转到settings_schema.json文件的底部，然后在最后一个方括号（]之前和最后一个大括号（}之后）添加以下代码：
{ "name": "Shipping Rates Calculator",
点击保存。
现在该继续介绍运输计算器代码段了。
复制此代码：
{% 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">Country</label> <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">Province</label> <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 Code</label> <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> <!--[if lte IE 8]>
在新选项卡中打开Shopify管理员，单击“ 在线商店”，然后选择“ 主题”。
选择您要编辑的主题，选择省略号（...）按钮，然后选择“ 编辑HTML / CSS”。
选择“ 片段”文件夹，然后选择“ 添加新片段”。将代码段命名为“ shipping-calculator”；选择创建代码段。
现在，将剪贴板的内容粘贴到在线代码编辑器中，然后单击“ 保存”。
要在页面上的特定位置显示运输计算器，请包含以下代码段：
{% include 'shipping-calculator' %}在适当的地方。按着这些次序：
- 选择在线商店，然后从Shopify管理员中选择主题。
- 找到要编辑的主题后，选择省略号（...）按钮，然后选择“ 编辑HTML / CSS”。
- 单击Templates文件夹下的cart.liquid文件，以在在线代码编辑器中将其打开。
- 搜索</ form>并在其下面添加上述代码。
- 最后，保存更改。
剩下的就是自定义运费计算器。
前往您的“定制”主题页面。查找运费计算器部分，并自定义以下内容：
- 是否显示计算器
- 计算器上方显示的确切送货文本
- 默认国家选择
- 将在“提交”按钮上显示的副本
大功告成！
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文件以在在线代码编辑器中打开它。找到您的购物车表单的结束标记，即</ form>
在</ form>上方，添加以下行：
<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文件以在在线代码编辑器中打开它。
在</ head>标记之前，添加以下内容：
{{ '//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的代码可让您轻松地在商店中针对各种结帐体验元素进行自定义：副本或文本，计算运费以及显示交货日期选择。
