編輯或刪除購買按鈕或內嵌購物車
您從 Shopify 管理員複製程式碼片段並貼到網頁來源 HTML 後，隨即會產生購買按鈕和購物車。這些程式碼片段即稱為嵌入程式碼。如果您想變更按鈕或購物車的外觀或行為，則必須編輯相關的嵌入程式碼。
刪除購買按鈕、內嵌商品系列或內嵌購物車
步驟：
- 開啟含有購買按鈕、內嵌商品系列或內嵌購物車的網頁來源 HTML。
- 從來源 HTML 將開頭為
<script data-shopify-buy-ui>且結尾為</script>的整段嵌入程式碼刪除。就購買按鈕而言，嵌入程式碼看起來如下：
<script data-shopify-buy-ui>
var scriptURL = "https://cndurl.com/buy-button-storefront.js";
if (window.ShopifyBuy && window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
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({
apiKey: 'your-api-key',
domain: 'your-store.myshopify.com',
appId: '6'
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: 12345,
options: {
product: {
buttonDestination: 'cart',
contents: {
description: true
},
text: {
button: 'Add to Cart'
},
styles: {
button: {
'background-color': 'blue'
}
}
},
cart: {
styles: {
button: {
'background-color': 'orange'
}
}
}
}
});
});
}
</script>- 儲存變更。
您的網頁不會再顯示購買按鈕、內嵌商品系列或內嵌購物車。
編輯購買按鈕
若要變更現有購買按鈕的外觀或設定，您必須編輯要新增到來源 HTML 的嵌入程式碼。
每個購買按鈕都是從內嵌程式碼建置的個別「元件」。例如，如果您在網頁上新增有購物車的產品，則內嵌程式碼會產生一個 product (產品) 元件、一個 cart (購物車) 元件及一個購物車 toggle (切換按鈕) 元件：
如果您希望產品元件開啟具有產品詳細資料的互動視窗，則嵌入程式碼會產生一個 modal 元件和一個 modalProduct 元件：
下列程式碼片段中，有 product (產品) 和 cart (購物車) 的個別元件。
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: 12345,
options: {
product: {
buttonDestination: 'cart',
contents: {
description: true
},
text: {
button: 'Add to Cart'
},
styles: {
button: {
'background-color': 'blue'
}
}
},
cart: {
styles: {
button: {
'background-color': 'orange'
}
}
}
}
});
});這些元件會透過嵌入程式碼中的設定「物件」個別進行設定。若要變更購買按鈕的外觀或行為，您可以編輯嵌入程式碼中的設定物件。
每個元件都有多種屬性可供編輯。如需可編輯選項的完整清單，請檢視我們的開發人員說明文件。如果內嵌程式碼內沒有您想設定的選項，您可將適當的「索引鍵」新增到適當的物件 (請參閱範例)。
編輯元件樣式
每個元件都有巢狀的 styles (樣式) 設定物件可供您編輯或新增，以用來變更元件的外觀。這些樣式的格式設定類似於 CSS。styles 物件中的每個頂層索引鍵都代表元件 (例如：標題或按鈕) 中的一個元素。在此物件中，每個索引鍵都是 CSS 屬性 (例如：'background-color' 或 'border')，而值則是 CSS 值。
options: {
product: {
styles: {
button: {
'background-color': 'red',
'border-radius': '5px'
}
}
}
}凡是有效的 CSS 屬性都可以新增至 styles。請注意，含有破折號的屬性名稱必須放在單引號之內。
如需有關 CSS 自訂的詳細資訊，請檢視開發人員說明文件。
範例：將購物車連結替換成列有產品詳細資料的互動視窗
在此範例中，您可將目前的內嵌程式碼變更為將客戶導向產品詳細資料互動視窗，而非導向購物車：
- 開啟包含您要變更之內嵌產品的網頁 HTML。
- 找到
product(產品) 設定物件。 - 在物件中找出
buttonDestination鍵。
options: {
product: {
buttonDestination: 'cart'
}
}- 將該鍵的值變更為
'modal'(請務必加上單引號)：
options: {
product: {
buttonDestination: 'modal'
}
}- 儲存變更。
範例：變更內嵌產品的版面配置
在此範例中，您可變更內嵌產品的版面配置，讓圖片顯示在側邊而非最上方：
- 開啟包含您要變更之內嵌產品的網頁 HTML。
- 找到
product(產品) 設定物件。 - 新增
layout(版面配置) 鍵，然後將值設為'horizontal'(水平)：
options: {
product: {
buttonDestination: 'modal',
layout: 'horizontal'
}
}<aside class="note">
<h4>備註</h4>
<p>When you add the <code>'horizontal'</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>- 儲存變更。
編輯網站的購物車
如果您要變更網站購物車的外觀或行為，您必須編輯內嵌程式碼中的 cart (購物車) 設定物件。
步驟：
- 開啟含有您要編輯之購物車的網頁 HTML。
- 在內嵌程式碼中找出
cart(購物車) 設定物件。
options: {
cart: {
startOpen: false
}
}- 編輯或新增您要變更的屬性。如需可設定屬性的完整清單，請檢視開發人員說明文件。
- 儲存變更。
編輯內嵌商品系列
編輯內嵌產品系列的方式與編輯產品或購物車的程序類似。若要編輯產品系列中的產品屬性 (例如：每個產品的版面配置)，則您必須找到 product (產品) 設定物件，然後按照您編輯內嵌產品的方式來進行編輯。若要編輯產品系列本身的屬性 (例如：「下一頁」按鈕的文字)，則請改為編輯 productSet 鍵。
部分屬性 (例如：元件的文字) 要透過「巢狀」物件進行設定；巢狀物件是指出現在其他物件內的物件。例如，「下一頁」按鈕的文字會出現在 productSet 元件的 text (文字) 物件內：
options: {
productSet: {
text: {
nextPageButton: 'Continue'
}
}
}