SHOPIFY帮助指南
编辑或删除购买按钮或嵌入式购物车
警告
这是一个高级教程，Shopify不支持。需要了解HTML，CSS，Javascript和Liquid等网页设计语言。如果您不方便继续学习以下教程，我们建议您聘请Shopify专家。
购买按钮和购物车是您从Shopify管理员处复制的代码段生成的，并粘贴到您网页的源HTML中。这些代码片段称为嵌入代码。如果要更改按钮或购物车的外观或行为，则需要编辑关联的嵌入代码。
注意
这些说明适用于您在2016年9月26日之后生成的“购买按钮”嵌入代码。如果您要更改在此日期之前生成的嵌入代码，则需要遵循旧版说明。您还可以使用“购买按钮”销售渠道重新创建嵌入代码。
如果您不确定您拥有哪个版本的嵌入代码，请检查它是否以<script data-shopify-buy-ui>开头。如果是，那么你有最新版本。如果它以<div data-emebd_type = …或其他类型的<div>标记开头，那么您将拥有旧版本。
相关主题
- 删除购买按钮，嵌入式分类或嵌入式购物车
- 编辑购买按钮
- 编辑您网站的购物车
- 编辑嵌入式分类
删除购买按钮，嵌入式分类或嵌入式购物车
要删除现有的购买按钮，分类或嵌入式购物车， 请执行以下操作：
- 打开包含“购买”按钮，嵌入式分类或嵌入式购物车的网页的源HTML。<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>
- 从源HTML中删除整个嵌入代码，从<script data-shopify-buy-ui>开始，以</ script>结尾。 对于购买按钮，嵌入代码类似于以下代码：
- 保存更改。
购买按钮，嵌入式分类或嵌入式购物车将不再显示在您的网页上。
编辑购买按钮
要更改现有“购买”按钮的外观或设置，您需要编辑已添加到源HTML的嵌入代码。
每个购买按钮都是由嵌入代码中的单独组件构建的。 例如，如果您将带有购物车的产品添加到网页，则嵌入代码将生成产品组件，购物车组件和购物车切换组件：
如果您希望产品组件打开包含产品详细信息的模态窗口，则嵌入代码将生成模态组件和modalProduct组件：
在以下代码段中，产品和购物车有单独的组件：
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’
}
}
}
}
});});
这些组件通过嵌入代码中的配置对象单独配置。您可以通过编辑嵌入代码中的配置对象来更改“购买按钮”的外观或行为。
提醒
在JavaScript中，对象是一组键值对，格式为{key：value}。你可以把它想象成一个电子表格：一个键就像一个列名，一个值就像一个单元格的内容。
每个组件都有许多可以编辑的属性。有关可编辑选项的完整列表，请查看我们的开发人员文档。如果要配置一个尚未出现在嵌入代码中的选项，则需要将相应的键添加到相应的对象中。
编辑组件的样式
每个组件都有一个嵌套样式配置对象，您可以编辑或添加该对象以更改组件的外观。这些样式的格式与CSS类似。 styles对象中的每个顶级键表示组件中的元素，例如标题或按钮。在此对象中，每个键都是CSS属性（例如，“background-color”或“border”），值是CSS值。
options: {
product: {
styles: {
button: {
‘background-color’: ‘red’,
‘border-radius’: ‘5px’
}
}
}}
任何有效的CSS属性都可以添加到样式中。 请注意，带有破折号的属性名称必须在引号内。
有关CSS自定义的更多信息，请查看开发人员文档。
示例：使用产品详细信息模式替换链接到购物车
在此示例中，您可以更改当前的嵌入代码，将客户引导至产品详细信息模式而非购物车：
- 打开包含要更改的产品嵌入的页面的HTML。
- 找到产品配置对象。
- 在对象中找到buttonDestination键：options: {product: {
buttonDestination: ‘cart’
}}
- 将该键的值更改为“modal”（确保包含引号）：options: {product: {
buttonDestination: ‘modal’
}}
- 保存更改。
示例：更改产品嵌入的布局
在此示例中，您可以更改嵌入的产品的布局，使图片显示在侧面而不是顶部：
- 打开包含要更改的产品嵌入的页面的HTML。
- 找到产品配置对象。
- 添加布局键，然后将值设置为“水平”：options: {product: {
buttonDestination: ‘modal’,
layout: ‘horizontal’
}}
注意：添加“水平”值时，请确保它包含引号，并且前一行以逗号结尾。
- 保存更改。
编辑您网站的购物车
如果要更改网站购物车的外观或行为，则需要在嵌入代码中编辑购物车配置对象。
要编辑您网站的购物车， 请执行以下操作：
- 打开包含要编辑的购物车的页面的HTML。
- 在嵌入代码中找到购物车配置对象：options: {cart: {
startOpen: false
}}
- 编辑或添加您要更改的属性。 有关可配置属性的完整列表，请查看开发人员文档。
- 保存更改。
编辑嵌入式分类
编辑嵌入式分类与编辑产品或购物车类似。 要编辑分类中产品的属性（例如，每个产品的布局），您需要找到产品配置对象并按照编辑产品嵌入的相同方式进行编辑。 要编辑分类本身的属性（例如，“下一页”按钮的文本），请编辑productSet键。
某些属性（例如组件的文本）是通过嵌套对象配置的，嵌套对象是出现在其他对象中的对象。 例如，“下一页”按钮的文本显示在productSet组件的文本对象中：
options: {
productSet: {
text: {
nextPageButton: ‘Continue’
}
}}