自訂或移除購買按鈕、內嵌產品系列或內嵌購物車

您可以在網頁的原始 HTML 中編輯內嵌程式碼，藉此變更購買按鈕、內嵌產品系列或內嵌購物車的外觀或行為。此外，您也可以從網頁移除程式碼來刪除內嵌內容。

購買按鈕會顯示商品及購買按鈕。內嵌產品系列會顯示多種商品。內嵌購物車則會顯示獨立的購物車，讓顧客能跨網頁使用。

內嵌程式碼是您在建立購買按鈕或購物車時，從 Shopify 管理介面複製並貼至網頁 HTML 中的程式碼片段。內嵌程式碼是以 JavaScript 撰寫，此程式語言用於在網頁上新增互動式功能。

本頁內容

瞭解購買按鈕的內嵌程式碼

每個購買按鈕都是由稱為「元件」的獨立區塊組成。元件是內嵌程式碼中已命名的區段，負責控制購買按鈕體驗的某個部分。舉例而言，當您在網頁上新增含有購物車的商品時，內嵌程式碼會產生下列元件：

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'
          }
        }
      }
    }
  });
});

每個元件都是透過內嵌程式碼中的設定物件進行設定。物件是一種結構化的設定群組，格式為鍵/值對 (key-value pair) 的清單：

鍵代表設定名稱，例如 buttonDestination。
值代表該設定的內容，例如 'cart'。

物件類似於試算表：每個鍵對應一個欄名，而每個值則對應儲存格內容。若要變更購買按鈕的外觀或行為，請編輯設定物件內的鍵和值。

每個元件都有許多可編輯的鍵。如需完整的可編輯鍵清單，請查看開發人員文件。若要設定內嵌程式碼中尚未存在的鍵，請將該鍵新增至適當的物件。如需範例，請參閱「變更商品內嵌的版面配置」。

自訂元件樣式

每個元件都有一個可控制元件外觀的巢狀 styles 設定物件。巢狀物件是位於另一個物件之內的物件。

styles 物件使用 CSS (用來描述網頁元素視覺樣式的語言)。styles 物件中的每個頂層鍵都代表元件中的一個元素，例如標題或按鈕。在該鍵之內，每個巢狀鍵都是一個 CSS 屬性 (例如 background-color 或 border)，而其值則是 CSS 值。

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

任何有效的 CSS 屬性都可以新增至 styles。請務必將含有連字號的屬性名稱加上引號。

如需 CSS 自訂的更多資訊，請 view the developer documentation。

內嵌產品系列元件

內嵌產品系列與購買按鈕使用相同的設定物件。若要編輯產品系列中商品的版面配置或其他屬性，請尋找 product 設定物件，並以編輯商品內嵌內容的相同方式進行編輯。若要編輯產品系列本身的屬性 (例如「下一頁」按鈕的文字)，則請編輯 productSet 設定物件。

有些鍵 (例如元件文字) 會透過巢狀物件設定。舉例來說，「下一頁」按鈕的文字位於 productSet 元件的 text 物件中：

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

商品詳情互動視窗是顯示商品資訊的彈出式視窗。若要將顧客引導至商品詳情互動視窗而非購物車，請在網頁的原始 HTML 中編輯購買按鈕的內嵌程式碼。

步驟：

開啟包含您要變更的商品內嵌項目的頁面 HTML。
找出 product 設定物件。
在該物件中找到 buttonDestination 鍵：

options: {
      product: {
        buttonDestination: 'cart'
      }
}

將該鍵的值變更為 'modal' (包含引號)：

options: {
      product: {
        buttonDestination: 'modal'
      }
}

儲存變更。

變更商品內嵌的版面配置

水平方向的商品內嵌版面配置會將圖片放置於商品詳情旁邊，而非上方。若要切換至此版面配置，請在網頁的原始 HTML 中編輯購買按鈕的內嵌程式碼。

步驟：

開啟包含您要變更的商品內嵌項目的頁面 HTML。
找出 product 設定物件。
新增一個 layout 鍵，然後將值設為 'horizontal'。請確認該值包含引號，且上一行結尾處為逗號：

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

儲存變更。

變更購物車內嵌的外觀與行為

若要變更購物車的外觀或行為，請編輯內嵌程式碼中的 cart 設定物件。

步驟：

開啟包含您要編輯的購物車的頁面 HTML。
在您的內嵌程式碼中找到 cart 設定物件：

options: {
      cart: {
        startOpen: false
      }
}

編輯現有的鍵或新增一個鍵，即可變更購物車的外觀或行為。如需完整的可設定鍵清單，請查看開發人員文件。
儲存變更。

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

若要從網頁移除購買按鈕、內嵌產品系列或內嵌購物車，請將原始 HTML 中的內嵌程式碼刪除。

步驟：

開啟包含購買按鈕、內嵌產品系列或內嵌購物車的網頁原始 HTML。
將原始 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>

儲存變更。