SHOPIFY帮助指南
添加嵌入代码
在Shopify管理员中创建购买按钮后，您就可以将其添加到您自己的网站或博客中。
将嵌入代码添加到您网站的源HTML的过程有所不同，具体取决于您希望购买按钮和购物车在您的发布平台上显示的方式和位置，以及有时您在该平台上使用的主题。
注意
如果您需要帮助将嵌入代码添加到Shopify之外的发布平台（例如Squarespace或WordPress.org博客），请直接与您的网站提供商或发布平台联系以获取支持。
相关主题
- 将嵌入代码添加到WordPress.org博客
- 将嵌入代码添加到Shopify博客
- 将嵌入代码添加到Squarespace
- 将嵌入代码添加到Wix
- 单独添加脚本标记
将嵌入代码添加到WordPress.org博客
您可以将嵌入代码添加到单个帖子和WordPress.org博客主页上的菜单中。
注意
嵌入式购买按钮与WordPress.org平台兼容，但与WordPress.com不兼容。 本文档描述了WordPress 4.2.2。 您的版本可能会有所不同。 您可以在WordPress支持网站上了解有关WordPress版本的更多信息。
将嵌入代码添加到WordPress帖子
要将嵌入代码添加到单个帖子， 请执行以下操作：
- 在Shopify中，创建一个购买按钮并从“嵌入代码”对话框中复制其嵌入代码（或单击“将嵌入代码复制到剪贴板”）。
- 在WordPress仪表板中，单击“帖子”。
- 单击“添加”以创建新帖子，或单击要显示“购买”按钮的现有帖子的名称。
- 从“添加新帖子”或“编辑帖子”页面，将文本编辑器从“可视”更改为“文本”模式。
- 将嵌入代码粘贴到您希望显示“购买”按钮或分类位置的编辑器主文本字段中。
- 完成后，单击“保存草稿”，“预览”或“发布”。
将嵌入代码添加到Wordpress菜单
要将嵌入代码添加到主页上的菜单， 请执行以下操作：
- 在WordPress仪表板中，单击“外观”。
- 单击“自定义”以打开主题编辑器，然后单击“窗口小部件”。
- 单击要添加“购买”按钮或自定义购物车代码的区域的名称。
- 打开现有的“文本”小部件，或单击“添加小组件”，然后单击“文本”。
- 将嵌入代码粘贴到“文本”小部件的主文本字段中。
- 保存更改。
注意
如果您想更改网站购物车的行为或外观，则可以将自定义购物车代码添加到WordPress.org博客主页上的菜单中。
将嵌入代码添加到Shopify博客
您可以在Shopify博客上的个别帖子中添加嵌入代码：
注意
“购买”按钮可创建单独的购物车。 如果您的客户移动到在线商店中的其他页面，则该商品将不再显示在购物车中。 您可以编辑“购买”按钮直接进入结帐页面。
- 在Shopify管理员中，单击“在线商店”。
- 单击博客帖子。
- 在“博客帖子”页面中，单击要编辑的博客文章的标题，或单击“添加博客帖子”以创建新博客文章。
- 在“编写博客文章”部分中，单击多文本编辑器中的“显示HTML”。
- 将您的嵌入代码粘贴到主文本字段中。
- 单击保存。
将嵌入代码添加到Squarespace
警告
Squarespace上的一些高级自定义是仅限于主题的。 Shopify使用不支持这些自定义，风险自负！
您可以将嵌入代码添加到Squarespace中的各个帖子以及主页上的菜单中。在某些情况下，您可能希望同时执行这两项操作。例如，您可以在主页上嵌入购物车，以便从嵌入单个帖子的“购买按钮”中接收购买。
要向Squarespace中的页面元素添加嵌入代码， 请执行以下操作：
- 在Squarespace仪表板中，打开要添加嵌入代码的网页。
- 在页面上找到要显示“购买”按钮或嵌入式购物车的元素，将光标移到“页面内容”区域上，然后单击“编辑”。
- 单击要添加嵌入代码的插入点。
- 在“内容块”对话框的“更多”部分中，单击“代码”。
- 从Shopify管理员处，从“嵌入代码”对话框中复制嵌入代码。
- 从Squarespace仪表板中，将嵌入代码粘贴到CODE对话框中。确保将文本字段设置为接收HTML。
- 在EDIT CODE对话框中单击APPLY。
- 在页面编辑器上再次单击“保存”。由于Squarespace在其信息中心中禁用JavaScript，因此您需要单独预览页面以查看已添加的购买按钮或嵌入式购物车。
注意
如果您将嵌入式购物车添加到Squarespace主页的菜单中，它将从您嵌入单个帖子的购买按钮接收订单。
将嵌入代码添加到Wix
在Shopify管理员中创建购买按钮或分类后，您可以使用Wix网站编辑器将其添加到您的Wix网站。
警告
如果要为多个产品或分类嵌入“购买按钮”，则需要先编辑嵌入代码，然后再将其添加到Wix HTML代码窗口小部件中。如果您在不编辑嵌入代码的情况下将多个购买按钮嵌入到Wix网站中，那么尝试购买多个产品的客户将会看到每个产品的单独购物车。
如果要在Wix网站上显示多个产品而不编辑嵌入代码，则可以嵌入一个分类。您可以在Shopify管理员中为要在Wix上显示的产品创建新分类。
要在Wix网站上为产品或分类嵌入单个“购买”按钮， 请执行以下操作：
- 从Shopify管理员处为产品或分类创建购买按钮，然后复制其嵌入代码。
- 在您的Wix帐户中，在“我的网站”部分中找到要编辑的站点，然后单击“编辑站点”。
- 在Wix网站编辑器中，单击+按钮，然后单击更多。
- 单击HTML代码以向页面添加HTML代码窗口小部件。
- 单击输入代码。
- 在“HTML设置”对话框中，在“在此处添加代码”字段中粘贴“购买按钮”或“分类”的嵌入代码，然后单击“更新”。
- 调整HTML代码小部件的大小以适应其内容。如果要使用购物车创建嵌入，请确保购物车选项卡显示在正确的位置。
- 完成后，单击“保存”。
嵌入多个产品或分类
要在您的Wix网站上嵌入多个产品或分类， 请执行以下操作：
- 从Shopify管理员处为产品或分类创建购买按钮，然后复制其嵌入代码。
- 将代码粘贴到代码编辑器或Wix网站构建器中。重复前两步，直到创建了所需的“购买按钮”。
- 编辑嵌入代码以确保它们以正确的对齐方式显示。
- 在您的Wix帐户中，在“我的网站”部分中找到要编辑的站点，然后单击“编辑站点”。
- 在Wix网站编辑器中，单击+按钮，然后单击更多。
- 单击HTML代码以向页面添加HTML代码窗口小部件。
- 单击输入代码。
- 在“HTML设置”对话框中，在“在此处添加代码”字段中粘贴已购买按钮的已编辑代码，然后单击“更新”。
- 调整HTML代码小部件的大小以适应其内容。如果要使用购物车创建嵌入，请确保购物车选项卡显示在正确的位置。
- 完成后，单击“保存”。
注意
如果您需要帮助使用Wix编辑器，请联系Wix支持。
单独添加脚本标记
某些平台（如Unbounce）要求您将嵌入代码的<script>标记粘贴到页眉中，并将其余的嵌入代码粘贴到您希望显示“购买”按钮的页面上。
要单独添加脚本标记， 请执行以下操作：
- 从创建购买按钮时生成的嵌入代码中，复制<div>元素和<script>元素。 例如：<script type=”text/javascript”>/*<![CDATA[*/(function () {
var scriptURL = ‘https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js’;
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
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({
domain: ‘haris-mahmood.myshopify.com’,
apiKey: ‘a4e6808b1c4afa490c5b7459f7758347′,
appId: ’15’
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent(‘product’, {
id: [9017131142],
node: document.getElementById(‘product-component-2dd3c8704e6’),
moneyFormat: ‘%24%24%24%7B%7Bamount%7D%7D’,
options: {
“product”: {
“variantId”: “all”,
“contents”: {
“variantTitle”: false,
“description”: false,
“buttonWithQuantity”: false,
“quantity”: false
},
“styles”: {
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “calc(25% – 20px)”,
“margin-left”: “20px”,
“margin-bottom”: “50px”
}
}
}
},
“cart”: {
“contents”: {
“button”: true
},
“styles”: {
“footer”: {
“background-color”: “#ffffff”
}
}
},
“modalProduct”: {
“contents”: {
“variantTitle”: false,
“buttonWithQuantity”: false,
“quantity”: false
},
“styles”: {
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0px”,
“margin-bottom”: “0px”
}
}
}
},
“productSet”: {
“styles”: {
“products”: {
“@media (min-width: 601px)”: {
“margin-left”: “-20px”
}
}
}
}}
});
});
}})();/*]]>*/</script>
- 打开要嵌入“购买”按钮的网站的页眉。
- 将整个<script>元素粘贴到页眉中。
- 保存更改。
- 从Shopify管理员中的原始嵌入代码中，仅复制<div>元素。 例如：<div id=’product-component-2dd3c8704e6′></div>
- 打开您要在其中嵌入“购买”按钮的网站页面。
- 将<div>代码段粘贴到页面中。
- 保存更改。