新增購買按鈕程式碼到 HTML

在 Shopify 管理員中建立購買按鈕後,即可將該按鈕新增到自己的網站或部落格中。

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

新增嵌入程式碼到 WordPress.org 網誌

您可新增嵌入程式碼到個別文章和 WordPress.org 網誌的首頁選單。

新增嵌入程式碼到 WordPress.org 文章

步驟:

  1. 在 Shopify 中建立購買按鈕,然後從「嵌入程式碼」對話方塊中複製該按鈕的嵌入程式碼 (或是按一下「將嵌入程式碼複製到剪貼簿」)。
  2. Wordpress 控制面板中按一下「文章」
  3. 按一下「新增」建立新文章,或找到您想要顯示購買按鈕的現有文章並按一下該文章名稱。
  4. 「新增文章」「編輯文章」頁面中,將文字編輯器從「視覺化」變更為「文字」模式。
  5. 在編輯器的主要文字欄位中,將嵌入程式碼貼在您想要顯示購買按鈕或內嵌商品系列的適當位置。
  6. 完成後,按一下「儲存草稿」「預覽」「發表」

新增嵌入程式碼到 WordPress.org 選單

步驟:

  1. Wordpress 控制面板中按一下「外觀」
  2. 按一下「自訂」開啟佈景主題編輯器,然後按一下「小工具」
  3. 找到您要新增購買按鈕的區域並按一下該區域名稱,或自訂購物車程式碼
  4. 開啟現有的文字小工具,或按一下「新增小工具」,然後按一下「文字」
  5. 將嵌入程式碼貼入「文字」小工具的主要文字欄位中。
  6. 儲存變更。

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

步驟:

  1. 在「部落格貼文」頁面中,按一下您要編輯的部落格貼文標題,或按一下「新增部落格貼文」以建立新貼文。4. 在「撰寫部落格貼文」區段中,按一下 RTF 文字編輯器中的「顯示 HTML」。
    顯示 HTML 編輯器按鈕
    5. 在主要文字欄位貼上嵌入程式碼。6. 按一下「儲存」。

新增嵌入程式碼到 Squarespace

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

步驟:

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

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

新增嵌入程式碼到 Wix

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

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

步驟:

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

嵌入多個產品或系列

步驟:

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

個別新增指令碼標記

有些平台 (例如: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. 儲存變更。

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

免費試用