编辑或删除 Buy Button 或嵌入式购物车
Buy Button 和购物车是通过您从 Shopify 后台复制并粘贴到您的网页的源 HTML 的代码片段生成的。这些代码片段称为嵌入代码。如果您想更改按钮或购物车的外观或行为，则需要编辑相关联的嵌入代码。
删除 Buy Button 、嵌入式产品系列或嵌入式购物车
步骤：
- 打开包含 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>- 保存更改。
Buy Button 、嵌入式产品系列或嵌入式购物车将不再显示在您的网页上。
编辑 Buy Button
若要更改现有 Buy Button 的外观或设置，您需要编辑已添加到源 HTML 中的嵌入代码。
每个 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'
}
}
}
}
});
});这些组件是通过嵌入代码中的配置对象单独配置的。您可以通过编辑嵌入代码中的配置对象来更改您的 Buy Button 的外观或行为。
每个组件都有许多可以编辑的属性。有关可编辑选项的完整列表，请查看我们的开发人员文档。如果要配置一个尚未出现在嵌入代码中的选项，则需要将相应的键添加到相应的对象中（请参阅示例）。
编辑组件的样式
每个组件都有一个嵌套的 styles 配置对象，您可以编辑或添加此对象以更改组件的外观。这些样式的格式设置与 CSS 类似。styles 对象中的每个顶级键都代表一个组件中的元素，例如标题或按钮。在此对象中，每个键都是一个 CSS 属性（例如“background-color”或“border”），值为一个 CSS 值。
options: {
product: {
styles: {
button: {
'background-color': 'red',
'border-radius': '5px'
}
}
}
}可以将任何有效的 CSS 属性添加到 styles。请注意，带有破折号的属性名称必须在引号内。
有关 CSS 自定义的详细信息，请查看开发人员文档。
示例：使用产品详细信息模式替换指向购物车的链接
在此示例中，您可以更改您当前的嵌入代码将客户引导至产品详细信息模态，而不是购物车：
- 打开包含要更改的嵌入产品的页面的 HTML。
- 找到
product配置对象。 - 查找对象中的
buttonDestination键：
options: {
product: {
buttonDestination: 'cart'
}
}- 将该键的值更改为
'modal'（确保包含引号）：
options: {
product: {
buttonDestination: 'modal'
}
}- 保存更改。
示例：更改产品嵌入的布局
在此示例中，您可以更改产品嵌入的布局，让图片显示在一侧，而不是顶部：
- 打开包含要更改的嵌入产品的页面的 HTML。
- 找到
product配置对象。 - 添加
layout键，然后将值设置为'horizontal'：
options: {
product: {
buttonDestination: 'modal',
layout: 'horizontal'
}
}<aside class="note">
<h4>备注</h4>
<p>When you add the <code>'horizontal'</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>- 保存更改。
编辑您网站的购物车
如果您想更改网站购物车的外观或行为，则需要编辑嵌入代码中的 cart 配置对象。
步骤：
- 打开包含要编辑的购物车的页面的 HTML。
- 在您的嵌入代码中找到
cart配置对象：
options: {
cart: {
startOpen: false
}
}- 编辑或添加您想更改的属性。有关可配置属性的完整列表，请查看开发人员文档。
- 保存更改。
编辑嵌入式产品系列
编辑嵌入式产品系列与编辑产品或购物车类似。若要编辑产品系列中的产品的属性（例如，每个产品的布局），您需要找到 product 配置对象，然后按照编辑产品嵌入的方式编辑此对象。若要编辑产品系列本身的属性（例如下一页按钮的文本），则改为编辑 productSet 键。
部分属性（例如组件的文本）是通过嵌套对象配置的，这些对象是位于其他对象内部的对象。例如，下一页按钮的文本位于 productSet 组件的 text 对象内部：
options: {
productSet: {
text: {
nextPageButton: 'Continue'
}
}
}