向 HTML 添加 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 文章

步骤:

  1. 在 Shopify 中,创建购买按钮,并从嵌入代码对话框中复制其嵌入代码(或单击 Copy embed code to clipboard(将嵌入代码复制到剪贴板))。
  2. 在您的 WordPress 控制面板中,单击 Posts(文章)。
  3. 单击 Add New(新增)以新建文章,或单击您想显示 Buy Button 的现有文章的名称。
  4. Add New Post(添加新文章)或 Edit Post(编辑文章)页面中,将文本编辑器从 Visual(视觉)更改为 Text(文本)模式。
  5. 在编辑器的主文本字段中,将嵌入代码粘贴到您希望显示 Buy Button 或产品系列的位置。
  6. 完成后,单击 Save Draft(保存草稿)、预览发布

将嵌入代码添加到 Wordpress 菜单

步骤:

  1. WordPress dashboard(WordPress 控制面板)中,单击外观
  2. 单击自定义以打开模版编辑器,然后单击小组件
  3. 单击要添加 Buy Button 或自定义购物车代码的区域的名称。
  4. 打开现有文本小组件,或依次单击添加小组件文本
  5. 将嵌入代码粘贴到文本小组件内的主要文本字段。
  6. 保存更改。

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

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

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

步骤:

  1. 博客文章页面中,单击要编辑的博客文章的标题,或单击添加博客文章以创建新的博客文章。4. 在撰写博客文章部分,单击格式文本编辑器中的显示 HTML
    显示 HTML 编辑器按钮
    5. 将您的嵌入代码粘贴到主文本字段中。6. 单击保存

将嵌入代码添加到 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 后台内创建购买按钮或产品系列后,您可以使用 Wix 网站编辑器将其添加到您的 Wix 网站。

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

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

步骤:

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

嵌入多个产品或产品系列

步骤:

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

备注: 是否需要帮助您使用 Wix 编辑器?请联系 Wix 客服

单独添加脚本标记

部分平台(例如 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 进行销售了吗?

免费试用