產品頁面
商品頁面是顯示有關您商店中銷售的商品的資訊,以及顧客可以從何處購買商品的資訊。
佈景主題編輯器中,產品頁面預設有商品資訊和相關商品區段。
「商品資訊」區段
商品資訊區段顯示商品的詳情,例如標題、描述、價格和圖片。
「商品資訊」區段的相關設定
設定 | 說明 |
---|---|
在電腦版啟用黏性內容 | 向下捲動頁面時,在捲動過所有圖片後才會開始捲動產品資訊欄。 |
顏色配置 | 您可套用至此區段的一組顏色。深入瞭解顏色配置。 |
電腦版多媒體檔案寬度 | 設定桌上型電腦商品頁面中您的商品多媒體檔案寬長。選擇「小」、「中」或「大」。 |
將多媒體檔案限制為螢幕高度 | 選取此選項以根據任意裝置的瀏覽器視窗高度,設定多媒體檔案高度上限。 |
多媒體檔案最適大小 | 選取「原始」以維持多媒體檔案的原始寬高比,或選取「填滿」以將多媒體檔案填滿其容器。 |
電腦版版面配置 |
設定桌上型電腦中您的商品多媒體檔案版面配置。從以下選項中進行選擇:
|
電腦版多媒體檔案位置 | 選取要在桌上型電腦上將商品的多媒體檔案置於頁面左側或右側。 |
圖片縮放 | 選擇圖片在桌上型電腦上的縮放方式:
|
行動版版面配置 | 設定手機裝置上您的商品多媒體檔案版面配置。從以下選項中進行選擇:
|
在選取一個子類後,隱藏其他子類的多媒體檔案 | 選擇某個子類後,其他子類的圖片將在畫面中隱藏。取消選擇子類時,圖片會重新顯示。 |
啟用影片循環播放功能 | 對於商品多媒體檔案中的任何影片,此設定會循環播放影片,即影片會在播放完成後自動重放。 |
頂端邊框間距 | 設定頂部空間數。 |
底部邊框間距 | 設定底部空間數。 |
以及商品資訊區段設定,您亦可以檢視和自訂商品識別證的一些佈景主題設定。您還可以新增您自己的區段特定的自訂 CSS。
「產品資訊」區塊
您可以在商品資訊區段中使用以下區塊:
文字區塊
您可以使用動態來源在文字區塊中顯示靜態文字或變數資料。舉例來說,您可以新增顯示行銷訊息的文字,例如「100 美元以上訂單免運費」,相同文字將會顯示在每項商品中。您也可以新增商品廠商欄位等動態來源,該欄位會依據正在查看的商品而變更。
設定 | 說明 |
---|---|
文字 | 在商品頁面新增額外資訊的文字欄。 |
文字樣式 |
變更文字樣式。從以下選項中進行選擇:
|
「標題」區塊
標題區塊會顯示目前瀏覽的商品標題,無可自訂的設定選項。
「價格」區塊
價格區塊會顯示目前瀏覽的商品的定價資訊,例如價格和比較售價,無可自訂的設定選項。
「子類選擇器」區塊
子類選擇器區塊會顯示目前瀏覽的商品的所有子類選項。系統只會針對具有子類選項的商品顯示子類選擇器。如果您擁有具子類選項的商品,但將此區塊移除,顧客便無法選擇或購買他們想要的子類選項。
設定 | 說明 |
---|---|
樣式 |
選擇向顧客顯示商品子類選項的方式。從以下選項中進行選擇:
|
色樣 |
選擇要向顧客顯示色樣的方式。從以下選項中進行選擇:
|
「數量選擇器」區塊
數量選擇器區塊會顯示可點擊和編輯的數字欄位,供顧客更改他們希望購買的商品數。無可自訂的設定選項。
「購買按鈕」區塊
購買按鈕區塊會顯示「加入購物車」按鈕和任何到店取貨資訊。它還可以顯示您商店所有的任何動態結帳按鈕。
設定 | 說明 |
---|---|
顯示動態結帳按鈕 | 顯示您在「付款」設定中啟用的任何動態結帳選項。 |
顯示禮品卡的收件人資訊表單 | 在您所有的任何禮品卡商品上顯示可選用的核取方塊,讓顧客能夠安排將禮品卡與個人化訊息傳送給收件人。 |
「說明」區塊
描述區塊會顯示正在檢視的商品描述,無可自訂的設定選項。
「分享」區塊
分享區塊會顯示可點擊的連結,讓顧客將此商品分享至他們的社群媒體。
設定 | 說明 |
---|---|
文字 | 顧客點擊文字,即可將此商品分享至他們的社群媒體。 |
SKU 區塊
SKU 區塊會顯示與商品或子類相關聯的存貨單位 (SKU)。深入瞭解如何將存貨單位 (SKU) 數量新增至商品子類選項。
設定 | 說明 |
---|---|
文字樣式 |
變更文字樣式。從以下選項中進行選擇:
|
庫存狀態區塊
庫存狀態區塊顯示商品的庫存狀態。您可以永久顯示庫存狀態和剩餘庫存數量,或在商品庫存數量達到您設定的門檻後才顯示剩餘庫存數量。系統只會針對已啟用庫存追蹤的商品顯示庫存狀態。
設定 | 說明 |
---|---|
文字樣式 |
變更文字樣式。從以下選項中進行選擇:
|
庫存過低門檻 | 使用範圍滑桿設定您的商品顯示庫存稀少訊息時的門檻。選擇介於 0 到 100 之間的數字。如果您將滑桿設為 0,在商品完全無庫存前,會顯示可供貨狀態。 |
顯示庫存數量 | 若要顯示商品的現有庫存數量,則選取此選項。 |
「自訂 Liquid」區塊
自訂 Liquid 區塊會顯示您新增至區塊的自訂 Liquid 或 HTML 程式碼。
設定 | 說明 |
---|---|
Liquid 程式碼 | 顯示您輸入 Liquid 或 HTML 程式碼 所呈現的內容。 |
可摺疊橫列的區塊
可收合橫列區塊會顯示包含標題的可展開和收合的分頁。顧客點擊圖示、標題或向下箭頭時,該橫列會展開以顯示其他內容。
設定 | 說明 |
---|---|
標題 | 橫列標題,在橫列收合和展開時顯示。 |
圖示 | 選取要與可收合橫列一起顯示的圖示,或選擇無以僅顯示橫列的標題。 |
橫列內容 | 使用 RTF 文字編輯器輸入您橫列的內容。內容僅在展開橫列時顯示。 |
橫列內容頁面 | 將頁面中的內容新增到您的橫列中。這僅會顯示您在 Shopify 管理介面網路商店 > 頁面區塊新增至頁面的內容,它不顯示您在佈景主題編輯器新增至頁面範本中的任何內容。在橫列內容欄位中輸入的任何內容都會顯示在您新增的頁面內容之上。 |
「彈出式視窗」區塊
彈出式視窗區塊顯示可點擊的文字,按一下時可打開一個彈出式視窗。
設定 | 說明 |
---|---|
連結標籤 | 顧客點擊可點擊的文字,即會顯示彈出式對話。 |
頁面 | 選取要在彈出式對話中顯示內容的頁面。這僅會顯示您在 Shopify 管理介面網路商店 > 頁面區塊新增至頁面的內容,它不顯示您在佈景主題編輯器新增至頁面範本中的任何內容。 |
「產品評等」區塊
商品評價區塊會顯示產品的平均星級評等,並在括號中顯示評論數,例如:★★★★★ (8)。
若要顯示商品評價,您需要使用商品評價應用程式,以及 reviews.rating_count
和 reviews.rating
的中繼欄位定義。
此區塊未提供可自訂的設定選項。
配套商品區塊
配套商品區塊顯示您使用 Shopify Search and Discovery 應用程式設定的配套商品。
設定 | 說明 |
---|---|
標題 | 區塊的標題。 |
顯示為可收合的橫列 | 選取後,內容會橫列內以收合方式顯示。顧客點擊標題時,該橫列會展開以顯示其他內容。 |
圖示 | 配套商品顯示在可收合橫列內時,選取一個圖示以搭配標題。 |
產品數量顯示上限 | 選取要顯示的配套商品數量上限。選擇介於 1 到 10 之間的數字。 |
每頁商品數 | 選取每個滑桿頁面要顯示配套商品的數量。選擇介於 1 到 4 之間的數字。 |
分頁樣式 | 顯示在商品下方的滑桿導覽樣式。選擇點、計數或數字。 |
圖片比例 | 設定商品卡圖片的寬高比。選擇縱向或正方形。 |
啟用「快速新增」按鈕 |
如果您啟用了「快速新增」按鈕,您的顧客可以用下列任一選項從商品卡將品項新增至購物車:
|
附文字圖示區塊
圖示和文字區塊可顯示最多 3 個圖示,以及附上的文字。從預先安裝的圖示清單選擇,或使用您上傳的圖片。
設定 | 說明 |
---|---|
版面配置 | 為該區段選擇水平或垂直版面配置。 |
第一個圖示 | 選取要在區段顯示的圖示,或選擇無以僅顯示標題。 |
第一張圖片 | 選擇使用您自己的圖片,而非圖示。 |
第一個標題 | 為第一個圖示或圖片新增標題。 |
第二個圖示 | 選取要在區段顯示的圖示,或選擇無以僅顯示標題。 |
第二張圖片 | 選擇使用您自己的圖片,而非圖示。 |
第二個標題 | 為第二個圖示或圖片添加標題。 |
第三個圖示 | 選取要在區段顯示的圖示,或選擇無以僅顯示標題。 |
第三張圖片 | 選擇使用您自己的圖片,而非圖示。 |
第三個標題 | 為第三個圖示或圖片新增標題。 |
「相關商品」區段
根據目前瀏覽的商品,相關商品區段會顯示類似商品、具有相似說明的商品,或經常與目前瀏覽的商品一起購買的商品。您可以使用 Shopify Search & Discovery 應用程式手動將您自己的商品新增到相關商品區段。
若要深入瞭解產品推薦,請參閱瞭解產品推薦。
「相關商品」區段設定
設定 | 說明 |
---|---|
標題 | 此區段的標題。 |
標題大小 | 標題文字的大小。選擇小型、中型、大型、超大型或超超大型文字大小。 |
產品數量顯示上限 | 設定要顯示的相關商品數量上限。選擇介於 2 到 10 之間的數字。 |
電腦版的欄數 | 設定桌上型電腦所顯示的商品欄數。選擇介於 1 到 6 之間的數字。 |
顏色配置 | 您可套用至此區段的一組顏色。深入瞭解顏色配置。 |
圖片比例 | 設定顯示的相關商品主要圖片的圖片比例。從以下選項中進行選擇:
|
圖片形狀 | 為您相關的商品圖片選擇下列其中一種圖片形狀:
|
游標暫留時顯示次要圖片 | 當顧客在桌上型電腦上將游標停留在商品圖片上時,顯示商品的次要圖片(若有的話)。 |
顯示廠商 | 顯示每項產品的廠商。 |
顯示產品評等 | 顯示商品的平均星級評等,並在括號中顯示評論數,例如:★★★★★ (8)。同時也需要商品評價應用程式,以及下列項目的中繼欄位定義:reviews.rating_count 和 reviews.rating。 |
行動版的欄數 | 設定手機裝置所顯示的商品欄數。選擇 1 或 2 欄。 |
頂端邊框間距 | 設定頂部空間數。 |
底部邊框間距 | 設定底部空間數。 |