編輯或刪除購買按鈕或內嵌購物車

您從 Shopify 管理員複製程式碼片段並貼到網頁來源 HTML 後,隨即會產生購買按鈕和購物車。這些程式碼片段即稱為嵌入程式碼。如果您想變更按鈕或購物車的外觀或行為,則必須編輯相關的嵌入程式碼。

刪除購買按鈕、內嵌商品系列或內嵌購物車

步驟:

  1. 開啟含有購買按鈕、內嵌商品系列或內嵌購物車的網頁來源 HTML。
  2. 從來源 HTML 將開頭為 <script data-shopify-buy-ui> 且結尾為 </script> 的整段嵌入程式碼刪除。就購買按鈕而言,嵌入程式碼看起來如下:
<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>
  1. 儲存變更。

您的網頁不會再顯示購買按鈕、內嵌商品系列或內嵌購物車。

編輯購買按鈕

若要變更現有購買按鈕的外觀或設定,您必須編輯要新增到來源 HTML 的嵌入程式碼。

每個購買按鈕都是從嵌入程式碼建置的個別「元件」。例如,如果您在網頁上新增有購物車的產品,則嵌入程式碼會產生一個 product (產品) 元件、一個 cart (購物車) 元件及一個購物車 toggle (切換按鈕) 元件:

如果您希望產品元件開啟具有產品詳細資料的互動視窗,則嵌入程式碼會產生一個 modal 元件和一個 modalProduct 元件:

下列程式碼片段中,有 product (產品) 和 cart (購物車) 的個別元件。

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

這些元件會透過嵌入程式碼中的設定「物件」個別進行設定。若要變更購買按鈕的外觀或行為,您可以編輯嵌入程式碼中的設定物件。

每個元件都有多種屬性可供編輯。如需可編輯選項的完整清單,請檢視我們的開發人員說明文件。如果嵌入程式碼內沒有您想設定的選項,您可將適當的「索引鍵」新增到適當的物件 (請參閱範例)。

編輯元件樣式

每個元件都有巢狀的 styles (樣式) 設定物件可供您編輯或新增,以用來變更元件的外觀。這些樣式的格式設定類似於 CSSstyles 物件中的每個頂層索引鍵都代表元件 (例如:標題或按鈕) 中的一個元素。在此物件中,每個索引鍵都是 CSS 屬性 (例如:'background-color' 或 'border'),而值則是 CSS 值。

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

凡是有效的 CSS 屬性都可以新增至 styles。請注意,含有破折號的屬性名稱必須放在單引號之內。

如需有關 CSS 自訂的詳細資訊,請檢視開發人員說明文件

範例:將購物車連結替換成列有產品詳細資料的互動視窗

在此範例中,您可將目前的嵌入程式碼變更為將客戶導向產品詳細資料互動視窗,而非導向購物車:

  1. 開啟包含您要變更之內嵌產品的網頁 HTML。
  2. 找到 product (產品) 設定物件。
  3. 在物件中找出 buttonDestination 鍵。
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. 將該鍵的值變更為 'modal' (請務必加上單引號):
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. 儲存變更。

範例:變更內嵌產品的版面配置

在此範例中,您可變更內嵌產品的版面配置,讓圖片顯示在側邊而非最上方:

  1. 開啟包含您要變更之內嵌產品的網頁 HTML。
  2. 找到 product (產品) 設定物件。
  3. 新增 layout (版面配置) 鍵,然後將值設為 'horizontal' (水平):
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

  1. 儲存變更。

編輯網站的購物車

如果您要變更網站購物車的外觀或行為,您必須編輯嵌入程式碼中的 cart (購物車) 設定物件。

步驟:

  1. 開啟含有您要編輯之購物車的網頁 HTML。
  2. 在嵌入程式碼中找出 cart (購物車) 設定物件。
options: {
      cart: {
        startOpen: false
      }
}
  1. 編輯或新增您要變更的屬性。如需可設定屬性的完整清單,請檢視開發人員說明文件

  2. 儲存變更。

編輯內嵌商品系列

編輯內嵌產品系列的方式與編輯產品或購物車的程序類似。若要編輯產品系列中的產品屬性 (例如:每個產品的版面配置),則您必須找到 product (產品) 設定物件,然後按照您編輯內嵌產品的方式來進行編輯。若要編輯產品系列本身的屬性 (例如:「下一頁」按鈕的文字),則請改為編輯 productSet 鍵。

部分屬性 (例如:元件的文字) 要透過「巢狀」物件進行設定;巢狀物件是指出現在其他物件內的物件。例如,「下一頁」按鈕的文字會出現在 productSet 元件的 text (文字) 物件內:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

準備好開始透過 Shopify 銷售商品了嗎?

免費試用