Shopify Buy Button 及嵌入式购物车编辑或删除设置

注意：这属于高级教程，不受 Shopify 的支持。此教程要求您具有 HTML、CSS、Javascript 和 Liquid 等 Web 设计语言的知识。如果您觉得自己不太适合进行以下教程，我们建议雇用一位 Shopify 专家。

Buy Button 和购物车是通过您从 Shopify 后台复制并粘贴到您的网页的源 HTML 的代码段生成的。这些代码段称为嵌入代码。如果您想更改按钮或购物车的外观或行为，则需要编辑相关联的嵌入代码。

备注

这些说明适用于您在 2016 年 9 月 26 日之后生成的 Buy Button 嵌入代码。如果您想更改在此日期之前生成的嵌入代码，则需要按照旧版说明进行操作。您还可以使用 Buy Button 销售渠道重新创建嵌入代码。

如果您不确定自己的嵌入代码版本，请查看代码是否以

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

步骤：

打开包含 Buy Button 、嵌入式产品系列或嵌入式购物车的网页的源 HTML。

从源 HTML 中删除整个嵌入代码，从 结束。对于 Buy Button，嵌入代码看起来与以下代码类似：

保存更改。

Buy Button 、嵌入式产品系列或嵌入式购物车将不再显示在您的网页上。

编辑 Buy Button

若要更改现有 Buy Button 的外观或设置，您需要编辑已添加到源 HTML 中的嵌入代码。

每个 Buy Button 都是由嵌入代码中的单独组件构建而成。例如，如果您将一件产品和购物车添加到自己的网页，则嵌入代码将生成一个 product 组件、一个 cart 组件以及一个购物车 toggle 组件：

如果您希望您的产品组件会打开包含产品详细信息的模态窗口，嵌入代码将生成一个 modal 组件和一个 modalProduct 组件：

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

这些组件是通过嵌入代码中的配置对象单独配置的。您可以通过编辑嵌入代码中的配置对象来更改您的 Buy Button 的外观或行为。

提示:

在 JavaScript 中，一个对象是一组键值对，格式为 {key: value}。您可以将其看作一个电子表格：键类似于列名称，值类似于单元格中的内容。

每个组件都有许多可以编辑的属性。有关可编辑选项的完整列表，请查看我们的开发人员文档。如果要配置一个尚未出现在嵌入代码中的选项，则需要将相应的键添加到相应的对象中（请参阅示例）。

编辑组件的样式

每个组件都有一个嵌套的 styles 配置对象，您可以编辑或添加此对象以更改组件的外观。这些样式的格式设置与 CSS 类似。styles 对象中的每个顶级键都代表一个组件中的元素，例如标题或按钮。在此对象中，每个键都是一个 CSS 属性（例如“background-color”或“border”），值为一个 CSS 值。

可以将任何有效的 CSS 属性添加到 styles。请注意，带有破折号的属性名称必须在引号内。

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

示例：使用产品详细信息模式替换指向购物车的链接

在此示例中，您可以更改您当前的嵌入代码将客户引导至产品详细信息模态，而不是购物车：

打开包含要更改的嵌入产品的页面的 HTML。

找到 product 配置对象。

查找对象中的 buttonDestination 键：

将该键的值更改为 ‘modal’（确保包含引号）：

保存更改。

示例：更改产品嵌入的布局

在此示例中，您可以更改产品嵌入的布局，让图片显示在一侧，而不是顶部：

打开包含要更改的嵌入产品的页面的 HTML。

找到 product 配置对象。

添加 layout 键，然后将值设置为 ‘horizontal’：

备注

在添加 ‘horizontal’ 值时，请确保它包含引号，并且前一行以逗号结尾。

保存更改。

编辑您的网站购物车

如果您想更改网站购物车的外观或行为，则需要编辑嵌入代码中的 cart 配置对象。

步骤：

打开包含要编辑的购物车的页面的 HTML。

在您的嵌入代码中找到 cart 配置对象：

编辑或添加您想更改的属性。有关可配置属性的完整列表，请查看开发人员文档。

保存更改。

编辑嵌入式产品系列

编辑嵌入式产品系列与编辑产品或购物车类似。若要编辑产品系列中的产品的属性（例如，每个产品的布局），您需要找到 product 配置对象，然后按照编辑产品嵌入的方式编辑此对象。若要编辑产品系列本身的属性（例如下一页按钮的文本），则改为编辑 productSet 键。

部分属性（例如组件的文本）是通过嵌套对象配置的，这些对象是位于其他对象内部的对象。例如，下一页按钮的文本位于 productSet 组件的 text 对象内部：

（来源：Shopify）

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

相关推荐：Shopify Buy Button 代码添加到各网站、博客教程

相关推荐: 第112届广交会闭幕

      11月4日，第112届广交会闭幕。新华网记者在当日闭幕新闻发布会上获悉，与上一届广交会相比，本届广交会与会人数和成交额双双下滑，下滑幅度均超过10%，外贸形势不容乐观。       本届广交会是在全球市场持续降温、中国外贸形势严峻的背景下召开的。广…