產品頁面

商品頁面是顯示有關您商店中銷售的商品的資訊,以及顧客可以從何處購買商品的資訊。

佈景主題編輯器中,產品頁面預設有商品資訊相關商品區段。

「商品資訊」區段

商品資訊區段顯示商品的詳情,例如標題、描述、價格和圖片。

「商品資訊」區段的相關設定

商品資訊區段的相關設定
設定說明
在電腦版啟用黏性內容向下捲動頁面時,在捲動過所有圖片後才會開始捲動產品資訊欄。
顏色配置您可套用至此區段的一組顏色。深入瞭解顏色配置
電腦版多媒體檔案寬度設定桌上型電腦商品頁面中您的商品多媒體檔案寬長。選擇「」、「」或「」。
將多媒體檔案限制為螢幕高度選取此選項以根據任意裝置的瀏覽器視窗高度,設定多媒體檔案高度上限。
多媒體檔案最適大小選取「原始」以維持多媒體檔案的原始寬高比,或選取「填滿」以將多媒體檔案填滿其容器。
電腦版版面配置 設定桌上型電腦中您的商品多媒體檔案版面配置。從以下選項中進行選擇:
  • 堆疊:將您的商品多媒體檔案垂直堆疊在頁面上一起呈現。當您按一下堆疊的多媒體類型,將開啟一個彈出式對話,顯示較大幅您所選取的媒體檔案。
  • 2 欄:將您的商品多媒體檔案堆疊但在兩欄中一起呈現。
  • 縮圖:如果商品有超過一張圖片或其他多媒體類型,剩餘的多媒體則會以縮圖顯示於產品主要的多媒體下方。顧客可以按下任何縮圖來將縮圖顯示為主要商品多媒體檔案。
  • 縮圖輪播:如果商品有超過一張圖片或其他多媒體類型,剩餘的多媒體則會以縮圖顯示於商品主要多媒體下方的輪播中。顧客可以按下任何縮圖來將縮圖顯示為主要商品多媒體檔案,或使用導覽箭頭顯示其他多媒體檔案。
電腦版多媒體檔案位置選取要在桌上型電腦上將商品的多媒體檔案置於頁面左側或右側。
圖片縮放選擇圖片在桌上型電腦上的縮放方式:
  • 打開 lightbox:顧客可以按一下,顯示較大幅的圖片。這是手機裝置上顯示商品多媒體檔案的預設功能。
  • 點按並將游標懸停:顧客可以點按放大圖片,然後將游標懸停以檢視不同部分的放大效果。再次點按放大的圖片或滑鼠游標離開圖片容器時,將停用懸停放大功能。若此設定已啟用且使用者使用的是行動裝置,則點擊圖片會以預設的互動視窗 (燈箱) 開啟。
  • 無縮放:此選項停用圖片縮放效果。適合解析度不高且放大時無法清晰顯示的圖片。
行動版版面配置設定手機裝置上您的商品多媒體檔案版面配置。從以下選項中進行選擇:
  • 2 欄:並排顯示兩個商品多媒體檔案,具有輪播功能,可滑動和檢視其他商品多媒體檔案。
  • 顯示縮圖:顯示單個主商品多媒體檔案,滑動至下方有縮圖輪播功能。
  • 隱藏縮圖:顯示單個主商品多媒體檔案,滑動至下方有輪播功能,但不會顯示縮圖。
在選取一個子類後,隱藏其他子類的多媒體檔案選擇某個子類後,其他子類的圖片將在畫面中隱藏。取消選擇子類時,圖片會重新顯示。
啟用影片循環播放功能對於商品多媒體檔案中的任何影片,此設定會循環播放影片,即影片會在播放完成後自動重放。
頂端邊框間距設定頂部空間數。
底部邊框間距設定底部空間數。

以及商品資訊區段設定,您亦可以檢視和自訂商品識別證的一些佈景主題設定。您還可以新增您自己的區段特定的自訂 CSS

「產品資訊」區塊

您可以在商品資訊區段中使用以下區塊:

文字區塊

您可以使用動態來源文字區塊中顯示靜態文字或變數資料。舉例來說,您可以新增顯示行銷訊息的文字,例如「100 美元以上訂單免運費」,相同文字將會顯示在每項商品中。您也可以新增商品廠商欄位等動態來源,該欄位會依據正在查看的商品而變更。

商品資訊區段的文字區塊設定
設定說明
文字在商品頁面新增額外資訊的文字欄。
文字樣式 變更文字樣式。從以下選項中進行選擇:
  • 內文 - 將文字變更為段落樣式文字。
  • 副標題 - 將文字變更為副標題文字,該文字大小會稍微大於段落樣式文字。
  • 大寫:將文字變更為小於段落樣式文字,並以大寫顯示所有字元。

「標題」區塊

標題區塊會顯示目前瀏覽的商品標題,無可自訂的設定選項。

「價格」區塊

價格區塊會顯示目前瀏覽的商品的定價資訊,例如價格和比較售價,無可自訂的設定選項。

「子類選擇器」區塊

子類選擇器區塊會顯示目前瀏覽的商品的所有子類選項。系統只會針對具有子類選項的商品顯示子類選擇器。如果您擁有具子類選項的商品,但將此區塊移除,顧客便無法選擇或購買他們想要的子類選項。

商品資訊區段的子類選擇器區塊設定
設定說明
樣式 選擇向顧客顯示商品子類選項的方式。從以下選項中進行選擇:
  • 下拉式選單:在下拉式選單中顯示子類選項。只能顯示為色樣或文字。只能顯示為色樣或文字。
  • 圓角:將子類選項顯示為可選取的按鈕。只能顯示為色樣或文字。
色樣 選擇要向顧客顯示色樣的方式。從以下選項中進行選擇:
  • 圓形:將色樣顯示為您可以選取的圓形。
  • 正方形:將色樣顯示為您可以選取的正方形。
  • :不顯示色樣。

「數量選擇器」區塊

數量選擇器區塊會顯示可點擊和編輯的數字欄位,供顧客更改他們希望購買的商品數。無可自訂的設定選項。

「購買按鈕」區塊

購買按鈕區塊會顯示「加入購物車」按鈕和任何到店取貨資訊。它還可以顯示您商店所有的任何動態結帳按鈕

商品資訊區段的購買按鈕區塊設定
設定說明
顯示動態結帳按鈕顯示您在付款」設定中啟用的任何動態結帳選項。
顯示禮品卡的收件人資訊表單在您所有的任何禮品卡商品上顯示可選用的核取方塊,讓顧客能夠安排將禮品卡與個人化訊息傳送給收件人

「說明」區塊

描述區塊會顯示正在檢視的商品描述,無可自訂的設定選項。

「分享」區塊

分享區塊會顯示可點擊的連結,讓顧客將此商品分享至他們的社群媒體。

商品資訊區段的分享區塊相關設定
設定說明
文字顧客點擊文字,即可將此商品分享至他們的社群媒體。

SKU 區塊

SKU 區塊會顯示與商品或子類相關聯的存貨單位 (SKU)。深入瞭解如何將存貨單位 (SKU) 數量新增至商品子類選項

商品資訊區段的存貨單位 (SKU) 區塊設定
設定說明
文字樣式 變更文字樣式。從以下選項中進行選擇:
  • 內文 - 將文字變更為段落樣式文字。
  • 副標題 - 將文字變更為副標題文字,該文字大小會稍微大於段落樣式文字。
  • 大寫:將文字變更為小於段落樣式文字,並以大寫顯示所有字元。

庫存狀態區塊

庫存狀態區塊顯示商品的庫存狀態。您可以永久顯示庫存狀態和剩餘庫存數量,或在商品庫存數量達到您設定的門檻後才顯示剩餘庫存數量。系統只會針對已啟用庫存追蹤的商品顯示庫存狀態。

商品資訊區段中庫存狀態區塊的設定
設定說明
文字樣式 變更文字樣式。從以下選項中進行選擇:
  • 內文 - 將文字變更為段落樣式文字。
  • 副標題 - 將文字變更為副標題文字,該文字大小會稍微大於段落樣式文字。
  • 大寫:將文字變更為小於段落樣式文字,並以大寫顯示所有字元。
庫存過低門檻使用範圍滑桿設定您的商品顯示庫存稀少訊息時的門檻。選擇介於 0 到 100 之間的數字。如果您將滑桿設為 0,在商品完全無庫存前,會顯示可供貨狀態。
顯示庫存數量若要顯示商品的現有庫存數量,則選取此選項。

「自訂 Liquid」區塊

自訂 Liquid 區塊會顯示您新增至區塊的自訂 Liquid 或 HTML 程式碼

商品資訊區段的自訂 Liquid 區塊設定
設定說明
Liquid 程式碼顯示您輸入 Liquid 或 HTML 程式碼 所呈現的內容。

可摺疊橫列的區塊

可收合橫列區塊會顯示包含標題的可展開和收合的分頁。顧客點擊圖示、標題或向下箭頭時,該橫列會展開以顯示其他內容。

商品資訊區段中的可收合橫列區塊設定
設定說明
標題橫列標題,在橫列收合和展開時顯示。
圖示選取要與可收合橫列一起顯示的圖示,或選擇以僅顯示橫列的標題。
橫列內容使用 RTF 文字編輯器輸入您橫列的內容。內容僅在展開橫列時顯示。
橫列內容頁面頁面中的內容新增到您的橫列中。這僅會顯示您在 Shopify 管理介面網路商店 > 頁面區塊新增至頁面的內容,它不顯示您在佈景主題編輯器新增至頁面範本中的任何內容。在橫列內容欄位中輸入的任何內容都會顯示在您新增的頁面內容之上。

「彈出式視窗」區塊

彈出式視窗區塊顯示可點擊的文字,按一下時可打開一個彈出式視窗。

商品資訊區段的彈出式視窗區塊相關設定
設定說明
連結標籤顧客點擊可點擊的文字,即會顯示彈出式對話。
頁面選取要在彈出式對話中顯示內容的頁面。這僅會顯示您在 Shopify 管理介面網路商店 > 頁面區塊新增至頁面的內容,它不顯示您在佈景主題編輯器新增至頁面範本中的任何內容。

「產品評等」區塊

商品評價區塊會顯示產品的平均星級評等,並在括號中顯示評論數,例如:★★★★★ (8)。

若要顯示商品評價,您需要使用商品評價應用程式,以及 reviews.rating_countreviews.rating中繼欄位定義

此區塊未提供可自訂的設定選項。

配套商品區塊

配套商品區塊顯示您使用 Shopify Search and Discovery 應用程式設定的配套商品。

商品資訊區段的配套商品區塊設定
設定說明
標題 區塊的標題。
顯示為可收合的橫列 選取後,內容會橫列內以收合方式顯示。顧客點擊標題時,該橫列會展開以顯示其他內容。
圖示 配套商品顯示在可收合橫列內時,選取一個圖示以搭配標題。
產品數量顯示上限 選取要顯示的配套商品數量上限。選擇介於 1 到 10 之間的數字。
每頁商品數 選取每個滑桿頁面要顯示配套商品的數量。選擇介於 1 到 4 之間的數字。
分頁樣式 顯示在商品下方的滑桿導覽樣式。選擇計數數字
圖片比例 設定商品卡圖片的寬高比。選擇縱向正方形
啟用「快速新增」按鈕 如果您啟用了「快速新增」按鈕,您的顧客可以用下列任一選項從商品卡將品項新增至購物車:
  • 新增至購物車:適用於單品項商品。顧客點擊按鈕後,該商品即會自動新增至購物車。
  • 選擇子類:適用於帶子類的商品。當顧客點擊按鈕時,顯示彈出式對話,供客戶選擇子類,然後繼續購買。

附文字圖示區塊

圖示和文字區塊可顯示最多 3 個圖示,以及附上的文字。從預先安裝的圖示清單選擇,或使用您上傳的圖片。

商品資訊區段的附文字圖示區塊設定
設定說明
版面配置為該區段選擇水平垂直版面配置。
第一個圖示選取要在區段顯示的圖示,或選擇以僅顯示標題。
第一張圖片選擇使用您自己的圖片,而非圖示。
第一個標題為第一個圖示或圖片新增標題。
第二個圖示選取要在區段顯示的圖示,或選擇以僅顯示標題。
第二張圖片選擇使用您自己的圖片,而非圖示。
第二個標題為第二個圖示或圖片添加標題。
第三個圖示選取要在區段顯示的圖示,或選擇以僅顯示標題。
第三張圖片選擇使用您自己的圖片,而非圖示。
第三個標題為第三個圖示或圖片新增標題。

「相關商品」區段

根據目前瀏覽的商品,相關商品區段會顯示類似商品、具有相似說明的商品,或經常與目前瀏覽的商品一起購買的商品。您可以使用 Shopify Search & Discovery 應用程式手動將您自己的商品新增到相關商品區段。

若要深入瞭解產品推薦,請參閱瞭解產品推薦

「相關商品」區段設定

相關商品區段的設定
設定說明
標題此區段的標題。
標題大小標題文字的大小。選擇小型中型大型超大型超超大型文字大小。
產品數量顯示上限設定要顯示的相關商品數量上限。選擇介於 2 到 10 之間的數字。
電腦版的欄數設定桌上型電腦所顯示的商品欄數。選擇介於 1 到 6 之間的數字。
顏色配置您可套用至此區段的一組顏色。深入瞭解顏色配置
圖片比例設定顯示的相關商品主要圖片的圖片比例。從以下選項中進行選擇:
  • 依圖片調整 - 使用圖片本身的寬高比,可避免圖片遭到裁切。
  • 縱向 - 使用 2:3 的比例裁剪圖片。
  • 正方形 - 使用 1:1 的比例裁剪圖片。
圖片形狀為您相關的商品圖片選擇下列其中一種圖片形狀:
  • 預設:將商品圖片變更為長方形。
  • 拱形:使商品圖片頂端呈現弧形。
  • 斑點:將商品圖片顯示為六個隨機斑點形狀的其中一個形狀,停留時會顯示獨特的動畫。
  • > 形箭頭向左:將商品圖片變更為向左的 > 形箭頭。
  • > 形箭頭向右:將商品圖片變更為向右的 > 形箭頭。
  • 菱形:將商品圖片變更為菱形四邊形。
  • 平行四邊形:將商品圖片變更為由兩組平行線組成的形狀。
  • 圓形:將商品圖片顯示為圓形或橢圓形,停留時會顯示獨特的動畫。
游標暫留時顯示次要圖片當顧客在桌上型電腦上將游標停留在商品圖片上時,顯示商品的次要圖片(若有的話)。
顯示廠商顯示每項產品的廠商。
顯示產品評等顯示商品的平均星級評等,並在括號中顯示評論數,例如:★★★★★ (8)。同時也需要商品評價應用程式,以及下列項目的中繼欄位定義reviews.rating_countreviews.rating
行動版的欄數設定手機裝置所顯示的商品欄數。選擇 1 或 2 欄。
頂端邊框間距設定頂部空間數。
底部邊框間距設定底部空間數。
沒有找到您需要的答案嗎?我們很樂意為您提供協助。