在 Shopify 后臺創建 Buy Button 后,就可以將其添加到自己的網站或博客。
將嵌入代碼添加到您網站的源 HTML 的過程略有不同,具體取決于您希望 Buy Button 和購物車顯示的方式和位置 - 可顯示在發布平臺上,有時還可顯示在您在該平臺上使用的模板中。
如果您需要將嵌入代碼添加到 Shopify 以外的發布平臺(例如 Squarespace 或 WordPress)方面的幫助,請直接聯系您的網站提供商或發布平臺獲取支持。
您可以將嵌入代碼添加到 WordPress 網站上的文章、頁面或模板中。
備注嵌入式 Buy Button 與自托管的 WordPress.org 網站以及 WordPress.com 提供的某些套餐兼容。下方文檔在編寫時參考了最近的 WordPress 版本。您網站上安裝的版本可能有所不同。您可以在 WordPress 支持網站上了解有關 WordPress 版本的詳細信息。
將嵌入代碼添加到 WordPress 文章或頁面 在 Shopify 中,創建 Buy Button,并從嵌入代碼對話框中復制其嵌入代碼(或點擊 Copy embed code to clipboard(將嵌入代碼復制到剪貼板))。 在 WordPress 控制面板中,轉至您的文章或頁面。 創建新文章或頁面,或編輯現有文章或頁面。 在塊編輯器中,點擊 + 按鈕,搜索自定義 HTML,然后點擊以插入自定義 HTML 塊。 將嵌入代碼粘貼到自定義 HTML 塊提供的文本字段中。
可選:移動自定義 HTML 塊或預覽 Buy Button 的顯示方式:
若要移動自定義 HTML 塊,請點擊塊工具欄中的箭頭按鈕,或將該塊拖動到新位置。 若要預覽 Buy Button,請點擊塊工具欄上的預覽。完成后,點擊文章或頁面的保存草稿、預覽或發布按鈕。
如果您使用 WordPress 的經典編輯器插件,則無需使用自定義 HTML 塊,而是將文本編輯器從視覺模式更改為文本模式,并將嵌入代碼粘貼到編輯器中。
如果您的 WordPress 模板支持網站編輯器,您可以將嵌入式 Buy Button 添加到您網站的任何模板中。
步驟:
在 Shopify 中,創建 Buy Button,并從嵌入代碼對話框中復制其嵌入代碼(或點擊 Copy embed code to clipboard(將嵌入代碼復制到剪貼板))。 在 WordPress 控制面板中,轉至編輯器。 導航到要編輯的模板。 在塊編輯器中,點擊 + 按鈕,搜索自定義 HTML,然后點擊以插入自定義 HTML 塊。 將嵌入代碼粘貼到自定義 HTML 塊提供的文本字段中。
可選:移動自定義 HTML 塊或預覽 Buy Button 的顯示方式:
若要移動自定義 HTML 塊,請點擊塊工具欄中的箭頭按鈕,或將該塊拖動到新位置。 若要預覽 Buy Button,請點擊塊工具欄上的預覽。完成后,點擊模板對應的預覽或保存按鈕。
將嵌入代碼添加到您的 Shopify 博客
備注
Buy Button 會創建一個單獨的購物車。如果客戶移動至您在線商店中的不同頁面,商品則不會再顯示在購物車中。您可以編輯 Buy Button 以直接指向結賬。
步驟:
桌面
在 Shopify 后臺中,轉至在線商店 > 博客文章。 在博客文章頁面中,點擊要編輯的博客文章的標題,或點擊添加博客文章以創建新的博客文章。 在撰寫博客文章部分中,點擊富文本編輯器中的顯示 HTML。 將您的嵌入代碼粘貼到主文本字段中。 點擊保存。
iPhone/Android
在 Shopify 應用中,點擊 … 按鈕。 在銷售渠道部分,輕觸在線商店。 輕觸博客文章。 ## 將嵌入代碼添加到 Squarespace 注意Squarespace 上的部分高級自定義項是特定于模板的。Shopify 不支持這些自定義項。
您可以將嵌入代碼添加到 Squarespace 的各文章中以及主頁上的菜單中。在某些情況下,您可能希望同時添加到上述兩處位置。例如,您可以在主頁上嵌入購物車,以便接收來自嵌入各文章的 Buy Button 的購買。
步驟:
在 Squarespace 控制面板中,打開您要在其中添加嵌入代碼的網頁。 找到您希望顯示 Buy Button 或嵌入式購物車的頁面上的元素,將光標移到頁面內容區域上,然后點擊編輯。 點擊要添加嵌入代碼的插入點。 在內容塊對話框中的更多部分中,點擊代碼。 在 Shopify 后臺,復制嵌入代碼對話框中的嵌入代碼。 在您的 Squarespace 控制面板中,將嵌入代碼粘貼到代碼對話框中。請務必將文本字段設置為接收 HTML。 在 EDIT CODE(編輯代碼)對話框中點擊 APPLY(應用)。 再次點擊頁面編輯器上的保存。由于 Squarespace 在其控制面板中禁用了 JavaScript,因此您需要單獨預覽頁面才能查看 Buy Button 或嵌入式購物車是否正常工作。
如果您完成了步驟,但 Buy Button 并未加載,則您可能需要關閉 Ajax 加載。要查看更多詳細信息,請轉到啟用或禁用 Ajax。
如果您將嵌入式購物車添加到 Squarespace 主頁上的菜單中,它將接收來自您嵌入各文章的 Buy Button 的訂單。
在 Shopify 后臺內創建 Buy Button 或產品系列后,您可以使用 Wix 網站編輯器將其添加到您的 Wix 網站。
如果您想為多個產品或產品系列嵌入 Buy Button,則需要先編輯嵌入代碼,然后再將其添加到 Wix HTML 代碼小組件。如果您在沒有編輯嵌入代碼的情況下將多個 Buy Button 嵌入到您的 Wix 網站中,那么當客戶嘗試購買多個產品時,每個產品將對應一個單獨的購物車。
如果您想在不編輯嵌入代碼的情況下在您的 Wix 網站上顯示多種產品,則可以嵌入產品系列。您可以在 Shopify 后臺內為您想顯示在 Wix 上的產品創建新的產品系列。
步驟: 在 Shopify 后臺中,為產品或產品系列創建 Buy Button,然后復制其嵌入代碼。
備注
為 Wix 網站創建 Buy Button 時,由于存在 Wix 限制,您無法使用在同一標簽中重定向選項。
從您的 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 代碼小組件的大小以適應其內容。如果要創建購物車嵌入代碼,請確保購物車標簽顯示在正確的位置。 完成后,點擊保存。
備注
需要使用 Wix 編輯器的相關幫助?請聯系 Wix 支持。
部分平臺(例如 Unbounce)要求您將嵌入代碼的 <script> 標簽粘貼在頁面標頭中,然后將嵌入代碼的剩余部分粘貼在您想顯示 Buy Button 的頁面上。
步驟:
從在您創建 Buy Button 時生成的嵌入代碼中同時復制 <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 的網站的頁面標頭。
將整個 <script> 元素粘貼到頁面標頭中。
保存更改。 對于 Shopify 后臺的原始嵌入代碼,僅復制 <div> 元素。例如: <divid='product-component-2dd3c8704e6'></div> 打開要在其中嵌入 Buy Button 的網站上的頁面。 將 <div> 代碼片段粘貼到此頁面中。 保存更改。