向 HTML 添加 Buy Button 代码
在 Shopify 后台创建 Buy Button 后,就可以将其添加到自己的网站或博客。
将嵌入代码添加到您网站的源 HTML 的过程略有不同,具体取决于您希望 Buy Button 和购物车显示的方式和位置 - 可显示在发布平台上,有时还可显示在您在该平台上使用的模板中。
将嵌入代码添加到 WordPress
您可以将嵌入代码添加到 WordPress 网站上的文章、页面或模板中。
将嵌入代码添加到 WordPress 文章或页面
- 在 Shopify 中,创建 Buy Button,并从嵌入代码对话框中复制其嵌入代码(或点击 Copy embed code to clipboard(将嵌入代码复制到剪贴板))。
- 在 WordPress 控制面板中,转至您的文章或页面。
- 创建新文章或页面,或编辑现有文章或页面。
- 在块编辑器中,点击 + 按钮,搜索自定义 HTML,然后点击以插入自定义 HTML 块。
- 将嵌入代码粘贴到自定义 HTML 块提供的文本字段中。
-
可选:移动自定义 HTML 块或预览 Buy Button 的显示方式:
- 若要移动自定义 HTML 块,请点击块工具栏中的箭头按钮,或将该块拖动到新位置。
- 若要预览 Buy Button,请点击块工具栏上的预览。
完成后,点击文章或页面的保存草稿、预览或发布按钮。
如果您使用 WordPress 的经典编辑器插件,则无需使用自定义 HTML 块,而是将文本编辑器从视觉模式更改为文本模式,并将嵌入代码粘贴到编辑器中。
将嵌入代码添加到 WordPress 模板
如果您的 WordPress 模板支持网站编辑器,您可以将嵌入式 Buy Button 添加到您网站的任何模板中。
步骤:
- 在 Shopify 中,创建 Buy Button,并从嵌入代码对话框中复制其嵌入代码(或点击 Copy embed code to clipboard(将嵌入代码复制到剪贴板))。
- 在 WordPress 控制面板中,转至编辑器。
- 导航到要编辑的模板。
- 在块编辑器中,点击 + 按钮,搜索自定义 HTML,然后点击以插入自定义 HTML 块。
- 将嵌入代码粘贴到自定义 HTML 块提供的文本字段中。
-
可选:移动自定义 HTML 块或预览 Buy Button 的显示方式:
- 若要移动自定义 HTML 块,请点击块工具栏中的箭头按钮,或将该块拖动到新位置。
- 若要预览 Buy Button,请点击块工具栏上的预览。
完成后,点击模板对应的预览或保存按钮。
将嵌入代码添加到您的 Shopify 博客
注: #### 步骤:桌面
- 在 Shopify 后台中,转至在线商店 > 博客文章。
- 在博客文章页面中,点击要编辑的博客文章的标题,或点击添加博客文章以创建新的博客文章。
- 在撰写博客文章部分中,点击富文本编辑器中的显示 HTML。
- 将您的嵌入代码粘贴到主文本字段中。
- 点击保存。
iPhone
- 在 Shopify 应用中,点击 … 按钮。
- 在销售渠道部分,轻触在线商店。
- 轻触博客文章。
Android
- 在 Shopify 应用中,点击 … 按钮。
- 在销售渠道部分,轻触在线商店。
- 轻触博客文章。
您可以将嵌入代码添加到 Squarespace 的各文章中以及主页上的菜单中。在某些情况下,您可能希望同时添加到上述两处位置。例如,您可以在主页上嵌入购物车,以便接收来自嵌入各文章的 Buy Button 的购买。
步骤:
- 在 Squarespace 控制面板中,打开您要在其中添加嵌入代码的网页。
- 找到您希望显示 Buy Button 或嵌入式购物车的页面上的元素,将光标移到页面内容区域上,然后点击编辑。
- 点击要添加嵌入代码的插入点。
- 在内容块对话框中的更多部分中,点击代码。
- 在 Shopify 后台,复制嵌入代码对话框中的嵌入代码。
- 在您的 Squarespace 控制面板中,将嵌入代码粘贴到代码对话框中。请务必将文本字段设置为接收 HTML。
- 在 EDIT CODE(编辑代码)对话框中点击 APPLY(应用)。
- 再次点击页面编辑器上的保存。由于 Squarespace 在其控制面板中禁用了 JavaScript,因此您需要单独预览页面才能查看 Buy Button 或嵌入式购物车是否正常工作。
如果您完成了步骤,但 Buy Button 并未加载,则您可能需要关闭 Ajax 加载。要查看更多详细信息,请转到启用或禁用 Ajax。
将嵌入代码添加到 Wix
在 Shopify 后台内创建 Buy Button 或产品系列后,您可以使用 Wix 网站编辑器将其添加到您的 Wix 网站。
如果您想在不编辑嵌入代码的情况下在您的 Wix 网站上显示多种产品,则可以嵌入产品系列。您可以在 Shopify 后台内为您想显示在 Wix 上的产品创建新的产品系列。
步骤:
- 在 Shopify 后台中,为产品或产品系列创建 Buy Button,然后复制其嵌入代码。
- 从您的 Wix 账户中,在 My Sites(我的网站)部分中找到您想编辑的网站,然后点击 Edit Site(编辑网站)。
- 在 Wix 网站编辑器中,点击
+
按钮,然后点击更多。 - 点击 HTML 代码以将 HTML 代码小组件添加到页面中。
- 点击 Enter Code(输入代码)。
- 在 HTML Settings(HTML 设置)对话框中,将 Buy Button 或产品系列的嵌入代码粘贴到 Add your code here(在此处添加您的代码)字段中,然后点击 Update(更新)。
- 调整 HTML 代码小组件的大小以适应其内容。如果要创建购物车嵌入代码,请确保购物车标签显示在正确的位置。
- 完成后,点击保存。
嵌入多个产品或产品系列
步骤:
- 在 Shopify 后台中,为产品或产品系列创建 Buy Button,然后复制其嵌入代码。
- 将代码粘贴到代码编辑器或 Wix 建站工具中。重复前两个步骤,直至创建了所需的 Buy Button。
- 编辑嵌入代码,确保它们以正确的对齐方式显示。
- 从您的 Wix 账户中,在 My Sites(我的网站)部分中找到您想编辑的网站,然后点击 Edit Site(编辑网站)。
- 在 Wix 网站编辑器中,点击
+
按钮,然后点击更多。 - 点击 HTML 代码以将 HTML 代码小组件添加到页面中。
- 点击 Enter Code(输入代码)。
- 在 HTML Settings(HTML 设置)对话框中,将 Buy Button 或产品系列的已编辑代码粘贴到 Add your code here(在此处添加您的代码)字段中,然后点击 Update(更新)。
- 调整 HTML 代码小组件的大小以适应其内容。如果要创建购物车嵌入代码,请确保购物车标签显示在正确的位置。
- 完成后,点击保存。
单独添加脚本标记
部分平台(例如 Unbounce)要求您将嵌入代码的 <script>
标签粘贴在页面标头中,然后将嵌入代码的剩余部分粘贴在您想显示 Buy Button 的页面上。
步骤:
- 从在您创建 Buy Button 时生成的嵌入代码中同时复制
<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>
- 打开要在其中嵌入 Buy Button 的网站的页面标头。
- 将整个
<script>
元素粘贴到页面标头中。 - 保存更改。
- 对于 Shopify 后台的原始嵌入代码,仅复制
<div>
元素。例如:
<div id='product-component-2dd3c8704e6'></div>
- 打开要在其中嵌入 Buy Button 的网站上的页面。
- 将
<div>
代码片段粘贴到此页面中。 - 保存更改。