js動态給按鈕賦id_如何給SHOPIFY店鋪添加“立即購買”動态結賬按鈕

動态結賬按鈕會根據店鋪背景所支援的第三方快速結賬付款方式和顧客裝置浏覽器的記錄動态展示快速結帳按鈕，比如PayPal Express Checkout、Apple Pay等。當然如果浏覽器沒有記錄或者店鋪背景沒有支援的快速結帳付款方式，按鈕則會顯示為“buy it now”。

Dynamic checkout button

顧客可以使用動态結帳按鈕快速購買他們想要的商品，直接跳過購物車，縮短了購物流程，對店鋪的轉化率會有一定的提升。是以說，給商品子產品添加“立即購買”按鈕還是有必要的。

小貼士

1. 在進行代碼修改之前記得先去确認下模闆編輯器中有沒有相關功能的設定項，如果有的話，就沒必要額外開發代碼來實作了；

2. 在做任何大的代碼修改之前，一定要記得備份模闆，這樣即使把模闆改亂了後面也可以輕松復原代碼；

3. 需要懂一些基本的HTML、CSS、JS和liquid代碼知識。

一般模闆會有兩個地方需要手動更新代碼來支援Dynamic checkout button，第一是商品詳情頁模闆，第二是首頁Featured product section子產品。兩個地方的操作都是類似的，都是更新模闆裡的Product form部分。下面是操作示範。

步驟：

1. 登陸到Shopify店鋪背景, 找到 Online Store > Themes ；
2. 選擇要編輯的模闆，然後點選 Actions > Edit code ；
3. 在section檔案夾中，找到以下兩個檔案：
   1. 點選 Product-template.liquid，有些模闆可能直接是 product-form.liquid，打開檔案；
   2. 點選 featured-product.liquid，打開檔案；
4. 通過Command+F（Mac）/Ctrl+F（PC）搜尋查找

   <form action="/cart/add"

   . 找到之後，記錄該form标簽的屬性，比如class或者ID，這些屬性在我們更新form的時候還要添加上去，不然可能會有一些樣式上或者功能上的差别；
5. 删除

   <form>

   标簽，替換為:

   {% form 'product', product %}

   ，如果form之前有一些屬性，我們還得加上，格式為：

   {% form 'product', product, id: "oldID", class: "old-class" %}

   ，替換裡面的oldID或者old-class；
6. 接着搜尋找到

   </form>

   ，并替換為:

   {% endform %}

   ；
7. 然後搜尋

   input

   或者

   button

   标簽找到add to cart按鈕，一般會帶有

   type="submit"

   這個屬性；
8. 在 Add to cart 按鈕的下面一行, 添加動态結賬按鈕的代碼:

   {{ form | payment_button }}

9. 點選儲存，更改之後的form裡面的内容應該類似：

{% form ‘product’, product %} … <button type=”submit”>Add to cart</button> {{ form | payment_button }} … {% endform %}

布局獨立站首選Shopify，現在注冊可享14天免費體驗+贈送價值$180精美模闆一套+更多建站支援

Create your online store today with Shopify​www.shopify.com

原文請查閱雲跨境官網

如何給Shopify店鋪添加“立即購買”動态結賬按鈕​www.yunecommerce.com