編輯或刪除購買按鈕或內嵌購物車
您從 Shopify 管理員複製程式碼片段並貼到網頁來源 HTML 後,隨即會產生購買按鈕和購物車。這些程式碼片段即稱為嵌入程式碼。如果您想變更按鈕或購物車的外觀或行為,則必須編輯相關的嵌入程式碼。
刪除購買按鈕、內嵌商品系列或內嵌購物車
步驟:
- 開啟含有購買按鈕、內嵌商品系列或內嵌購物車的網頁來源 HTML。
- 從來源 HTML 將開頭為
<script data-shopify-buy-ui>
且結尾為</script>
的整段嵌入程式碼刪除。就購買按鈕而言,嵌入程式碼看起來如下:
- 儲存變更。
您的網頁不會再顯示購買按鈕、內嵌商品系列或內嵌購物車。
編輯購買按鈕
若要變更現有購買按鈕的外觀或設定,您必須編輯要新增到來源 HTML 的嵌入程式碼。
每個購買按鈕都是從內嵌程式碼建置的個別「元件」。例如,如果您在網頁上新增有購物車的產品,則內嵌程式碼會產生一個 product
(產品) 元件、一個 cart
(購物車) 元件及一個購物車 toggle
(切換按鈕) 元件:
如果您希望產品元件開啟具有產品詳細資料的互動視窗,則嵌入程式碼會產生一個 modal
元件和一個 modalProduct
元件:
下列程式碼片段中,有 product
(產品) 和 cart
(購物車) 的個別元件。
這些元件會透過嵌入程式碼中的設定「物件」個別進行設定。若要變更購買按鈕的外觀或行為,您可以編輯嵌入程式碼中的設定物件。
每個元件都有多種屬性可供編輯。如需可編輯選項的完整清單,請檢視我們的開發人員說明文件。如果內嵌程式碼內沒有您想設定的選項,您可將適當的「索引鍵」新增到適當的物件 (請參閱範例)。
編輯元件樣式
每個元件都有巢狀的 styles
(樣式) 設定物件可供您編輯或新增,以用來變更元件的外觀。這些樣式的格式設定類似於 CSS。styles
物件中的每個頂層索引鍵都代表元件 (例如:標題或按鈕) 中的一個元素。在此物件中,每個索引鍵都是 CSS 屬性 (例如:'background-color' 或 'border'),而值則是 CSS 值。
凡是有效的 CSS 屬性都可以新增至 styles
。請注意,含有破折號的屬性名稱必須放在單引號之內。
如需有關 CSS 自訂的詳細資訊,請檢視開發人員說明文件。
範例:將購物車連結替換成列有產品詳細資料的互動視窗
在此範例中,您可將目前的內嵌程式碼變更為將客戶導向產品詳細資料互動視窗,而非導向購物車:
- 開啟包含您要變更之內嵌產品的網頁 HTML。
- 找到
product
(產品) 設定物件。 - 在物件中找出
buttonDestination
鍵。
- 將該鍵的值變更為
'modal'
(請務必加上單引號):
- 儲存變更。
範例:變更內嵌產品的版面配置
在此範例中,您可變更內嵌產品的版面配置,讓圖片顯示在側邊而非最上方:
- 開啟包含您要變更之內嵌產品的網頁 HTML。
- 找到
product
(產品) 設定物件。 - 新增
layout
(版面配置) 鍵,然後將值設為'horizontal'
(水平):
- 儲存變更。
編輯網站的購物車
如果您要變更網站購物車的外觀或行為,您必須編輯內嵌程式碼中的 cart
(購物車) 設定物件。
步驟:
- 開啟含有您要編輯之購物車的網頁 HTML。
- 在內嵌程式碼中找出
cart
(購物車) 設定物件。
- 編輯或新增您要變更的屬性。如需可設定屬性的完整清單,請檢視開發人員說明文件。
- 儲存變更。
編輯內嵌商品系列
編輯內嵌產品系列的方式與編輯產品或購物車的程序類似。若要編輯產品系列中的產品屬性 (例如:每個產品的版面配置),則您必須找到 product
(產品) 設定物件,然後按照您編輯內嵌產品的方式來進行編輯。若要編輯產品系列本身的屬性 (例如:「下一頁」按鈕的文字),則請改為編輯 productSet
鍵。
部分屬性 (例如:元件的文字) 要透過「巢狀」物件進行設定;巢狀物件是指出現在其他物件內的物件。例如,「下一頁」按鈕的文字會出現在 productSet
元件的 text
(文字) 物件內: