向 HTML 添加 Buy Button 代码

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

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

备注

如果您需要将嵌入代码添加到 Shopify 以外的发布平台（例如 Squarespace 或 WordPress）方面的帮助，请直接联系您的网站提供商或发布平台获取支持。

将嵌入代码添加到 WordPress

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

备注

嵌入式 Buy Button 与自托管的 WordPress.org 网站以及 WordPress.com 提供的某些套餐兼容。下方文档在编写时参考了最近的 WordPress 版本。您网站上安装的版本可能有所不同。您可以在 WordPress 支持网站上了解有关 WordPress 版本的详细信息。

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

1. 在 Shopify 中，创建 Buy Button，并从嵌入代码对话框中复制其嵌入代码（或点击 Copy embed code to clipboard（将嵌入代码复制到剪贴板））。

2. 在 WordPress 控制面板中，转至您的文章或页面。

3. 创建新文章或页面，或编辑现有文章或页面。

4. 在块编辑器中，点击 + 按钮，搜索自定义 HTML，然后点击以插入自定义 HTML 块。

5. 将嵌入代码粘贴到自定义 HTML 块提供的文本字段中。

6. 可选：移动自定义 HTML 块或预览 Buy Button 的显示方式：

   • 若要移动自定义 HTML 块，请点击块工具栏中的箭头按钮，或将该块拖动到新位置。
   • 若要预览 Buy Button，请点击块工具栏上的预览。

7. 完成后，点击文章或页面的保存草稿、预览或发布按钮。

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

将嵌入代码添加到 WordPress 模板

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

步骤：

1. 在 Shopify 中，创建 Buy Button，并从嵌入代码对话框中复制其嵌入代码（或点击 Copy embed code to clipboard（将嵌入代码复制到剪贴板））。

2. 在 WordPress 控制面板中，转至编辑器。

3. 导航到要编辑的模板。

4. 在块编辑器中，点击 + 按钮，搜索自定义 HTML，然后点击以插入自定义 HTML 块。

5. 将嵌入代码粘贴到自定义 HTML 块提供的文本字段中。

6. 可选：移动自定义 HTML 块或预览 Buy Button 的显示方式：

   • 若要移动自定义 HTML 块，请点击块工具栏中的箭头按钮，或将该块拖动到新位置。
   • 若要预览 Buy Button，请点击块工具栏上的预览。

7. 完成后，点击模板对应的预览或保存按钮。

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

备注

Buy Button 会创建一个单独的购物车。如果客户移动至您在线商店中的不同页面，商品则不会再显示在购物车中。您可以编辑 Buy Button 以直接指向结账。

注：

步骤：

桌面

1. 从 Shopify 后台，前往内容>博客文章。

2. 在博客文章页面中，点击要编辑的博客文章的标题，或点击添加博客文章以创建新的博客文章。

3. 在撰写博客文章部分中，点击富文本编辑器中的显示 HTML。

4. 将您的嵌入代码粘贴到主文本字段中。

5. 点击保存。

Shopify app

1. 在 Shopify 应用中，轻触 。
2. 轻触内容。
3. 轻触下拉菜单，然后轻触博客文章。

将嵌入代码添加到 Squarespace

注意

Squarespace 上的部分高级自定义项是特定于模板的。Shopify 不支持这些自定义项。

您可以将嵌入代码添加到 Squarespace 的各文章中以及主页上的菜单中。在某些情况下，您可能希望同时添加到上述两处位置。例如，您可以在主页上嵌入购物车，以便接收来自嵌入各文章的 Buy Button 的购买。

步骤：

1. 在 Squarespace 控制面板中，打开您要在其中添加嵌入代码的网页。
2. 找到您希望显示 Buy Button 或嵌入式购物车的页面上的元素，将光标移到页面内容区域上，然后点击编辑。
3. 点击要添加嵌入代码的插入点。
4. 在内容块对话框中的更多部分中，点击代码。
5. 在 Shopify 后台，复制嵌入代码对话框中的嵌入代码。
6. 在您的 Squarespace 控制面板中，将嵌入代码粘贴到代码对话框中。请务必将文本字段设置为接收 HTML。
7. 在 EDIT CODE（编辑代码）对话框中点击 APPLY（应用）。
8. 再次点击页面编辑器上的保存。由于 Squarespace 在其控制面板中禁用了 JavaScript，因此您需要单独预览页面才能查看 Buy Button 或嵌入式购物车是否正常工作。

如果您完成了步骤，但 Buy Button 并未加载，则您可能需要关闭 Ajax 加载。要查看更多详细信息，请转到启用或禁用 Ajax。

备注

如果您将嵌入式购物车添加到 Squarespace 主页上的菜单中，它将接收来自您嵌入各文章的 Buy Button 的订单。

将嵌入代码添加到 Wix

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

注意

如果您想为多个产品或产品系列嵌入 Buy Button，则需要先编辑嵌入代码，然后再将其添加到 Wix HTML 代码小组件。如果您在没有编辑嵌入代码的情况下将多个 Buy Button 嵌入到您的 Wix 网站中，那么当客户尝试购买多个产品时，每个产品将对应一个单独的购物车。

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

步骤：

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

备注

为 Wix 网站创建 Buy Button 时，由于存在 Wix 限制，您无法使用在同一标签中重定向选项。

1. 从您的 Wix 账户中，在 My Sites（我的网站）部分中找到您想编辑的网站，然后点击 Edit Site（编辑网站）。
2. 在 Wix 网站编辑器中，点击 + 按钮，然后点击更多。
3. 点击 HTML 代码以将 HTML 代码小组件添加到页面中。
4. 点击 Enter Code（输入代码）。
5. 在 HTML Settings（HTML 设置）对话框中，将 Buy Button 或产品系列的嵌入代码粘贴到 Add your code here（在此处添加您的代码）字段中，然后点击 Update（更新）。
6. 调整 HTML 代码小组件的大小以适应其内容。如果要创建购物车嵌入代码，请确保购物车标签显示在正确的位置。
7. 完成后，点击保存。

嵌入多个产品或产品系列

步骤：

1. 在 Shopify 后台中，为产品或产品系列创建 Buy Button，然后复制其嵌入代码。
2. 将代码粘贴到代码编辑器或 Wix 建站工具中。重复前两个步骤，直至创建了所需的 Buy Button。
3. 编辑嵌入代码，确保它们以正确的对齐方式显示。
4. 从您的 Wix 账户中，在 My Sites（我的网站）部分中找到您想编辑的网站，然后点击 Edit Site（编辑网站）。
5. 在 Wix 网站编辑器中，点击 + 按钮，然后点击更多。
6. 点击 HTML 代码以将 HTML 代码小组件添加到页面中。
7. 点击 Enter Code（输入代码）。
8. 在 HTML Settings（HTML 设置）对话框中，将 Buy Button 或产品系列的已编辑代码粘贴到 Add your code here（在此处添加您的代码）字段中，然后点击 Update（更新）。
9. 调整 HTML 代码小组件的大小以适应其内容。如果要创建购物车嵌入代码，请确保购物车标签显示在正确的位置。
10. 完成后，点击保存。

备注

需要使用 Wix 编辑器的相关帮助？请联系 Wix 支持。

单独添加脚本标记

部分平台（例如 Unbounce）要求您将嵌入代码的 <script> 标签粘贴在页面标头中，然后将嵌入代码的剩余部分粘贴在您想显示 Buy Button 的页面上。

步骤：

1. 从在您创建 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>

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

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

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