新聞動態(tài)
用文字傳播思想
用行動感動自己
Shopify是網(wǎng)絡(luò)上最著名和使用最廣泛的電子商務(wù)平臺之一。各行各業(yè)的商人都可以輕松地使用它在線銷售他們的產(chǎn)品或服務(wù)。該平臺目前擁有數(shù)千名商人。 Shopify的前提是允許沒有太多復(fù)雜技術(shù)和編程知識的用戶開放自己的在線店面。這自然是平臺成功的重要組成部分，因為普通的Joes可以辭職，成為成功的企業(yè)家。 在Shopify平臺中，從商家的角度來看，用戶體驗中最有趣的方面是結(jié)帳過程，因為結(jié)帳過程的設(shè)計方式極大地影響了Shopify網(wǎng)站上的轉(zhuǎn)化。 以下是一些出色的指針，可針對高級UX自定義平臺的結(jié)帳流程… 1.調(diào)整結(jié)帳副本 購物者在結(jié)帳過程中閱讀的內(nèi)容會影響網(wǎng)站的購物車放棄率，并且是他們在最終單擊或點擊最終結(jié)帳號召性用語按鈕時所遇到的摩擦的一個因素。 因此，必須更改此最重要的文字以減少結(jié)帳摩擦并提高說服力，這是必須的，下面是操作方法： 有時，在向購物者提供準(zhǔn)確和清晰的信息時，簡單的更改會改變世界。例如，讓購物者知道他們將用什么貨幣付款對于良好的用戶體驗至關(guān)重要，因為這消除了轉(zhuǎn)化途中的意外驚喜。 在Shopify儀表板中，轉(zhuǎn)到Preferences，然后單擊General。 在“ 調(diào)整標(biāo)準(zhǔn)和格式”中，選擇“ 簽出語言”，然后單擊“ 檢查”。您會看到一個翻譯屏幕。在這里，為您的翻譯提供一個名稱（例如，您的商店叫什么名稱）。找到您想要更改的文本；假設(shè)它在“ 創(chuàng)建您的訂單”中。輸入要顯示在購物車頁面上的文本（閱讀：翻譯）。 現(xiàn)在，滾動到頁面底部，然后選擇“ 將其用于我的結(jié)帳語言”。 值得一提的是，Shopify僅允許您在結(jié)帳頁面上正式更改語言（英語為西班牙語等）。但是，此解決方案在其平臺上可讓您使用翻譯功能來實際修改結(jié)帳頁面上副本的特定措辭。 2.包括運費計算器 對購物者而言，最令人沮喪的莫過于被運輸成本所蒙蔽了！實際上，哈里斯（Harris）的一項民意調(diào)查證實，有66％的在線購物者將運輸成本列為最糟糕的寵兒。因此，在結(jié)帳頁面上配備方便的運費計算器可以極大地提高Shopify客戶的用戶體驗，因為他們會自動獲得當(dāng)場的運費估算，從而消除了隱性費用。 為此，請先使用以下JS代碼片段將jquery.cart.min.js上傳到主題資產(chǎn)： /** * 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 然后，選擇并復(fù)制所有文本，在新選項卡中打開Shopify管理員，然后單擊Online Store，然后單擊Shopify管理員中的主題。 找到所需的主題后，單擊省略號按鈕（…）；單擊“確定”。然后點擊編輯HTML / CSS。在“ 資產(chǎn)”文件夾中，選擇“ 添加新資產(chǎn)”。對話框打開時，選擇創(chuàng)建空白文件選項卡；輸入jquery.cart.min作為名稱，然后選擇.js作為新文件的擴(kuò)展名。點擊添加資產(chǎn)。最后，粘貼您先前復(fù)制的內(nèi)容，然后選擇保存。 現(xiàn)在，您必須添加到“定制主題”頁面。 首先找到并單擊“ 編輯HTML / CSS”頁面上的“ 配置 ” 。在Config文件夾上，選擇settings_schema.json文件。現(xiàn)在，該文件將在在線文本編輯器中打開。 轉(zhuǎn)到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) ." } ] } 點擊保存。 現(xiàn)在該繼續(xù)介紹運輸計算器代碼段了。 復(fù)制此代碼： {% 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 }} } ); 并在其下面添加上述代碼。 最后，保存更改。 剩下的就是自定義運費計算器。 前往您的“定制”主題頁面。查找運費計算器部分，并自定義以下內(nèi)容： 是否顯示計算器 計算器上方顯示的確切送貨文本 默認(rèn)國家選擇 將在“提交”按鈕上顯示的副本 大功告成！ 3.在購物車頁面上顯示交貨日期選擇器 讓客戶看到他們的產(chǎn)品何時交付不僅是標(biāo)準(zhǔn)的客戶服務(wù)，而且還是購物網(wǎng)站上一流的用戶體驗。 要在購物車頁面上包括日期選擇器，請執(zhí)行以下操作。 轉(zhuǎn)到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文件以在在線代碼編輯器中打開它。找到您的購物車表單的結(jié)束標(biāo)記，即 在上方，添加以下行： <div style="width:300px; clear:both;"> <p> <label for="date">Pick a delivery date:標(biāo)記之前，添加以下內(nèi)容： {{ '//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">
