新增購買按鈕程式碼到 HTML

在 Shopify 管理介面建立購買按鈕後，即可將該按鈕新增到自己的網站或網誌中。

視您要在發佈平台 (或搭配該平台佈景主題) 上顯示購買按鈕和購物車的方式和位置而定，新增內嵌程式碼到網站來源 HTML 的程序可能有所不同。

備註

如果您需要協助以將內嵌程式碼新增至 Shopify 以外的發佈平台 (例如 Squarespace 或 WordPress)，請直接與您的網站供應商或發佈平台聯絡以取得支援。

將內嵌程式碼新增至 WordPress

您可以在 WordPress 網站的貼文、頁面或範本中新增內嵌程式碼。

備註

內嵌購買按鈕與自我裝載的 WordPress.org 網站以及 WordPress.com 提供的特定方案相容。撰寫以下文件時已考量最新版 WordPress。您網站所安裝的版本可能不同。您可以造訪 WordPress 支援網站以深入瞭解 WordPress 版本。

將內嵌程式碼新增到 WordPress 貼文或頁面

1. 在 Shopify 中建立購買按鈕，然後從「內嵌程式碼」對話方塊中複製該按鈕的內嵌程式碼，或點擊「將內嵌程式碼複製到剪貼簿」。
2. 從 Wordpress 控制面板中前往您的貼文或頁面。
3. 建立新貼文或頁面，或是編輯現有貼文或頁面。
4. 在區塊編輯器中，點擊「+」按鈕並搜尋「Custom HTML」，然後再點擊以插入自訂 HTML 區塊。
5. 將內嵌程式碼貼入自訂 HTML 區塊提供的文字欄位中。

6. 選用：移動自訂 HTML 區塊或預覽購買按鈕的顯示方式：

   • 若要移動自訂 HTML 區塊，請點擊區塊工具列中的箭頭按鈕，或將該區塊拖曳至新位置。
   • 若要預覽購買按鈕，請點擊區塊工具列上的「預覽」。

7. 完成後，請點擊貼文或頁面的「儲存草稿」、「預覽」或「發佈」按鈕。

如果您使用 WordPress 的經典編輯器外掛程式，請將文字編輯器從「視覺化」變更為「文字」模式，然後在編輯器中貼上內嵌程式碼，來取代使用自訂 HTML 區塊。

將內嵌程式碼新增到 WordPress 範本

如果您的 WordPress 佈景主題支援網站編輯器，您可以在任何網站範本中新增內嵌購買按鈕。

步驟：

1. 在 Shopify 中建立購買按鈕，然後從「內嵌程式碼」對話方塊中複製該按鈕的內嵌程式碼，或點擊「將內嵌程式碼複製到剪貼簿」。
2. 在 WordPress 控制面板中，前往編輯器。
3. 導覽至要編輯的範本。
4. 在區塊編輯器中，點擊「+」按鈕並搜尋「Custom HTML」，然後再點擊以插入自訂 HTML 區塊。
5. 將內嵌程式碼貼入自訂 HTML 區塊提供的文字欄位中。

6. 選用：移動自訂 HTML 區塊或預覽購買按鈕的顯示方式：

   • 若要移動自訂 HTML 區塊，請點擊區塊工具列中的箭頭按鈕，或將該區塊拖曳至新位置。
   • 若要預覽購買按鈕，請點擊區塊工具列上的「預覽」。

7. 完成後，請點擊範本的「預覽」或「儲存」按鈕。

新增內嵌程式碼到 Shopify 部落格

備註

購買按鈕所建立的是獨立購物車。因此，若您的顧客移至網路商店的其他頁面，該購物車內的商品就會消失。您可以編輯購買按鈕，以直接前往結帳頁面。

步驟：

電腦版

1. 從 Shopify 管理介面中，前往「線上商店 > 部落格貼文」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「部落格貼文」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「部落格貼文」。

1. 在「部落格貼文」頁面中，按一下您要編輯的部落格貼文，或按一下「新增部落格貼文」以建立新貼文。
2. 在「撰寫網誌文章」區段中，點擊 RTF 文字編輯器中的「顯示 HTML」。
3. 將內嵌程式碼貼入主要文字欄位中。
4. 點擊「儲存」。

新增內嵌程式碼到 Squarespace

注意

有些 Squarespace 上的進階自訂設定僅適用於特定佈景主題，Shopify 不支援這些自訂設定。

您可新增嵌入程式碼到 Squarespace 中的個別文章和首頁選單。在某些情況下，您可能會想在這兩處都嵌入程式碼。例如，您可以在首頁嵌入購物車，以便處理從個別文章的「購買」按鈕所導入的購買。

步驟：

1. 在 Squarespace 控制面板中，開啟您要新增嵌入程式碼的網頁。
2. 在頁面上找到您要顯示購買按鈕或內嵌購物車的元素，將滑鼠游標移至「頁面內容」區域上方，然後按一下「編輯」。
3. 在您要新增嵌入程式碼的位置按一下插入點。
4. 在「內容區塊」對話方塊的「更多」區段中，按一下「程式碼」。
5. 從 Shopify 管理員的「內嵌程式碼」對話方塊中複製內嵌程式碼。
6. 在 Squarespace 控制面板中，將嵌入程式碼貼入「程式碼」對話方塊中。確保文字欄位已設為接受 HTML。
7. 按一下「編輯程式碼」對話方塊中的「套用」。
8. 再按一下頁面編輯器中的「儲存」。由於 Squarespace 在控制面板中停用 JavaScript，您必須從另外的頁面預覽，查看已新增的購買按鈕或內嵌購物車。

如果完成這些步驟後，購買按鈕並未載入，則您可能必須停用 Ajax 載入功能。如需瞭解詳情，請前往「啟用或停用 Ajax」。

備註

若在 Squarespace 首頁上的選單新增內嵌購物車，便可接收內嵌於個別貼文中的「購買」按鈕導入的訂單。

新增內嵌程式碼到 Wix

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

注意

如果您想為多個產品或商品系列嵌入購買按鈕，則必須先編輯內嵌程式碼，才能將其新增到 Wix HTML 程式碼小工具上。如果您未編輯內嵌程式碼就在 Wix 網站中嵌入多個購買按鈕，顧客要購買多項產品時，每項產品都會出現在不同的購物車上。

如果您想在 Wix 網站上顯示多項產品，但不想另外編輯嵌入程式碼，建議您嵌入產品系列。您可在 Shopify 管理介面為要在 Wix 上顯示的產品建立新系列。

步驟：

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

備註

建立 Wix 網站的購買按鈕時，因 Wix 限制，您無法使用「在相同索引標籤中重新導向」選項。

1. 從 Wix 帳戶的「我的網站」區段找到您要編輯的網站，然後按一下「編輯網站」。
2. 在 Wix 網站編輯器中，依序按一下 + 按鈕和「更多」。
3. 按一下「HTML 程式碼」，以在頁面上新增 HTML 程式碼小工具。
4. 按一下「輸入程式碼」。
5. 在「HTML 設定」對話方塊的「在這裡新增程式碼」欄位中，貼上購買按鈕或內嵌商品系列的嵌入程式碼，然後按一下「更新」。
6. 根據內容長度重新調整 HTML 程式碼小工具大小。如果您建立的嵌入程式碼含購物車，請務必確定購物車索引標籤顯示於適當位置。
7. 完成後，請按一下「儲存」。

嵌入多個產品或系列

步驟：

1. 在您的 Shopify 管理介面中為產品或商品系列建立購買按鈕，然後複製該按鈕的內嵌程式碼。
2. 在程式碼編輯器或 Wix 網站建立工具中貼上程式碼。重複前兩個步驟，直到您將需要的購買按鈕都建立完成。
3. 編輯時，請確保嵌入程式碼正確對齊顯示。
4. 從 Wix 帳戶的「我的網站」區段找到您要編輯的網站，然後按一下「編輯網站」。
5. 在 Wix 網站編輯器中，依序按一下 + 按鈕和「更多」。
6. 按一下「HTML 程式碼」，以在頁面上新增 HTML 程式碼小工具。
7. 按一下「輸入程式碼」。
8. 在「HTML 設定」對話方塊的「在這裡新增程式碼」欄位中，貼上已編輯的購買按鈕程式碼，然後按一下「更新」。
9. 根據內容長度重新調整 HTML 程式碼小工具大小。如果您建立的嵌入程式碼含購物車，請務必確定購物車索引標籤顯示於適當位置。
10. 完成後，請按一下「儲存」。

備註

使用 Wix 編輯器時需要協助嗎？請聯絡 Wix 支援服務。

個別新增指令碼標記

有些平台 (例如：Unbounce) 會要求您在頁面標頭貼上內嵌程式碼的 <script> 標記，並將內嵌程式碼的其餘部分貼在您希望購買按鈕顯示的位置。

步驟：

1. 從您建立購買按鈕時所產生的嵌入程式碼中，複製 <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>

1. 開啟您要嵌入購買按鈕的網站頁面標頭。

2. 將整個 <script> 元素貼到頁面標頭中。

3. 儲存變更。

4. 從 Shopify 管理員產生的原始嵌入程式碼中，僅複製 <div> 元素。例如：

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

1. 找到並開啟您要嵌入購買按鈕的網站頁面。

2. 將 <div> 程式碼片段貼到頁面中。

3. 儲存變更。