在 Shopify 后臺(tái)創(chuàng)建 Buy Button 后，就可以將其添加到自己的網(wǎng)站或博客。
將嵌入代碼添加到您網(wǎng)站的源 HTML 的過程略有不同，具體取決于您希望 Buy Button 和購(gòu)物車顯示的方式和位置 - 可顯示在發(fā)布平臺(tái)上，有時(shí)還可顯示在您在該平臺(tái)上使用的模板中。
如果您需要將嵌入代碼添加到 Shopify 以外的發(fā)布平臺(tái)（例如 Squarespace 或 WordPress）方面的幫助，請(qǐng)直接聯(lián)系您的網(wǎng)站提供商或發(fā)布平臺(tái)獲取支持。
您可以將嵌入代碼添加到 WordPress 網(wǎng)站上的文章、頁(yè)面或模板中。
備注嵌入式 Buy Button 與自托管的 WordPress.org 網(wǎng)站以及 WordPress.com 提供的某些套餐兼容。下方文檔在編寫時(shí)參考了最近的 WordPress 版本。您網(wǎng)站上安裝的版本可能有所不同。您可以在 WordPress 支持網(wǎng)站上了解有關(guān) WordPress 版本的詳細(xì)信息。
將嵌入代碼添加到 WordPress 文章或頁(yè)面 在 Shopify 中，創(chuàng)建 Buy Button，并從嵌入代碼對(duì)話框中復(fù)制其嵌入代碼（或點(diǎn)擊 Copy embed code to clipboard（將嵌入代碼復(fù)制到剪貼板））。 在 WordPress 控制面板中，轉(zhuǎn)至您的文章或頁(yè)面。 創(chuàng)建新文章或頁(yè)面，或編輯現(xiàn)有文章或頁(yè)面。 在塊編輯器中，點(diǎn)擊 + 按鈕，搜索自定義 HTML，然后點(diǎn)擊以插入自定義 HTML 塊。 將嵌入代碼粘貼到自定義 HTML 塊提供的文本字段中。
可選：移動(dòng)自定義 HTML 塊或預(yù)覽 Buy Button 的顯示方式：
若要移動(dòng)自定義 HTML 塊，請(qǐng)點(diǎn)擊塊工具欄中的箭頭按鈕，或?qū)⒃搲K拖動(dòng)到新位置。 若要預(yù)覽 Buy Button，請(qǐng)點(diǎn)擊塊工具欄上的預(yù)覽。完成后，點(diǎn)擊文章或頁(yè)面的保存草稿、預(yù)覽或發(fā)布按鈕。
如果您使用 WordPress 的經(jīng)典編輯器插件，則無需使用自定義 HTML 塊，而是將文本編輯器從視覺模式更改為文本模式，并將嵌入代碼粘貼到編輯器中。
如果您的 WordPress 模板支持網(wǎng)站編輯器，您可以將嵌入式 Buy Button 添加到您網(wǎng)站的任何模板中。
步驟：
在 Shopify 中，創(chuàng)建 Buy Button，并從嵌入代碼對(duì)話框中復(fù)制其嵌入代碼（或點(diǎn)擊 Copy embed code to clipboard（將嵌入代碼復(fù)制到剪貼板））。 在 WordPress 控制面板中，轉(zhuǎn)至編輯器。 導(dǎo)航到要編輯的模板。 在塊編輯器中，點(diǎn)擊 + 按鈕，搜索自定義 HTML，然后點(diǎn)擊以插入自定義 HTML 塊。 將嵌入代碼粘貼到自定義 HTML 塊提供的文本字段中。
可選：移動(dòng)自定義 HTML 塊或預(yù)覽 Buy Button 的顯示方式：
若要移動(dòng)自定義 HTML 塊，請(qǐng)點(diǎn)擊塊工具欄中的箭頭按鈕，或?qū)⒃搲K拖動(dòng)到新位置。 若要預(yù)覽 Buy Button，請(qǐng)點(diǎn)擊塊工具欄上的預(yù)覽。完成后，點(diǎn)擊模板對(duì)應(yīng)的預(yù)覽或保存按鈕。
將嵌入代碼添加到您的 Shopify 博客
備注
Buy Button 會(huì)創(chuàng)建一個(gè)單獨(dú)的購(gòu)物車。如果客戶移動(dòng)至您在線商店中的不同頁(yè)面，商品則不會(huì)再顯示在購(gòu)物車中。您可以編輯 Buy Button 以直接指向結(jié)賬。
步驟：
桌面
在 Shopify 后臺(tái)中，轉(zhuǎn)至在線商店 > 博客文章。 在博客文章頁(yè)面中，點(diǎn)擊要編輯的博客文章的標(biāo)題，或點(diǎn)擊添加博客文章以創(chuàng)建新的博客文章。 在撰寫博客文章部分中，點(diǎn)擊富文本編輯器中的顯示 HTML。 將您的嵌入代碼粘貼到主文本字段中。 點(diǎn)擊保存。
iPhone/Android
在 Shopify 應(yīng)用中，點(diǎn)擊 … 按鈕。 在銷售渠道部分，輕觸在線商店。 輕觸博客文章。 ## 將嵌入代碼添加到 Squarespace 注意Squarespace 上的部分高級(jí)自定義項(xiàng)是特定于模板的。Shopify 不支持這些自定義項(xiàng)。
您可以將嵌入代碼添加到 Squarespace 的各文章中以及主頁(yè)上的菜單中。在某些情況下，您可能希望同時(shí)添加到上述兩處位置。例如，您可以在主頁(yè)上嵌入購(gòu)物車，以便接收來自嵌入各文章的 Buy Button 的購(gòu)買。
步驟：
在 Squarespace 控制面板中，打開您要在其中添加嵌入代碼的網(wǎng)頁(yè)。 找到您希望顯示 Buy Button 或嵌入式購(gòu)物車的頁(yè)面上的元素，將光標(biāo)移到頁(yè)面內(nèi)容區(qū)域上，然后點(diǎn)擊編輯。 點(diǎn)擊要添加嵌入代碼的插入點(diǎn)。 在內(nèi)容塊對(duì)話框中的更多部分中，點(diǎn)擊代碼。 在 Shopify 后臺(tái)，復(fù)制嵌入代碼對(duì)話框中的嵌入代碼。 在您的 Squarespace 控制面板中，將嵌入代碼粘貼到代碼對(duì)話框中。請(qǐng)務(wù)必將文本字段設(shè)置為接收 HTML。 在 EDIT CODE（編輯代碼）對(duì)話框中點(diǎn)擊 APPLY（應(yīng)用）。 再次點(diǎn)擊頁(yè)面編輯器上的保存。由于 Squarespace 在其控制面板中禁用了 JavaScript，因此您需要單獨(dú)預(yù)覽頁(yè)面才能查看 Buy Button 或嵌入式購(gòu)物車是否正常工作。
如果您完成了步驟，但 Buy Button 并未加載，則您可能需要關(guān)閉 Ajax 加載。要查看更多詳細(xì)信息，請(qǐng)轉(zhuǎn)到啟用或禁用 Ajax。
如果您將嵌入式購(gòu)物車添加到 Squarespace 主頁(yè)上的菜單中，它將接收來自您嵌入各文章的 Buy Button 的訂單。
在 Shopify 后臺(tái)內(nèi)創(chuàng)建 Buy Button 或產(chǎn)品系列后，您可以使用 Wix 網(wǎng)站編輯器將其添加到您的 Wix 網(wǎng)站。
如果您想為多個(gè)產(chǎn)品或產(chǎn)品系列嵌入 Buy Button，則需要先編輯嵌入代碼，然后再將其添加到 Wix HTML 代碼小組件。如果您在沒有編輯嵌入代碼的情況下將多個(gè) Buy Button 嵌入到您的 Wix 網(wǎng)站中，那么當(dāng)客戶嘗試購(gòu)買多個(gè)產(chǎn)品時(shí)，每個(gè)產(chǎn)品將對(duì)應(yīng)一個(gè)單獨(dú)的購(gòu)物車。
如果您想在不編輯嵌入代碼的情況下在您的 Wix 網(wǎng)站上顯示多種產(chǎn)品，則可以嵌入產(chǎn)品系列。您可以在 Shopify 后臺(tái)內(nèi)為您想顯示在 Wix 上的產(chǎn)品創(chuàng)建新的產(chǎn)品系列。
步驟： 在 Shopify 后臺(tái)中，為產(chǎn)品或產(chǎn)品系列創(chuàng)建 Buy Button，然后復(fù)制其嵌入代碼。
備注
為 Wix 網(wǎng)站創(chuàng)建 Buy Button 時(shí)，由于存在 Wix 限制，您無法使用在同一標(biāo)簽中重定向選項(xiàng)。
從您的 Wix 賬戶中，在 My Sites（我的網(wǎng)站）部分中找到您想編輯的網(wǎng)站，然后點(diǎn)擊 Edit Site（編輯網(wǎng)站）。
在 Wix 網(wǎng)站編輯器中，點(diǎn)擊 + 按鈕，然后點(diǎn)擊更多。
點(diǎn)擊 HTML 代碼以將 HTML 代碼小組件添加到頁(yè)面中。
點(diǎn)擊 Enter Code（輸入代碼）。
在 HTML Settings（HTML 設(shè)置）對(duì)話框中，將 Buy Button 或產(chǎn)品系列的嵌入代碼粘貼到 Add your code here（在此處添加您的代碼）字段中，然后點(diǎn)擊 Update（更新）。
調(diào)整 HTML 代碼小組件的大小以適應(yīng)其內(nèi)容。如果要?jiǎng)?chuàng)建購(gòu)物車嵌入代碼，請(qǐng)確保購(gòu)物車標(biāo)簽顯示在正確的位置。
完成后，點(diǎn)擊保存。
嵌入多個(gè)產(chǎn)品或產(chǎn)品系列
步驟：
在 Shopify 后臺(tái)中，為產(chǎn)品或產(chǎn)品系列創(chuàng)建 Buy Button，然后復(fù)制其嵌入代碼。 將代碼粘貼到代碼編輯器或 Wix 建站工具中。重復(fù)前兩個(gè)步驟，直至創(chuàng)建了所需的 Buy Button。 編輯嵌入代碼，確保它們以正確的對(duì)齊方式顯示。 從您的 Wix 賬戶中，在 My Sites（我的網(wǎng)站）部分中找到您想編輯的網(wǎng)站，然后點(diǎn)擊 Edit Site（編輯網(wǎng)站）。 在 Wix 網(wǎng)站編輯器中，點(diǎn)擊 + 按鈕，然后點(diǎn)擊更多。 點(diǎn)擊 HTML 代碼以將 HTML 代碼小組件添加到頁(yè)面中。 點(diǎn)擊 Enter Code（輸入代碼）。
在 HTML Settings（HTML 設(shè)置）對(duì)話框中，將 Buy Button 或產(chǎn)品系列的已編輯代碼粘貼到 Add your code here（在此處添加您的代碼）字段中，然后點(diǎn)擊 Update（更新）。 調(diào)整 HTML 代碼小組件的大小以適應(yīng)其內(nèi)容。如果要?jiǎng)?chuàng)建購(gòu)物車嵌入代碼，請(qǐng)確保購(gòu)物車標(biāo)簽顯示在正確的位置。 完成后，點(diǎn)擊保存。
備注
需要使用 Wix 編輯器的相關(guān)幫助？請(qǐng)聯(lián)系 Wix 支持。
部分平臺(tái)（例如 Unbounce）要求您將嵌入代碼的 <script> 標(biāo)簽粘貼在頁(yè)面標(biāo)頭中，然后將嵌入代碼的剩余部分粘貼在您想顯示 Buy Button 的頁(yè)面上。
步驟：
從在您創(chuàng)建 Buy Button 時(shí)生成的嵌入代碼中同時(shí)復(fù)制 <div> 元素和 <script> 元素。例如： <scripttype="text/javascript">/*<![CDATA[*/(function(){varscriptURL='https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';if(window.ShopifyBuy){if(window.ShopifyBuy.UI){ShopifyBuyInit();}else{loadScript();}}else{loadScript();}functionloadScript(){varscript=document.createElement('script');script.async=true;script.src=scriptURL;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(script);script.onload=ShopifyBuyInit;}functionShopifyBuyInit(){varclient=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 的網(wǎng)站的頁(yè)面標(biāo)頭。
將整個(gè) <script> 元素粘貼到頁(yè)面標(biāo)頭中。
保存更改。 對(duì)于 Shopify 后臺(tái)的原始嵌入代碼，僅復(fù)制 <div> 元素。例如： <divid='product-component-2dd3c8704e6'></div> 打開要在其中嵌入 Buy Button 的網(wǎng)站上的頁(yè)面。 將 <div> 代碼片段粘貼到此頁(yè)面中。 保存更改。
