頁面類型

每個頁面都有各自的預設區段和設定。

產品頁面

根據預設，產品頁面有產品資訊區段和產品推薦區段。

產品資訊區段包含下列預設區塊：

• 文字 (預設顯示 vendor 屬性)
• 標題
• 文字 (預設顯示 product subtitle 屬性)
• 價格
• 子類選擇器
• 數量選擇器
• 購買按鈕
• 說明
• 分享

您也可以新增下列區塊：

• 文字
• 自訂 Liquid
• 產品評等
• 可收合分頁
• 彈出式視窗
• 配套商品

產品資訊區段最多可包含 16 個區塊：

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

產品資訊區段的相關設定

設定	說明
在桌面版啟用黏性內容	向下捲動頁面時，在捲動過所有圖片後才會開始捲動產品資訊欄。
桌面版多媒體檔案位置	選取要將商品多媒體檔案置於左側或右側。此設定僅適用於使用桌上型電腦存取頁面的使用者，行動裝置會自動調整為最佳的多媒體檔案位置。
桌面版版面配置	產品多媒體檔案在桌面版的顯示方式。 縮圖輪播：如果商品有一種以上的多媒體類型，剩餘的多媒體則會以縮圖顯示於商品主要多媒體下方的輪播中。顧客可以點擊任一縮圖來載入，或使用輪播導覽箭頭查看其他多媒體。 縮圖：如果產品有一種以上的多媒體類型，剩餘的多媒體則會以縮圖顯示於產品主要的多媒體下方。顧客可以按一下任一縮圖來載入 堆疊：將所有的產品多媒體檔案堆疊在一起呈現。按一下堆疊的多媒體，即會開啟一個彈出式視窗，顯示較大幅的媒體檔案。
桌面版多媒體檔案大小	選擇小、中或大型多媒體檔案。多媒體檔案會自動進行最佳化，以符合行動裝置。
行動版版面配置	選擇在行動版上隱藏或顯示縮圖圖片。
選取子類後，隱藏其他子類的多媒體檔案	選擇某個子類後，其他子類的圖片將在畫面中隱藏。取消選擇子類時，圖片會重新顯示。
啟用影片循環播放功能	將影片設為循環播放，讓影片在播放完畢後自動重新播放。
區段邊框間距	在產品資訊區段上方或下方新增間距。使用範圍滑杆在產品資訊上方或下方增加 0 像素到 100 像素的空間。

「產品資訊」區塊

您可以將下列區塊新增至產品資訊區段。

文字區塊

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

產品資訊區段的文字區塊設定

設定	說明
文字	將資訊新增至產品頁面。支援文字或動態來源。
文字樣式	變更文字樣式： 內文 - 將文字變更為段落樣式文字。 副標題 - 將文字變更為副標題文字，該文字大小會稍微大於段落樣式文字。 大寫 - 將文字變更為小於段落樣式文字，並以大寫顯示所有字元。

「標題」區塊

此區塊會顯示產品標題，且無可調整的設定選項。

「價格」區塊

此區塊會顯示產品的定價資訊 (例如價格和比較售價)，且無可調整的設定選項。

「子類選擇器」區塊

此區塊會顯示產品的所有子類選項。

產品資訊區段的子類選擇器區塊設定

設定	說明
類型	變更向顧客顯示子類的方式： 子類藥丸：將子類顯示為可點擊的按鈕。 下拉式選單 - 在可展開的下拉式選單中顯示子類。

「購買按鈕」區塊

此區塊會顯示「加入購物車」按鈕和任何來店取貨資訊。也可以顯示任何動態結帳按鈕。

產品資訊區段的購買按鈕區塊設定

設定	說明
顯示動態結帳按鈕	顯示您在「付款」設定中啟用的任何動態結帳選項。

「說明」區塊

此區塊會顯示產品說明，且無可調整的設定。

「產品評等」區塊

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

需要產品評論應用程式 (如 Shopify Product Reviews)，以及 reviews.rating_count 和 reviews.rating 的中繼欄位定義，才能夠顯示產品評等。

配套商品區塊

此區塊顯示配套商品，其需使用 Shopify Search and Discovery 應用程式進行設定。

備註

配套商品需為「In stock」並設為「Active」，否則 Shopify Search and Discovery 應用程式篩選時會將其排除在外。

產品資訊區段的配套商品區塊設定

設定	說明
標題	區塊的標題。
顯示為可收合的橫列	選取後，內容會橫列分頁下以收合方式顯示。顧客點擊標題時，該分頁會展開以顯示其他內容。
圖示	配套商品顯示為可收合橫列時，選取一個圖示以搭配標題。
產品數量顯示上限	選取要顯示的配套商品數量上限；最少選擇 1 個，最多 10 個。
每頁商品數	每個滑杆頁面要顯示互補產品的數量。 選取介於 1 到 4 之間的值。
分頁樣式	顯示在圖片下方的投影播放器導覽樣式。 圓點 計數器 (預設) 數字
圖片比例	決定產品卡圖片的寬高比。 直向 正方形 (預設)
顯示「快速新增」按鈕	「快速新增」按鈕能讓顧客從產品卡將品項新增至購物車。如果產品具有子類，則按鈕會在彈出式視窗顯示「選擇選項」以及相關產品詳細資訊。顧客可以選擇要加入購物車的子類、使用「立刻購買」選項馬上結帳，或點擊以查看完整的商品細節。必須單獨在產品頁面設定「立刻購買」選項，以顯示在快速新增選項中。即使尚未設定「立刻購買」選項，顧客仍可將商品加入購物車。

「分享」區塊

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

產品資訊區段的分享區塊相關設定

設定	說明
文字	顧客點擊可點擊的文字，即可將此產品分享至他們的社群媒體。

「數量選擇器」區塊

此區塊顯示數量選擇器，讓顧客可變更要購買的產品單位數量。其沒有可調整的設定。預設數量為 1。

「自訂 Liquid」區塊

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

產品資訊區段的自訂 Liquid 區塊設定

設定	說明
自訂 Liquid	顯示您可以輸入為 Liquid 或 HTML 程式碼的內容。

「可收合分頁」區塊

此區塊會顯示包含標題的可收合分頁。顧客點擊標題時，該分頁會展開以顯示其他內容。

產品資訊區段中的可收合分頁區塊設定

設定	說明
標題	分頁標題，在收合和展開時顯示。
分頁內容	分頁的內容。僅在展開分頁時顯示。
頁面的分頁內容	在分頁中顯示頁面內容。僅顯示頁面編輯器中的頁面內容，此區塊不會顯示頁面範本中的 Liquid 樣式。凡是在分頁內容中輸入的所有內容，都會顯示在頁面內容上方。

「彈出式視窗」區塊

此區塊會顯示可點擊的文字，點擊後會開啟彈出式視窗。此彈出式視窗會顯示其中一個頁面的內容。

產品資訊區段的彈出式視窗區塊相關設定

設定	說明
連結標籤	顧客點擊可點擊的文字，即會顯示彈出式視窗。
頁面	您想要在彈出式視窗中顯示內容的頁面。僅顯示頁面編輯器中的頁面內容。彈出式視窗不會顯示頁面範本中的任何 Liquid 樣式。

「產品推薦」區段的相關設定

根據目前瀏覽的商品，此區段會顯示類似商品、具有相似說明的商品，或經常與該商品一起購買的商品。

產品推薦區段的相關設定

設定	說明
標題	區段的標題。您可以使用動態來源作為區段標題。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。
產品數量顯示上限	使用範圍滑杆選取要顯示的建議產品數量上限。最小值：2，最大值：10。
桌面版的欄數	桌上型電腦所顯示的欄數。最小值為 1，最大值為 4。
顏色配置	「產品推薦」區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
圖片比例	推薦產品圖片的圖片比例： 依圖片調整：使用圖片本身的寬高比，可避免圖片遭到裁剪。 縱向 - 使用 2:3 的比例裁剪圖片。 正方形 - 使用 1:1 的比例裁剪圖片。
游標暫留時顯示次要圖片	當顧客將游標停留在圖片上時，顯示產品的次要圖片 (若有的話)。
顯示廠商	顯示每項產品的廠商。
顯示產品評等	顯示產品的平均星級評等，並在括號中顯示評論數，例如：★★★★★ (8)。同時也需要產品評論應用程式 (如 Shopify Product Reviews)，以及 reviews.rating_count 和 reviews.rating 的中繼欄位定義。
行動版的欄數	設定行動裝置特定欄位的版面配置。請在 1 欄和 2 欄之間擇一。
區段邊框間距	在區段的上方或下方加入間距。使用範圍滑桿，在區段的上方或下方加入 0 像素到 100 像素的空間。

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

商品系列頁面

根據預設，商品系列頁面具有商品系列橫幅和產品網格區段。

「商品系列橫幅」區段的相關設定

商品系列橫幅區段的相關設定

設定	說明
顯示商品系列說明	顯示商品系列的說明內容。
顯示商品系列圖片	顯示商品系列圖片。
顏色配置	多欄區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。

「產品網格」區段的相關設定

產品網格區段的相關設定

設定	說明
每頁產品數	這代表您希望每個頁面上顯示的產品數量。此數量可以是 4 的任何倍數 (介於 8 至 24 之間)，預設值為 16。
桌面版的欄數	使用範圍刻度來選取桌上型電腦所顯示的欄位數量 (最小值為 2，最大值為 5)。
圖片比例	產品圖片的圖片比例： 依圖片調整 (預設) - 使用圖片本身的寬高比，可避免圖片遭到裁剪。 縱向 - 使用 2:3 的比例裁剪圖片。 正方形 - 使用 1:1 的比例裁剪圖片。
游標暫留時顯示次要圖片	當顧客將游標停留在產品圖片上時，顯示產品的次要圖片 (若有的話)。
顯示廠商	顯示每項產品的廠商。
顯示產品評等	顯示產品的平均星級評等，並在括號中顯示評論數，例如：★★★★★ (8)。同時也需要產品評論應用程式 (如 Shopify Product Reviews)，以及 reviews.rating_count 和 reviews.rating 的中繼欄位定義。。
啟用「快速新增」按鈕	「快速新增」按鈕能讓顧客從商品卡將品項新增至購物車。若商品具有子類選項，則按鈕會顯示「選擇選項」，並在彈出式視窗中顯示商品詳細資訊。顧客可以從中選取想要的子類選項、新增品項到購物車，並使用「立刻購買」快速結帳，或是點擊檢視品項的完整資訊。請注意，此設定取決於您是否在商品頁面中啟用「立刻購買」按鈕而定。如果您並未在商品範本中啟用「立刻購買」按鈕，顧客仍可新增商品到購物車，但系統不會顯示使用「立刻購買」的快速結帳流程。頁面的桌面版多媒體檔案位置設定會決定媒體在「快速新增」互動視窗中顯示的位置。
啟用篩選功能	此功能可供顧客按照導覽設定中的篩選條件來篩選商品系列中的產品。
桌面版濾鏡版面配置	選擇橫向 (預設)、直向或隱藏式側邊選單版面配置。
啟用排序功能	允許顧客對搜尋結果進行排序。
行動版的欄數	設定行動裝置特定欄位的版面配置。請在 1 欄和 2 欄之間擇一。
區段邊框間距	在產品網格的上方或下方加入間距。使用範圍滑桿，在產品網格的上方或下方加入 0 像素到 100 像素的空間。

商品系列清單頁面

商品系列清單頁面會顯示網路商店銷售管道中可供貨的所有商品系列。

商品系列清單頁面的相關設定

設定	說明
標題	頁面標題。
以下列方式排序商品系列	決定商品系列的顯示順序： 依字母順序 (A 到 Z) - 依字母順序顯示商品系列。 依字母順序排列，由 Z 到 A - 依字母相反順序顯示商品系列。 日期 (從新到舊) - 依商品系列在商店建立的時間從最新到最舊顯示商品系列。 日期，由舊到新 - 按照產品系列在商店建立的時間從最舊到最新顯示商品系列。 產品數量 (從高到低) - 按照商品系列所包含的產品數量從最高到最低顯示商品系列。 產品數量，由低到高 - 依商品系列所包含的產品數量從最低到最高顯示商品系列
圖片比例	商品系列圖片的圖片比例： 依圖片調整 (預設) - 使用圖片本身的寬高比，可避免圖片遭到裁剪。 縱向 - 使用 2:3 的比例裁剪圖片。 正方形 - 使用 1:1 的比例裁剪圖片。
桌面版的欄數	桌上型電腦所顯示的欄數。最小值為 1，最大值為 5。
行動版的欄數	設定行動裝置特定欄位的版面配置。請在 1 欄和 2 欄之間擇一。

頁面

您可以在 Shopify 管理介面中建立自訂頁面，藉此為顧客建立內容 (例如「關於我們」頁面，或關於產品的其他資訊)。在佈景主題編輯器中，這些頁面沒有任何其他設定選項。

部落格頁面

網誌頁面是您可以在 Shopify 管理介面中建立的任何網誌首頁。根據預設，這些頁面包含網誌文章區段。

「網誌文章」區段的相關設定

網誌文章區段會在網誌中顯示最新的網誌文章。每篇網誌文章會顯示任何網誌圖片、網誌標題，以及網誌文章的摘錄或前幾個字。在大型螢幕上，您可以選擇以網格或拼貼格式來顯示網誌文章。

網誌文章區段的相關設定

設定	說明
大型螢幕上的版面配置	以網格或拼貼顯示網誌文章。
顯示主要圖片	顯示網誌文章的主要圖片。
主要圖片高度	使用下拉式選單來選擇預設配合圖片、小型、中型或大型。
顯示日期	顯示每篇網誌文章的發佈日期。
顯示作者	顯示每篇網誌文章的作者。

網誌文章頁面

網誌文章頁面會顯示網誌文章的內容。根據預設，這些文章包含網誌文章區段。網誌文章區段本身並未提供可自訂的設定選項，但包含下列預設區塊：

• 主要圖片
• 標題
• 分享
• 內容

「主要圖片」區塊

網誌文章頁面的主要圖片區塊相關設定

設定	說明
主要圖片高度	決定網誌文章的主要圖片高度： 依圖片調整 (預設) - 保留圖片的原始寬高比。 下方列出了圖片規格。請選擇小型、中型或大型的主要圖片。

主要圖片尺寸

網誌文章頁面的主要圖片區塊尺寸

小型卡片	大型卡片
小型主要圖片高度 桌上型電腦 - 177 像素 平板電腦 - 143 像素 行動裝置 - 不適用	大型主要圖片高度 桌上型電腦 - 275 像素 平板電腦 - 220 像素 行動裝置 - 110 像素
中型主要圖片高度 桌上型電腦 - 307 像素 平板電腦 - 219 像素 行動裝置 - 不適用	中型主要圖片高度 桌上型電腦 - 550 像素 平板電腦 - 440 像素 行動裝置 - 220 像素
大型主要圖片高度 桌上型電腦 - 407 像素 平板電腦 - 275 像素 行動裝置 - 不適用	大型主要圖片高度 桌上型電腦 - 825 像素 平板電腦 - 660 像素 行動裝置 - 330 像素

「標題」區塊

網誌文章頁面上標題區塊相關設定

設定	說明
顯示日期	顯示網誌文章的發佈日期。
顯示作者	顯示網誌文章的作者。

「分享」區塊

此區塊會顯示可點擊的連結，讓顧客將此網誌文章分享至他們的社群媒體。

網誌文章頁面的分享區塊相關設定

設定	說明
文字	顧客點擊可點擊的文字即可將此網誌文章分享至他們的社群媒體

內容區塊

內容區塊會顯示網誌文章的內容，且未提供可自訂的設定選項。

購物車頁面

根據預設，購物車頁面包含品項和小計區段。

「品項」區段的相關設定

品項區段會顯示顧客已加入購物車的產品及其數量。

購物車頁面的品項區段相關設定

設定	說明
顯示廠商	顯示購物車中每項產品的廠商。

「小計」區段的相關設定

小計區段包含小計價格和結帳按鈕區塊，而這兩個區塊皆未提供任何可自訂的設定選項。

購物車頁面上小計區段的相關設定

設定	說明
啟用購物車備註	顯示購物車備註欄位，顧客可以在此輸入其他資訊。

密碼頁面

若網路商店啟用密碼保護功能，當顧客嘗試前往您的網站時，系統會顯示密碼頁面。此頁面有獨立的頁首和頁尾，且含有電子郵件訂閱預設區段。

「密碼頁首」區段

密碼頁面上密碼頁首區段的相關設定

設定	說明
標誌圖片	您想要顯示的標誌。
自訂標誌寬度	標誌的寬度，可以是 10 的任何倍數 (介於 50 像素至 250 像素之間)，預設值為 100 像素。
背景配置	密碼頁首區段的背景和圖片邊框間距可從色調 1、色調 2、背景 1、背景 2 或倒轉中挑選。

「電子郵件註冊」區段

此區段旨在為顧客提供訂閱行銷電子郵件的方法，方便他們深入瞭解您的商家 (例如開始營業的時間)。

密碼頁面上的電子郵件訂閱區段設定

設定	說明
顏色配置	電子郵件訂閱區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
讓區段以全寬度呈現	將區段延伸為瀏覽器視窗的寬度。

標題區塊

密碼頁面上密碼頁首區段中標題區塊的相關設定

設定	說明
標題	此區段的標題。

子標題區塊

密碼頁面上密碼頁首區段中標題區塊的相關設定

設定	說明
說明	區段的文字內容。

「電子郵件表單」區塊

此區塊會顯示電子郵件表單欄位，供顧客輸入其電子郵件地址，此區塊未提供可自訂的設定選項。

「密碼頁尾」區段

密碼頁面的頁尾區段相關設定

設定	說明
顏色配置	密碼頁尾區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。

404 頁面

若顧客嘗試前往您不存在的網站連結 (例如已從商店刪除的產品頁面) 時，系統會顯示 404 頁面。此頁面沒有可自訂的設定。

搜尋頁面

「搜尋頁面」是顧客可以搜尋您網路商店中特定產品或頁面的位置。頁面預設含有搜尋結果區段。

「搜尋結果」區段的相關設定

搜尋結果區段的相關設定

設定	說明
桌面版的欄數	桌上型電腦所顯示的欄數。最小值為 1，最大值為 5。
圖片比例	推薦產品圖片的圖片比例： 依圖片調整 (預設) - 使用圖片本身的寬高比，可避免圖片遭到裁剪。 縱向 - 使用 2:3 的比例裁剪圖片。 正方形 - 使用 1:1 的比例裁剪圖片。
游標暫留時顯示次要圖片	當顧客將游標停留在產品圖片上時，顯示產品的次要圖片 (若有的話)。
顯示廠商	顯示每項產品的廠商。
顯示產品評等	顯示產品的平均星級評等，並在括號中顯示評論數，例如：★★★★★ (8)。同時也需要產品評論應用程式 (如 Shopify Product Reviews)，以及 reviews.rating_count 和 reviews.rating 的中繼欄位定義。。
啟用篩選功能	點擊可啟用搜尋結果的篩選條件。
桌面版濾鏡版面配置	選擇橫向 (預設)、直向或隱藏式側邊選單版面配置。
啟用排序功能	點擊可啟用搜尋結果的排序方式。
顯示日期	顯示每篇網誌文章的發佈日期。
顯示作者	顯示每篇網誌文章的作者。
行動版的欄數	設定行動裝置特定欄位的版面配置。請在 1 欄和 2 欄之間擇一。
區段邊框間距	在搜尋結果的上方或下方加入間距。使用範圍滑桿，在搜尋結果的上方或下方加入 0 像素到 100 像素的空間。