將購買按鈕程式碼加入 HTML

在 Shopify 管理介面中建立購買按鈕後，您即可將它加入自己的網站或網誌。

將內嵌程式碼新增至您網站的來源 HTML 的流程會因您希望購買按鈕與購物車的呈現方式與位置、您使用的發佈平台，以及有時還包含該平台上的佈景主題而略有不同。

本頁內容

在 WordPress 新增內嵌程式碼

您可以在 WordPress 網站的文章、頁面或範本中加入內嵌程式碼。

在 WordPress 文章或頁面加入內嵌程式碼

在 Shopify 中建立購買按鈕，並從內嵌程式碼對話方塊中複製其程式碼 (或按一下將內嵌程式碼複製到剪貼簿)。
在 WordPress 控制台中，前往您的文章或頁面。
您可以新增一則文章或頁面，或編輯現有內容。
在區塊編輯器中，按一下 + 按鈕，搜尋 自訂 HTML，然後點選以插入「自訂 HTML」區塊。
將內嵌程式碼貼到自訂 HTML 區塊提供的文字欄位中。
選用：移動自訂 HTML 區塊，或預覽購買按鈕的顯示方式：
- 若要移動自訂 HTML 區塊，請按一下該區塊工具列中的箭頭按鈕，或將區塊拖曳至新位置。
- 若要預覽購買按鈕，請在區塊工具列上按一下預覽。
完成後，請在文章或頁面上按一下儲存草稿、預覽或發佈按鈕。

如果您使用 WordPress 的Classic Editor Plugin，則無需使用自訂 HTML 區塊，請將文字編輯器從視覺化切換為文字模式，然後將內嵌程式碼貼到編輯器中。

在 WordPress 範本中加入內嵌程式碼

若您的 WordPress 佈景主題支援網站編輯器，您即可在網站的任何範本中加入嵌入式購買按鈕。

步驟：

在 Shopify 中建立購買按鈕，並從內嵌程式碼對話方塊中複製其程式碼 (或按一下將內嵌程式碼複製到剪貼簿)。
在 WordPress 控制台中前往編輯器。
前往您要編輯的範本。
在區塊編輯器中，按一下 + 按鈕，搜尋 自訂 HTML，然後點選以插入「自訂 HTML」區塊。
將內嵌程式碼貼到自訂 HTML 區塊提供的文字欄位中。
選用：移動自訂 HTML 區塊，或預覽購買按鈕的顯示方式：
- 若要移動自訂 HTML 區塊，請按一下該區塊工具列中的箭頭按鈕，或將區塊拖曳至新位置。
- 若要預覽購買按鈕，請在區塊工具列上按一下預覽。
完成後，請在範本上按一下預覽或儲存。

在您的 Shopify 網誌新增內嵌程式碼

注意：

步驟：

電腦版

在 Shopify 管理介面中，前往內容 > 網誌文章。
在網誌文章頁面中，按一下要編輯的網誌文章標題，或按一下新增網誌文章以建立新文章。
在撰寫網誌文章區段中，於富文本編輯器中按一下顯示 HTML。
將內嵌程式碼貼到主要文字欄位中。
按一下儲存。

行動裝置

在 Shopify app 中，點選圖示。
在內容選單中，點選圖示，然後點選網誌文章。
點選您要編輯的網誌文章。
在內容區段中，點選…，然後點選圖示。
將內嵌程式碼貼到文字欄位中。
點選儲存或✓。

在 Squarespace 新增內嵌程式碼

您可以在 Squarespace 的個別文章中加入內嵌程式碼，也可以加入到首頁的選單。在某些情況下，您可能會同時這麼做。舉例來說，您可以在首頁嵌入購物車，以接收您在個別文章中嵌入之購買按鈕所產生的購買。

步驟：

在 Squarespace 控制台中，開啟您要新增內嵌程式碼的網頁。
在頁面上找到您要顯示購買按鈕或內嵌購物車的位置，將游標移到 Page Content 區域，然後按一下 EDIT。
在您要加入內嵌程式碼的位置，按一下插入點。
在 Content Blocks 對話方塊的 More 區段中，按一下 Code。
從 Shopify 管理介面的 內嵌程式碼 對話方塊中，複製內嵌程式碼。
在您的 Squarespace 控制面板中，將內嵌程式碼貼到 CODE 對話方塊。請確認文字欄位已設定為接收 HTML。
在 EDIT CODE 對話方塊中按一下 APPLY。
在頁面編輯器中再按一次 SAVE。由於 Squarespace 會在其控制面板停用 JavaScript，您需要另外預覽頁面，以確認購買按鈕或內嵌購物車是否正常運作。

若您依照步驟完成後，購買按鈕仍無法載入，可能需要關閉 Ajax 載入。詳情請參閱 Enable or disable Ajax。

將內嵌程式碼新增至 Wix

在 Shopify 管理介面中建立購買按鈕或商品系列後，您可使用 Wix 網站編輯器將其新增至 Wix 網站。

若您不想編輯內嵌程式碼，卻希望在 Wix 網站上展示多個商品，可以改為嵌入商品系列。您可在 Shopify 管理介面中建立新商品系列，用來放入想在 Wix 上展示的商品。

步驟：

在 Shopify 管理介面中為商品或商品系列建立購買按鈕，然後複製其內嵌程式碼。

在您的 Wix 帳戶中，於 My Sites 區段找到要編輯的網站，然後按一下 Edit Site。
在 Wix 網站編輯器中，按一下 + 按鈕，然後按一下 More。
按一下 HTML Code，將 HTML 程式碼小工具加入頁面。
按一下 Enter Code。
在 HTML Settings 對話方塊中，將購買按鈕或商品系列的內嵌程式碼貼到 Add your code here 欄位，然後按一下 Update。
調整 HTML 程式碼小工具的大小以符合其內容。若您建立的是含購物車的嵌入，請確認購物車分頁顯示在正確位置。
完成後，按一下 Save。

嵌入多個商品或商品系列

步驟：

在 Shopify 管理介面中為商品或商品系列建立購買按鈕，然後複製其內嵌程式碼。
將程式碼貼到程式碼編輯器或 Wix 網站建立工具中。重複前兩個步驟，直到建立所需的購買按鈕。
編輯內嵌程式碼，確保顯示的對齊方式正確。
在您的 Wix 帳戶中，於 My Sites 區段找到要編輯的網站，然後按一下 Edit Site。
在 Wix 網站編輯器中，按一下 + 按鈕，然後按一下 More。
按一下 HTML Code，將 HTML 程式碼小工具加入頁面。
按一下 Enter Code。
在 HTML Settings 對話方塊中，將購買按鈕的已編輯程式碼貼到 Add your code here 欄位，然後按一下 Update。
調整 HTML 程式碼小工具的大小以符合其內容。若您建立的是含購物車的嵌入，請確認購物車分頁顯示在正確位置。
完成後，按一下 Save。

將指令碼標籤分開加入

部分平台 (例如 Unbounce) 要求您將內嵌程式碼中的 <script> 標籤貼到頁首，並將其餘內嵌程式碼貼到您要顯示購買按鈕的頁面。

步驟：

從建立購買按鈕所產生的內嵌程式碼中，同時複製 <div> 元素與 <script> 元素。例如：

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    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({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

開啟您要嵌入購買按鈕的網站頁首。
將整段 <script> 元素貼到頁首。
儲存變更。
從 Shopify 管理介面中的原始內嵌程式碼，只複製 <div> 元素。例如：

<div id='product-component-2dd3c8704e6'></div>

開啟您要嵌入購買按鈕的網站頁面。
將 <div> 程式碼片段貼到頁面。
儲存變更。