免費(fèi)參與·100+跨境活動(dòng) 
免費(fèi)下載·4000+跨境資料 
免費(fèi)學(xué)習(xí)·2000+直播課程 
免費(fèi)加入·15萬+賣家交流群 
2019-11-24 09:53
商店購(gòu)物車和結(jié)帳頁(yè)面上的用戶體驗(yàn)對(duì)于客戶的最終購(gòu)買決策有很大的影響，因此，這也是你提升轉(zhuǎn)化率和降低購(gòu)物車放棄率的重要一環(huán)。
Shopify的動(dòng)態(tài)結(jié)帳按鈕的結(jié)賬體驗(yàn)是針對(duì)大部分客戶首選的付款方式（Apple Pay、PayPal等）而量身定制的，這些按鈕能夠大大簡(jiǎn)化客戶的付款步驟。
本文將向你展示如何在自定義主題的產(chǎn)品頁(yè)面和購(gòu)物車頁(yè)面上安裝動(dòng)態(tài)結(jié)帳按鈕。
為多樣的付款喜好和無縫的使用感而設(shè)計(jì)
Apple Pay是用戶群體增長(zhǎng)較快的數(shù)字錢包之一，它允許買家使用其銀行帳戶通過iPhone和Apple Watch快速支付。全球許多大牌都采用Apple Pay作為付款選項(xiàng)，其中包括美國(guó)100強(qiáng)零售商中的74家。
隨著這些付款方式的流行，買家對(duì)電子錢包使用感的要求也越來越高。通過Shopify的動(dòng)態(tài)付款按鈕，賣家現(xiàn)在可以輕松地為客戶提供流暢的支付體驗(yàn)。
目前，與PayPal、Google Pay和Amazon Pay關(guān)聯(lián)的動(dòng)態(tài)付款按鈕可以被添加到自定義主題中的購(gòu)物車頁(yè)面或產(chǎn)品頁(yè)面上。
將動(dòng)態(tài)結(jié)帳按鈕添加到產(chǎn)品頁(yè)面后，客戶單擊購(gòu)物車頁(yè)面時(shí)會(huì)跳過該頁(yè)面，并自動(dòng)進(jìn)入“快速結(jié)帳”流程。將動(dòng)態(tài)結(jié)帳按鈕添加到購(gòu)物車頁(yè)面后，客戶可以僅通過此結(jié)帳流程進(jìn)行購(gòu)買，而無需繼續(xù)進(jìn)行常規(guī)的Shopify結(jié)帳。
通過使用Liquid生成動(dòng)態(tài)結(jié)帳按鈕，你還可以確?？蛻粼诿總€(gè)主題頁(yè)面上都能獲得一致的用戶體驗(yàn)，無論客戶進(jìn)入購(gòu)物車頁(yè)面還是結(jié)賬頁(yè)面，按鈕的外觀都是相同的，不會(huì)讓他們產(chǎn)生疑慮。
使用Liquid生成動(dòng)態(tài)結(jié)帳按鈕
首先，你需要在你的主題內(nèi)，通過搜索找到產(chǎn)品表單<form action="/cart/add"，并將其替換為以下內(nèi)容：
{% form 'product', product, id: "oldID", class: "old-class" %}`
由于不再需要使用HTML表單標(biāo)簽，因此你還需要將</form>標(biāo)簽替換為L(zhǎng)iquid等效標(biāo)簽：{% endform %}。
接下來，你需要通過搜索具有type="submit"屬性的輸入標(biāo)簽或按鈕標(biāo)簽來找出動(dòng)態(tài)結(jié)賬按鈕將要生成的位置。如果你希望動(dòng)態(tài)結(jié)帳按鈕顯示在常規(guī)結(jié)帳按鈕下方，則應(yīng)找到<button>標(biāo)簽，并添加以下代碼：
{{ form | payment_button }}
將其添加到主題后，你應(yīng)該會(huì)看到一個(gè)動(dòng)態(tài)的結(jié)帳按鈕，該按鈕在產(chǎn)品頁(yè)面上顯示為“立即購(gòu)買（Buy it Now）”：
將動(dòng)態(tài)結(jié)帳按鈕添加到購(gòu)物車頁(yè)面是一個(gè)相對(duì)更簡(jiǎn)單的過程。對(duì)于購(gòu)物車頁(yè)面而言，動(dòng)態(tài)結(jié)帳按鈕可以使用{{ content_for_additional_checkout_buttons }}Liquid對(duì)象自動(dòng)生成。
但是，此對(duì)象需要被一個(gè)“additional-checkout-buttons”包含在container中。你可以將其添加到購(gòu)物車模板文件<button>標(biāo)簽下，以進(jìn)行結(jié)帳，并且可以使用一條if語(yǔ)句，以便僅在有其他付款方式時(shí)才加載container。
在購(gòu)物車頁(yè)面上進(jìn)行設(shè)置時(shí)，它應(yīng)如下所示：
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
現(xiàn)在，當(dāng)你導(dǎo)航到購(gòu)物車頁(yè)面時(shí)，就可以看到出現(xiàn)了可用的動(dòng)態(tài)結(jié)帳按鈕：
如果你的自定義主題使用Ajax來更新購(gòu)物車商品數(shù)量而不刷新頁(yè)面，則每次渲染購(gòu)物車時(shí)都需要重新初始化按鈕。在這種情況下，你需要向Ajax購(gòu)物車腳本中添加幾行JavaScript，以確保每次購(gòu)物車出現(xiàn)時(shí)都會(huì)初始化其他結(jié)賬按鈕。
以下腳本將重新初始化其他結(jié)賬按鈕，并且應(yīng)包含在你的JavaScript函數(shù)正在使用的回叫信號(hào)中：
if (window.Shopify && Shopify.StorefrontExpressButtons) {
Shopify.StorefrontExpressButtons.initialize();
正確添加后，每次Ajax購(gòu)物車打開時(shí)，你的其他購(gòu)物車按鈕都將進(jìn)行初始化。
（編譯/雨果網(wǎng) 謝欣欣）
【特別聲明】未經(jīng)許可同意，任何個(gè)人或組織不得復(fù)制、轉(zhuǎn)載、或以其他方式使用本網(wǎng)站內(nèi)容。轉(zhuǎn)載請(qǐng)聯(lián)系：editor@cifnews.com
