将 Buy Button 代码添加到 HTML

在 Shopify 后台中创建 Buy Button 后，您就可以将其添加到自己的网站或博客中。

将嵌入代码添加到您网站的源 HTML 中的过程会略有不同，具体取决于您希望 Buy Button 和购物车显示的方式和位置、您的发布平台，有时还取决于您在该平台上使用的模板。

在此页面上

将嵌入代码添加到 WordPress

您可以将嵌入代码添加到 WordPress 网站上的文章、页面或模板中。

将嵌入代码添加到 WordPress 文章或页面

在 Shopify 中，创建 Buy Button，然后从嵌入代码对话框中复制其嵌入代码（或点击将嵌入代码复制到剪贴板）。
在您的 WordPress 控制面板中，转至您的文章或页面。
创建新文章或页面，或编辑现有文章或页面。
在块编辑器中，点击 + 按钮，搜索 自定义 HTML，然后点击以插入自定义 HTML 块。
将嵌入代码粘贴到自定义 HTML 块提供的文本字段中。
可选：移动自定义 HTML 块或预览 Buy Button 的显示方式：
- 若要移动自定义 HTML 块，请点击该块工具栏中的箭头按钮，或将该块拖动到新位置。
- 若要预览 Buy Button，请点击块工具栏上的预览。
完成后，为您的文章或页面点击保存草稿、预览或发布按钮。

如果您使用 WordPress 的经典编辑器插件，则无需使用自定义 HTML 块，而是将文本编辑器从可视化模式更改为文本模式，然后将嵌入代码粘贴到编辑器中。

将嵌入代码添加到 WordPress 模板

如果您的 WordPress 模板支持网站编辑器，则可以将嵌入式 Buy Button 添加到网站的任何模板中。

步骤：

在 Shopify 中，创建 Buy Button，然后从嵌入代码对话框中复制其嵌入代码（或点击将嵌入代码复制到剪贴板）。
在您的 WordPress 控制面板中，转至编辑器。
导航到您要编辑的模板。
在块编辑器中，点击 + 按钮，搜索 自定义 HTML，然后点击以插入自定义 HTML 块。
将嵌入代码粘贴到自定义 HTML 块提供的文本字段中。
可选：移动自定义 HTML 块或预览 Buy Button 的显示方式：
- 若要移动自定义 HTML 块，请点击该块工具栏中的箭头按钮，或将该块拖动到新位置。
- 若要预览 Buy Button，请点击块工具栏上的预览。
完成后，为模板点击预览或保存按钮。

将嵌入代码添加到您的 Shopify 博客

备注：

步骤：

台式电脑

在 Shopify 后台中，转至内容 > 博客文章。
在博客文章页面中，点击您要编辑的博客文章的标题，或点击添加博客文章以创建新文章。
在撰写博客文章部分中，点击富文本编辑器中的显示 HTML。
将您的嵌入代码粘贴到主文本字段中。
点击保存。

移动设备

在 Shopify app 中，轻触图标。
在内容菜单中，轻触图标，然后轻触博客文章。
轻触您要编辑的博客文章。
在内容部分中，轻触 …，然后轻触图标。
将您的嵌入代码粘贴到文本字段中。
轻触保存或 ✓。

将嵌入代码添加到 Squarespace

您可以将嵌入代码添加到 Squarespace 中的单个文章和主页上的菜单中。在某些情况下，您可能需要同时执行这两项操作。例如，您可以在主页上嵌入购物车，以接收来自您嵌入到单个文章中的 Buy Button 的购买。

步骤：

在您的 Squarespace 控制面板中，打开要添加嵌入代码的网页。
在页面上查找要显示 Buy Button 或嵌入式购物车的位置，将光标移动到页面内容区域，然后点击编辑。
在要添加嵌入代码的位置点击插入点。
在内容块对话框的更多部分中，点击代码。
在您的 Shopify 后台中，从嵌入代码对话框复制嵌入代码。
在您的 Squarespace 控制面板中，将嵌入代码粘贴到 CODE 对话框中。请确保文本字段设置为接收 HTML。
在编辑代码对话框中点击应用。
在页面编辑器上再次点击保存。由于 Squarespace 在其控制面板中禁用了 JavaScript，因此您需要单独预览您的页面以确认 Buy Button 或嵌入式购物车是否正常工作。

如果您完成这些步骤后 Buy Button 仍未加载，则可能需要关闭 Ajax 加载。有关更多详细信息，请参阅启用或禁用 Ajax。

将嵌入代码添加到 Wix

在 Shopify 后台中创建 Buy Button 或产品系列后，您可以使用 Wix 网站编辑器将其添加到您的 Wix 网站。

如果要在不编辑嵌入代码的情况下在 Wix 网站上显示多个产品，则可以嵌入一个产品系列。您可以在 Shopify 后台中，为您想在 Wix 上显示的产品创建一个新的产品系列。

步骤：

在您的 Shopify 后台中，为产品或产品系列创建 Buy Button，然后复制其嵌入代码。

在您的 Wix 账户中，在我的网站部分找到您要编辑的网站，然后点击编辑网站。
在 Wix 网站编辑器中，点击 + 按钮，然后点击更多。
点击 HTML 代码，将 HTML 代码小组件添加到页面中。
点击输入代码。
在 HTML 设置对话框的在此处添加您的代码字段中，粘贴您的 Buy Button 或产品系列的嵌入代码，然后点击更新。
调整 HTML 代码小组件的大小以适应其内容。如果您要创建带购物车的嵌入内容，请确保购物车标签页显示在正确的位置。
完成后，点击保存。

嵌入多个产品或产品系列

步骤：

在您的 Shopify 后台中，为产品或产品系列创建 Buy Button，然后复制其嵌入代码。
将代码粘贴到代码编辑器或 Wix 建站工具中。重复前两个步骤，直到创建完您需要的所有 Buy Button。
编辑嵌入代码以确保它们以正确的对齐方式显示。
在您的 Wix 账户中，在我的网站部分找到您要编辑的网站，然后点击编辑网站。
在 Wix 网站编辑器中，点击 + 按钮，然后点击更多。
点击 HTML 代码，将 HTML 代码小组件添加到页面中。
点击输入代码。
在 HTML 设置对话框的在此处添加您的代码字段中，粘贴您编辑过的 Buy Button 代码，然后点击更新。
调整 HTML 代码小组件的大小以适应其内容。如果您要创建带购物车的嵌入内容，请确保购物车标签页显示在正确的位置。
完成后，点击保存。

单独添加脚本标签

某些平台（例如 Unbounce）要求您将嵌入代码的 <script> 标签粘贴到页面标头中，并将嵌入代码的其余部分粘贴到您希望显示 Buy Button 的页面上。

步骤：

从创建 Buy Button 时生成的嵌入代码中，复制 <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>

打开要嵌入 Buy Button 的网站的页面标头。
将整个 <script> 元素粘贴到页面标头中。
保存您的更改。
从 Shopify 后台的原始嵌入代码中，仅复制 <div> 元素。例如：

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

在您的网站上打开要嵌入 Buy Button 的页面。
将 <div> 代码片段粘贴到页面中。
保存您的更改。