新增購買按鈕程式碼到 HTML
在 Shopify 管理介面建立購買按鈕後,即可將該按鈕新增到自己的網站或網誌中。
視您要在發佈平台 (或搭配該平台佈景主題) 上顯示購買按鈕和購物車的方式和位置而定,新增內嵌程式碼到網站來源 HTML 的程序可能有所不同。
將內嵌程式碼新增至 WordPress
您可以在 WordPress 網站的貼文、頁面或範本中新增內嵌程式碼。
將內嵌程式碼新增到 WordPress 貼文或頁面
- 在 Shopify 中建立購買按鈕,然後從「內嵌程式碼」對話方塊中複製該按鈕的內嵌程式碼,或點擊「將內嵌程式碼複製到剪貼簿」。
- 從 Wordpress 控制面板中前往您的貼文或頁面。
- 建立新貼文或頁面,或是編輯現有貼文或頁面。
- 在區塊編輯器中,點擊「+」按鈕並搜尋「Custom HTML」,然後再點擊以插入自訂 HTML 區塊。
- 將內嵌程式碼貼入自訂 HTML 區塊提供的文字欄位中。
-
選用:移動自訂 HTML 區塊或預覽購買按鈕的顯示方式:
- 若要移動自訂 HTML 區塊,請點擊區塊工具列中的箭頭按鈕,或將該區塊拖曳至新位置。
- 若要預覽購買按鈕,請點擊區塊工具列上的「預覽」。
完成後,請點擊貼文或頁面的「儲存草稿」、「預覽」或「發佈」按鈕。
如果您使用 WordPress 的經典編輯器外掛程式,請將文字編輯器從「視覺化」變更為「文字」模式,然後在編輯器中貼上內嵌程式碼,來取代使用自訂 HTML 區塊。
將內嵌程式碼新增到 WordPress 範本
如果您的 WordPress 佈景主題支援網站編輯器,您可以在任何網站範本中新增內嵌購買按鈕。
步驟:
- 在 Shopify 中建立購買按鈕,然後從「內嵌程式碼」對話方塊中複製該按鈕的內嵌程式碼,或點擊「將內嵌程式碼複製到剪貼簿」。
- 在 WordPress 控制面板中,前往編輯器。
- 導覽至要編輯的範本。
- 在區塊編輯器中,點擊「+」按鈕並搜尋「Custom HTML」,然後再點擊以插入自訂 HTML 區塊。
- 將內嵌程式碼貼入自訂 HTML 區塊提供的文字欄位中。
-
選用:移動自訂 HTML 區塊或預覽購買按鈕的顯示方式:
- 若要移動自訂 HTML 區塊,請點擊區塊工具列中的箭頭按鈕,或將該區塊拖曳至新位置。
- 若要預覽購買按鈕,請點擊區塊工具列上的「預覽」。
完成後,請點擊範本的「預覽」或「儲存」按鈕。
新增內嵌程式碼到 Shopify 部落格
步驟:
- 從 Shopify 管理介面中,前往「線上商店 > 部落格貼文」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「部落格貼文」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「部落格貼文」。
- 在「部落格貼文」頁面中,按一下您要編輯的部落格貼文,或按一下「新增部落格貼文」以建立新貼文。
- 在「撰寫網誌文章」區段中,點擊 RTF 文字編輯器中的「顯示 HTML」。
- 將內嵌程式碼貼入主要文字欄位中。
- 點擊「儲存」。
新增內嵌程式碼到 Squarespace
您可新增嵌入程式碼到 Squarespace 中的個別文章和首頁選單。在某些情況下,您可能會想在這兩處都嵌入程式碼。例如,您可以在首頁嵌入購物車,以便處理從個別文章的「購買」按鈕所導入的購買。
步驟:
- 在 Squarespace 控制面板中,開啟您要新增嵌入程式碼的網頁。
- 在頁面上找到您要顯示購買按鈕或內嵌購物車的元素,將滑鼠游標移至「頁面內容」區域上方,然後按一下「編輯」。
- 在您要新增嵌入程式碼的位置按一下插入點。
- 在「內容區塊」對話方塊的「更多」區段中,按一下「程式碼」。
- 從 Shopify 管理員的「內嵌程式碼」對話方塊中複製內嵌程式碼。
- 在 Squarespace 控制面板中,將嵌入程式碼貼入「程式碼」對話方塊中。確保文字欄位已設為接受 HTML。
- 按一下「編輯程式碼」對話方塊中的「套用」。
- 再按一下頁面編輯器中的「儲存」。由於 Squarespace 在控制面板中停用 JavaScript,您必須從另外的頁面預覽,查看已新增的購買按鈕或內嵌購物車。
如果完成這些步驟後,購買按鈕並未載入,則您可能必須停用 Ajax 載入功能。如需瞭解詳情,請前往「啟用或停用 Ajax」。
新增內嵌程式碼到 Wix
在 Shopify 管理介面建立購買按鈕或商品系列後,即可使用 Wix 網站編輯器該其新增到 Wix 網站。
如果您想在 Wix 網站上顯示多項產品,但不想另外編輯嵌入程式碼,建議您嵌入產品系列。您可在 Shopify 管理介面為要在 Wix 上顯示的產品建立新系列。
步驟:
- 在您的 Shopify 管理介面中為產品或商品系列建立購買按鈕,然後複製該按鈕的內嵌程式碼。
- 從 Wix 帳戶的「我的網站」區段找到您要編輯的網站,然後按一下「編輯網站」。
- 在 Wix 網站編輯器中,依序按一下
+
按鈕和「更多」。 - 按一下「HTML 程式碼」,以在頁面上新增 HTML 程式碼小工具。
- 按一下「輸入程式碼」。
- 在「HTML 設定」對話方塊的「在這裡新增程式碼」欄位中,貼上購買按鈕或內嵌商品系列的嵌入程式碼,然後按一下「更新」。
- 根據內容長度重新調整 HTML 程式碼小工具大小。如果您建立的嵌入程式碼含購物車,請務必確定購物車索引標籤顯示於適當位置。
- 完成後,請按一下「儲存」。
嵌入多個產品或系列
步驟:
- 在您的 Shopify 管理介面中為產品或商品系列建立購買按鈕,然後複製該按鈕的內嵌程式碼。
- 在程式碼編輯器或 Wix 網站建立工具中貼上程式碼。重複前兩個步驟,直到您將需要的購買按鈕都建立完成。
- 編輯時,請確保嵌入程式碼正確對齊顯示。
- 從 Wix 帳戶的「我的網站」區段找到您要編輯的網站,然後按一下「編輯網站」。
- 在 Wix 網站編輯器中,依序按一下
+
按鈕和「更多」。 - 按一下「HTML 程式碼」,以在頁面上新增 HTML 程式碼小工具。
- 按一下「輸入程式碼」。
- 在「HTML 設定」對話方塊的「在這裡新增程式碼」欄位中,貼上已編輯的購買按鈕程式碼,然後按一下「更新」。
- 根據內容長度重新調整 HTML 程式碼小工具大小。如果您建立的嵌入程式碼含購物車,請務必確定購物車索引標籤顯示於適當位置。
- 完成後,請按一下「儲存」。
個別新增指令碼標記
有些平台 (例如: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>
程式碼片段貼到頁面中。儲存變更。