Shopify Buy Button 代码添加到各网站、博客教程

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

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

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

将嵌入代码添加到 WordPress.org 博客

您可以将嵌入代码添加到 WordPress.org 博客的各篇文章以及主页上的菜单中。

备注:嵌入式 Buy Button 与 WordPress.org 平台兼容，但与 WordPress.com 不兼容。本文档介绍的是 WordPress 4.2.2。您的版本可能有所不同。您可以在 WordPress 支持网站上了解有关 WordPress 版本的详细信息。

将嵌入代码添加到 WordPress 文章

步骤：

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

在您的 WordPress 控制面板中，单击 Posts（文章）。

单击 Add New（新增）以新建文章，或单击您想显示 Buy Button 的现有文章的名称。

在 Add New Post（添加新文章）或 Edit Post（编辑文章）页面中，将文本编辑器从 Visual（视觉）更改为 Text（文本）模式。

在编辑器的主文本字段中，将嵌入代码粘贴到您希望显示 Buy Button 或产品系列的位置。

完成后，单击 Save Draft（保存草稿）、预览或发布。

将嵌入代码添加到 Wordpress 菜单

步骤：

在 WordPress dashboard（WordPress 控制面板）中，单击外观。

单击自定义以打开模版编辑器，然后单击小组件。

单击要添加 Buy Button 或自定义购物车代码的区域的名称。

打开现有文本小组件，或依次单击添加小组件和文本。

将嵌入代码粘贴到文本小组件内的主要文本字段。

保存更改。

备注:如果要更改您网站购物车的行为或外观，您可以将自定义购物车代码添加到 WordPress.org 博客主页上的菜单中。

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

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

步骤：

在 Shopify 后台中，转到在线商店 > 博客文章。

在博客文章页面中，单击要编辑的博客文章的标题，或单击添加博客文章以创建新的博客文章。4. 在撰写博客文章部分，单击格式文本编辑器中的显示 HTML。

5. 将您的嵌入代码粘贴到主文本字段中。6. 单击保存。

将嵌入代码添加到 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 的订单。

将嵌入代码添加到 Wix

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

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

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

步骤：

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

从您的 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> 元素。例如：

打开要在其中嵌入 Buy Button 的网站的页面标头。

将整个 <script> 元素粘贴到页面标头中。

保存更改。

对于 Shopify 后台的原始嵌入代码，仅复制 <div> 元素。例如：

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

打开要在其中嵌入 Buy Button 的网站上的页面。

将 <div> 代码段粘贴到此页面中。

保存更改。（来源：Shopify）

以上内容属作者个人观点，不代表雨果网立场！如有侵权，请联系我们。