在 Shopify 后台创建 Buy Button 后，就可以将其添加到自己的网站或博客。
将嵌入代码添加到您网站的源 HTML 的过程略有不同，具体取决于您希望 Buy Button 和购物车显示的方式和位置 - 可显示在发布平台上，有时还可显示在您在该平台上使用的模板中。
如果您需要将嵌入代码添加到 Shopify 以外的发布平台（例如 Squarespace 或 WordPress）方面的帮助，请直接联系您的网站提供商或发布平台获取支持。
您可以将嵌入代码添加到 WordPress 网站上的文章、页面或模板中。
备注嵌入式 Buy Button 与自托管的 WordPress.org 网站以及 WordPress.com 提供的某些套餐兼容。下方文档在编写时参考了最近的 WordPress 版本。您网站上安装的版本可能有所不同。您可以在 WordPress 支持网站上了解有关 WordPress 版本的详细信息。
将嵌入代码添加到 WordPress 文章或页面 在 Shopify 中，创建 Buy Button，并从嵌入代码对话框中复制其嵌入代码（或点击 Copy embed code to clipboard（将嵌入代码复制到剪贴板））。 在 WordPress 控制面板中，转至您的文章或页面。 创建新文章或页面，或编辑现有文章或页面。 在块编辑器中，点击 + 按钮，搜索自定义 HTML，然后点击以插入自定义 HTML 块。 将嵌入代码粘贴到自定义 HTML 块提供的文本字段中。
可选：移动自定义 HTML 块或预览 Buy Button 的显示方式：
若要移动自定义 HTML 块，请点击块工具栏中的箭头按钮，或将该块拖动到新位置。 若要预览 Buy Button，请点击块工具栏上的预览。完成后，点击文章或页面的保存草稿、预览或发布按钮。
如果您使用 WordPress 的经典编辑器插件，则无需使用自定义 HTML 块，而是将文本编辑器从视觉模式更改为文本模式，并将嵌入代码粘贴到编辑器中。
如果您的 WordPress 模板支持网站编辑器，您可以将嵌入式 Buy Button 添加到您网站的任何模板中。
步骤：
在 Shopify 中，创建 Buy Button，并从嵌入代码对话框中复制其嵌入代码（或点击 Copy embed code to clipboard（将嵌入代码复制到剪贴板））。 在 WordPress 控制面板中，转至编辑器。 导航到要编辑的模板。 在块编辑器中，点击 + 按钮，搜索自定义 HTML，然后点击以插入自定义 HTML 块。 将嵌入代码粘贴到自定义 HTML 块提供的文本字段中。
可选：移动自定义 HTML 块或预览 Buy Button 的显示方式：
若要移动自定义 HTML 块，请点击块工具栏中的箭头按钮，或将该块拖动到新位置。 若要预览 Buy Button，请点击块工具栏上的预览。完成后，点击模板对应的预览或保存按钮。
将嵌入代码添加到您的 Shopify 博客
备注
Buy Button 会创建一个单独的购物车。如果客户移动至您在线商店中的不同页面，商品则不会再显示在购物车中。您可以编辑 Buy Button 以直接指向结账。
步骤：
桌面
在 Shopify 后台中，转至在线商店 > 博客文章。 在博客文章页面中，点击要编辑的博客文章的标题，或点击添加博客文章以创建新的博客文章。 在撰写博客文章部分中，点击富文本编辑器中的显示 HTML。 将您的嵌入代码粘贴到主文本字段中。 点击保存。
iPhone/Android
在 Shopify 应用中，点击 … 按钮。 在销售渠道部分，轻触在线商店。 轻触博客文章。 ## 将嵌入代码添加到 Squarespace 注意Squarespace 上的部分高级自定义项是特定于模板的。Shopify 不支持这些自定义项。
您可以将嵌入代码添加到 Squarespace 的各文章中以及主页上的菜单中。在某些情况下，您可能希望同时添加到上述两处位置。例如，您可以在主页上嵌入购物车，以便接收来自嵌入各文章的 Buy Button 的购买。
步骤：
在 Squarespace 控制面板中，打开您要在其中添加嵌入代码的网页。 找到您希望显示 Buy Button 或嵌入式购物车的页面上的元素，将光标移到页面内容区域上，然后点击编辑。 点击要添加嵌入代码的插入点。 在内容块对话框中的更多部分中，点击代码。 在 Shopify 后台，复制嵌入代码对话框中的嵌入代码。 在您的 Squarespace 控制面板中，将嵌入代码粘贴到代码对话框中。请务必将文本字段设置为接收 HTML。 在 EDIT CODE（编辑代码）对话框中点击 APPLY（应用）。 再次点击页面编辑器上的保存。由于 Squarespace 在其控制面板中禁用了 JavaScript，因此您需要单独预览页面才能查看 Buy Button 或嵌入式购物车是否正常工作。
如果您完成了步骤，但 Buy Button 并未加载，则您可能需要关闭 Ajax 加载。要查看更多详细信息，请转到启用或禁用 Ajax。
如果您将嵌入式购物车添加到 Squarespace 主页上的菜单中，它将接收来自您嵌入各文章的 Buy Button 的订单。
在 Shopify 后台内创建 Buy Button 或产品系列后，您可以使用 Wix 网站编辑器将其添加到您的 Wix 网站。
如果您想为多个产品或产品系列嵌入 Buy Button，则需要先编辑嵌入代码，然后再将其添加到 Wix HTML 代码小组件。如果您在没有编辑嵌入代码的情况下将多个 Buy Button 嵌入到您的 Wix 网站中，那么当客户尝试购买多个产品时，每个产品将对应一个单独的购物车。
如果您想在不编辑嵌入代码的情况下在您的 Wix 网站上显示多种产品，则可以嵌入产品系列。您可以在 Shopify 后台内为您想显示在 Wix 上的产品创建新的产品系列。
步骤： 在 Shopify 后台中，为产品或产品系列创建 Buy Button，然后复制其嵌入代码。
备注
为 Wix 网站创建 Buy Button 时，由于存在 Wix 限制，您无法使用在同一标签中重定向选项。
从您的 Wix 账户中，在 My Sites（我的网站）部分中找到您想编辑的网站，然后点击 Edit Site（编辑网站）。
在 Wix 网站编辑器中，点击 + 按钮，然后点击更多。
点击 HTML 代码以将 HTML 代码小组件添加到页面中。
点击 Enter Code（输入代码）。
在 HTML Settings（HTML 设置）对话框中，将 Buy Button 或产品系列的嵌入代码粘贴到 Add your code here（在此处添加您的代码）字段中，然后点击 Update（更新）。
调整 HTML 代码小组件的大小以适应其内容。如果要创建购物车嵌入代码，请确保购物车标签显示在正确的位置。
完成后，点击保存。
嵌入多个产品或产品系列
步骤：
在 Shopify 后台中，为产品或产品系列创建 Buy Button，然后复制其嵌入代码。 将代码粘贴到代码编辑器或 Wix 建站工具中。重复前两个步骤，直至创建了所需的 Buy Button。 编辑嵌入代码，确保它们以正确的对齐方式显示。 从您的 Wix 账户中，在 My Sites（我的网站）部分中找到您想编辑的网站，然后点击 Edit Site（编辑网站）。 在 Wix 网站编辑器中，点击 + 按钮，然后点击更多。 点击 HTML 代码以将 HTML 代码小组件添加到页面中。 点击 Enter Code（输入代码）。
在 HTML Settings（HTML 设置）对话框中，将 Buy Button 或产品系列的已编辑代码粘贴到 Add your code here（在此处添加您的代码）字段中，然后点击 Update（更新）。 调整 HTML 代码小组件的大小以适应其内容。如果要创建购物车嵌入代码，请确保购物车标签显示在正确的位置。 完成后，点击保存。
备注
需要使用 Wix 编辑器的相关帮助？请联系 Wix 支持。
部分平台（例如 Unbounce）要求您将嵌入代码的 <script> 标签粘贴在页面标头中，然后将嵌入代码的剩余部分粘贴在您想显示 Buy Button 的页面上。
步骤：
从在您创建 Buy Button 时生成的嵌入代码中同时复制 <div> 元素和 <script> 元素。例如： <scripttype="text/javascript">/*<![CDATA[*/(function(){varscriptURL='https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';if(window.ShopifyBuy){if(window.ShopifyBuy.UI){ShopifyBuyInit();}else{loadScript();}}else{loadScript();}functionloadScript(){varscript=document.createElement('script');script.async=true;script.src=scriptURL;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(script);script.onload=ShopifyBuyInit;}functionShopifyBuyInit(){varclient=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> 元素。例如： <divid='product-component-2dd3c8704e6'></div> 打开要在其中嵌入 Buy Button 的网站上的页面。 将 <div> 代码片段粘贴到此页面中。 保存更改。
