编辑或删除 Buy Button 或嵌入式购物车

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

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

步骤:

  1. 打开包含 Buy Button 、嵌入式产品系列或嵌入式购物车的网页的源 HTML。
  2. 从源 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>
  1. 保存更改。

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

编辑 Buy Button

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

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

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

在以下代码段中,productcart 具有单独的组件:

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'
          }
        }
      }
    }
  });
});

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

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

编辑组件的样式

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

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

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

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

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

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

  1. 打开包含要更改的嵌入产品的页面的 HTML。
  2. 找到 product 配置对象。
  3. 查找对象中的 buttonDestination 键:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. 将该键的值更改为 'modal'(确保包含引号):
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. 保存更改。

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

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

  1. 打开包含要更改的嵌入产品的页面的 HTML。
  2. 找到 product 配置对象。
  3. 添加 layout 键,然后将值设置为 'horizontal'
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

  1. 保存更改。

编辑您的网站购物车

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

步骤:

  1. 打开包含要编辑的购物车的页面的 HTML。
  2. 在您的嵌入代码中找到 cart 配置对象:
options: {
      cart: {
        startOpen: false
      }
}
  1. 编辑或添加您想更改的属性。有关可配置属性的完整列表,请查看开发人员文档

  2. 保存更改。

编辑嵌入式产品系列

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

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

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

准备好开始使用 Shopify 进行销售了吗?

免费试用