新聞動態
用文字傳播思想
用行動感動自己
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:/<%([sS]+?)%>/g,interpolate:/<%=([sS]+?)%>/g,escape:/<%-([sS]+?)%>/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">
