自定义或移除 Buy Button、嵌入式产品系列或嵌入式购物车

您可以编辑网页源 HTML 中的嵌入代码，以此来更改 Buy Button、嵌入式产品系列或嵌入式购物车的外观或行为。您还可以通过从网页中移除代码来删除嵌入内容。

Buy Button 会显示包含购买按钮的产品。嵌入式产品系列会显示多种产品。嵌入式购物车会显示供客户跨页面使用的独立购物车。

嵌入代码是您在创建 Buy Button 或购物车时从 Shopify 后台复制并粘贴到网页 HTML 中的代码片段。嵌入代码是使用 JavaScript 编写的，这是一种用于向网页添加交互式功能的编程语言。

在本页

了解 Buy Button 嵌入代码

每个 Buy Button 均由名为组件 (components) 的独立部分构建而成。组件是嵌入代码的命名部分，负责控制 Buy Button 体验的某一方面。例如，当您向网页添加带有购物车的产品时，嵌入代码将生成以下组件：

product 组件，用于显示产品信息和购买按钮
cart 组件，用于显示购物车内容
购物车 toggle 组件，用于显示打开购物车的图标

如果产品组件会打开产品详细信息弹出窗口，嵌入代码则会额外生成两个组件：用于弹出窗口本身的 modal 组件，以及用于显示弹出窗口内产品信息的 modalProduct 组件。

在以下代码片段中，product 和 cart 有单独的组件：

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

每个组件都是通过嵌入代码中的配置对象 (configuration object) 进行配置的。对象是一个结构化的设置组，其格式设为键值对列表：

键 (key) 是设置的名称，例如 buttonDestination。
值 (value) 是设置的值，例如 'cart'。

对象类似于电子表格：每个键都对应一列的名称，每个值都对应一个单元格的内容。若要更改 Buy Button 的外观或行为，请编辑配置对象内部的键和值。

每个组件都有许多可编辑的键。有关可编辑键的完整列表，请查看开发者文档。若要配置您的嵌入代码中尚没有的键，请将该键添加到相应的对象中。如需查看示例，请参阅更改产品嵌入内容的布局。

自定义组件样式

每个组件都有一个嵌套的 styles 配置对象，用于控制组件的外观。嵌套对象 (nested object) 即放置在另一个对象内部的对象。

styles 对象使用的是 CSS，这种语言用于描述如何设置网页元素的视觉样式。styles 对象中的每个顶层键代表组件中的一个元素，例如标题或按钮。在该键中，每个嵌套键都是一个 CSS 属性（例如 background-color 或 border），而值则是 CSS 值。

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

任何有效的 CSS 属性均可添加到 styles 中。请确保带有短划线的属性名称已用引号引起来。

有关 CSS 自定义的详细信息，请查看开发者文档。

嵌入式产品系列组件

嵌入式产品系列使用与 Buy Button 相同的配置对象。若要编辑产品系列内产品的布局或其他属性，请找到 product 配置对象，并按与编辑产品嵌入内容相同的方法对其进行编辑。若要编辑产品系列本身的属性，例如下一页按钮的文本，请改为编辑 productSet 配置对象。

某些键（例如组件文本的键）可通过嵌套对象进行配置。例如，下一页按钮的文本在 productSet 组件的 text 对象内：

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

产品详细信息模态窗口是显示产品信息的弹出窗口。要将客户引导至产品详细信息模态窗口而非购物车，请在您网页的源 HTML 中编辑 Buy Button 嵌入代码。

步骤：

打开包含您要更改的产品嵌入的页面的 HTML。
找到 product 配置对象。
在对象中找到 buttonDestination 键：

options: {
      product: {
        buttonDestination: 'cart'
      }
}

将该键的值更改为 'modal'（包含引号）：

options: {
      product: {
        buttonDestination: 'modal'
      }
}

保存您的更改。

更改产品嵌入内容的布局

水平产品嵌入内容布局会将图片放在产品详细信息旁边，而不是放在其上方。要切换为这种布局，请在您网页的源 HTML 中编辑 Buy Button 嵌入代码。

步骤：

打开包含您要更改的产品嵌入的页面的 HTML。
找到 product 配置对象。
添加 layout 键，然后将值设置为 'horizontal'。请确保值包含引号，并且上一行以逗号结尾：

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

保存您的更改。

更改购物车嵌入内容的外观和行为

若要更改购物车的外观或行为，请编辑嵌入代码中的 cart 配置对象。

步骤：

打开包含您要编辑的购物车的页面的 HTML。
在嵌入代码中找到 cart 配置对象：

options: {
      cart: {
        startOpen: false
      }
}

编辑现有键或添加新键，以更改购物车的外观或行为。有关可配置键的完整列表，请查看开发者文档。
保存您的更改。

删除 Buy Button、嵌入式产品系列或嵌入式购物车

要从网页中移除 Buy Button、嵌入式产品系列或嵌入式购物车，请从源 HTML 中删除其嵌入代码。

步骤：

打开包含 Buy Button、嵌入式产品系列或嵌入式购物车的网页的 HTML 源代码。
从源 HTML 中删除整段嵌入代码，从 <script data-shopify-buy-ui> 开始，到 </script> 结束。以下是 Buy Button 嵌入代码的示例：

<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      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({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>

保存您的更改。