Dawn 的可用頁面類型

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

產品頁面

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

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

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

您也可以新增下列區塊:

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

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

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

產品資訊區段的相關設定
設定 說明
在大螢幕上啟用固定式產品資訊 向下捲動頁面時,在捲動過所有圖片後才會開始捲動產品資訊欄。
選取子類後,隱藏其他子類的多媒體檔案 選擇某個子類後,其他子類的圖片將在畫面中隱藏。取消選擇子類時,圖片會重新顯示。
啟用影片循環播放功能 將影片設為循環播放,讓影片在播放完畢後自動重新播放。

「產品資訊」區塊

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

文字區塊

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

產品資訊區段的文字區塊設定
設定 說明
文字 將資訊新增至產品頁面。支援文字或動態來源。
文字樣式

變更文字樣式:

  • 內文 - 將文字變更為段落樣式文字。
  • 副標題 - 將文字變更為副標題文字,該文字大小會稍微大於段落樣式文字。
  • 大寫 - 將文字變更為小於段落樣式文字,並以大寫顯示所有字元。

「標題」區塊

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

「價格」區塊

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

「子類選擇器」區塊

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

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

變更向顧客顯示子類的方式:

  • 按鈕:將子類顯示為可點擊的按鈕。
  • 下拉式選單 - 在可展開的下拉式選單中顯示子類。

「購買按鈕」區塊

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

產品資訊區段的購買按鈕區塊設定
設定 說明
顯示動態結帳按鈕 顯示您在「付款」設定中啟用的任何動態結帳選項。

「說明」區塊

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

「產品評等」區塊

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

您必須使用 Product Reviews 應用程式 (如 Shopify 產品評論) 以及 reviews.rating_countreviews.rating中繼欄位定義,才能夠顯示產品評等。

「分享」區塊

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

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

「數量選擇器」區塊

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

「自訂 Liquid」區塊

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

產品資訊區段的自訂 Liquid 區塊設定
設定 說明
自訂 Liquid 顯示您可以輸入為 Liquid 或 HTML 程式碼的內容。

「可收合分頁」區塊

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

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

「彈出式視窗」區塊

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

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

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

根據目前流覽的產品,此區段會顯示類似的產品,或經常與該產品一起購買的產品。

產品推薦區段的相關設定
設定 說明
標題 此區段的標題
圖片比例 推薦產品圖片的圖片比例:
  • 依圖片調整:使用圖片本身的寬高比,可避免圖片遭到裁剪。
  • 縱向 - 使用 2:3 的比例裁剪圖片。
  • 正方形 - 使用 1:1 的比例裁剪圖片。
游標暫留時顯示次要圖片 當顧客將游標停留在圖片上時,顯示產品的次要圖片 (若有的話)。
新增圖片邊框間距 在產品圖片周圍新增額外的空間。
顯示圖片邊框 在圖片周圍顯示邊框。
顯示廠商 顯示每項產品的廠商。
顯示產品評等 顯示產品平均星期評等,並在括號中顯示評論數,例如:★★★★★ (8)。同時也需要產品評論應用程式 (如 Shopify 產品評論) 以及 reviews.rating_countreviews.rating中繼欄位定義

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

商品系列頁面

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

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

商品系列橫幅區段的相關設定
設定 說明
顯示商品系列說明 顯示商品系列的說明內容。
顯示商品系列圖片 顯示商品系列圖片。

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

產品網格區段的相關設定
設定 說明
每頁產品數 這代表您希望每個頁面上顯示的產品數量。此數量可以是 4 的任何倍數 (介於 8 至 24 之間),預設值為 16。
圖片比例 產品圖片的圖片比例:
  • 依圖片調整 (預設) - 使用圖片本身的寬高比,可避免圖片遭到裁剪。
  • 縱向 - 使用 2:3 的比例裁剪圖片。
  • 正方形 - 使用 1:1 的比例裁剪圖片。
游標暫留時顯示次要圖片 當顧客將游標停留在產品圖片上時,顯示產品的次要圖片 (若有的話)。
新增圖片邊框間距 在產品圖片周圍新增額外的空間。
顯示圖片邊框 在圖片周圍顯示邊框。
顯示廠商 顯示每項產品的廠商。
顯示產品評等 顯示產品平均星期評等,並在括號中顯示評論數,例如:★★★★★ (8)。同時也需要產品評論應用程式 (如 Shopify 產品評論) 以及 reviews.rating_countreviews.rating中繼欄位定義
啟用篩選功能 此功能可供顧客按照導覽設定中的篩選條件來篩選商品系列中的產品。
啟用排序功能

此功能可供顧客按照下列條件排序商品系列中的產品:

  • 精選 - 暢銷產品 (依包含該產品的所有訂單數量而定)。若您尚未售出任何產品,則此選項將從最新到最舊排序您的產品。
  • 暢銷商品 - 按照每項產品的訂購次數由多到少排序來顯示產品。
  • 依字母順序排列,由 A 到 Z - 依字母順序顯示產品
  • 依字母順序 (Z 到 A) - 依字母相反順序顯示產品。
  • 價格 (從低到高) - 從最低價格到最高價格顯示產品。
  • 價格 (從高到低) - 從最高價格到最低價格顯示產品。
  • 日期 (從舊到新) - 按照產品新增至商店的時間從最舊到最新顯示產品。
  • 日期,由新到舊 - 按照產品新增至商店的時間從最新到最舊顯示產品。
在較大的螢幕上收合 顧客必須點擊「篩選與排序」標題,才能顯示任何篩選條件或排序選項。您必須開啟「啟用篩選」功能或「啟用排序」功能,系統才會顯示「篩選與排序」標題。

商品系列清單頁面

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

商品系列清單頁面的相關設定
設定 說明
標題 頁面標題。
以下列方式排序商品系列

決定商品系列的顯示順序:

  • 依字母順序 (A 到 Z) - 依字母順序顯示商品系列。
  • 依字母順序排列,由 Z 到 A - 依字母相反順序顯示商品系列。
  • 日期 (從新到舊) - 依商品系列在商店建立的時間從最新到最舊顯示商品系列。
  • 日期,由舊到新 - 按照產品系列在商店建立的時間從最舊到最新顯示商品系列。
  • 產品數量 (從高到低) - 按照商品系列所包含的產品數量從最高到最低顯示商品系列。
  • 產品數量,由低到高 - 依商品系列所包含的產品數量從最低到最高顯示商品系列
圖片比例 商品系列圖片的圖片比例:
  • 依圖片調整 (預設) - 使用圖片本身的寬高比,可避免圖片遭到裁剪。
  • 縱向 - 使用 2:3 的比例裁剪圖片。
  • 正方形 - 使用 1:1 的比例裁剪圖片。
顏色配置 商品系列標題區段和圖片邊框間距的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
新增圖片邊框間距 在商品系列圖片周圍新增額外的空間。

頁面

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

部落格頁面

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

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

網誌文章區段會在網誌中顯示最新的網誌文章。每篇網誌文章會顯示任何網誌圖片、網誌標題,以及網誌文章的摘錄或前幾個字。

網誌文章區段的相關設定
設定 說明
顯示主要圖片 顯示網誌的主要圖片。
顯示日期 顯示每篇網誌文章的發佈日期。
顯示作者 顯示每篇網誌文章的作者。

網誌文章頁面

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

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

「主要圖片」區塊

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

決定網誌文章的主要圖片高度:

  • 依圖片調整 - 保留圖片的原始寬高比。
  • 中型 - 545 像素
  • 大型 - 660 像素

「標題」區塊

網誌文章頁面上標題區塊相關設定
設定 說明
顯示日期 顯示網誌文章的發佈日期。
顯示作者 顯示網誌文章的作者。

「分享」區塊

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

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

內容區塊

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

購物車頁面

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

「品項」區段的相關設定

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

購物車頁面的品項區段相關設定
設定 說明
顯示廠商 顯示購物車中每項產品的廠商。

「小計」區段的相關設定

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

購物車頁面上小計區段的相關設定
設定 說明
啟用購物車備註 顯示購物車備註欄位,顧客可以在此輸入其他資訊。

密碼頁面

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

「密碼頁首」區段

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

「電子郵件註冊」區段

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

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

標題區塊

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

子標題區塊

密碼頁面上密碼頁首區段中標題區塊的相關設定
設定 說明
說明 區段的文字內容。

「電子郵件表單」區塊

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

「密碼頁尾」區段

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

404 頁面

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

搜尋頁面

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

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

搜尋結果區段的相關設定
設定 說明
圖片比例 推薦產品圖片的圖片比例:
  • 依圖片調整 (預設) - 使用圖片本身的寬高比,可避免圖片遭到裁剪。
  • 縱向 - 使用 2:3 的比例裁剪圖片。
  • 正方形 - 使用 1:1 的比例裁剪圖片。
游標暫留時顯示次要圖片 當顧客將游標停留在產品圖片上時,顯示產品的次要圖片 (若有的話)。
新增圖片邊框間距 在產品圖片周圍新增額外的空間。
顯示圖片邊框 在圖片周圍顯示邊框。
顯示廠商 顯示每項產品的廠商。
顯示產品評等 顯示產品平均星期評等,並在括號中顯示評論數,例如:★★★★★ (8)。同時也需要產品評論應用程式 (如 Shopify 產品評論) 以及 reviews.rating_countreviews.rating中繼欄位定義
顯示日期 顯示每篇網誌文章的發佈日期。
顯示作者 顯示每篇網誌文章的作者。

準備好開始透過 Shopify 銷售商品了嗎?

免費試用