Dawn 的可用區段

在 Dawn 中,您可以在任何頁面上新增區段。每個頁面都會顯示幾個預設區段,例如公告列、頁首和頁尾。

公告列

公告列可讓您在任何頁面上向顧客傳達重要資訊。此區段本身沒有設定,但您可以自訂最多 12 個要顯示的公告區塊。您可以新增公告列的連結供顧客點擊,藉此將顧客帶往特定頁面。

「公告」區塊

公告列區段的公告區塊設定
設定 說明
文字 您想要向顧客顯示的公告。
顏色配置 公告欄使用的顏色配置。
連結 您希望顧客點擊公告列時前往的連結。

標頭

顯示於佈景主題中所有頁面的頁首。

區段設定

標題區段的相關設定
設定 說明
標誌圖片 您商店的標誌。
自訂標誌寬度 標誌寬度可以是任何 10 的倍數,介於 50 px 至 250 px 之間。預設為 100 px。
標誌在大型螢幕上的位置

顧客在大螢幕上 (例如桌上型電腦) 瀏覽您的網站時,頁首就會顯示標誌。

  • 中央左側 - 畫面顯示的標誌內嵌於主選單,垂直置中並靠左對齊。
  • 左上角 - 在主選單上方顯示標誌,並將標誌和選單項目靠左對齊。
  • 中央左側 (預設) - 在主選單上方顯示標誌,並將標誌和選單項目置中對齊。
選單 主選單所使用的選單。
顯示不同行 顯示一行,以視覺方式區分頁首和頁面的內容。
啟用固定式頁首 在顧客向上捲動時,畫面會重新顯示頁首;而在顧客向下捲動時,頁首就會從畫面上消失。

頁尾

頁尾會顯示在佈景主題的所有頁面上。

區段設定

頁尾區段的相關設定
設定 說明
顏色配置 頁尾背景可從色調 1、色調 2、Background 1、Background 2 或倒轉中挑選。
顯示電子郵件訂閱 加入電子郵件訂閱表單,供顧客訂閱您的電子報和行銷資料。
標題 顯示電子郵件訂閱表單的標題。如果未啟用顯示電子郵件訂閱功能,則系統不會顯示此功能。
社群媒體圖示 顯示您在佈景主題設定中已輸入個人檔案連結的所有社群媒體平台圖示。
啟用國家/地區選擇器 新增選擇器,讓顧客選擇您在付款設定中啟用的國家/地區,以便顧客以他們所選擇的幣別來查看您的產品價格。
啟用語言選擇器 新增選擇器,讓顧客選擇您在語言設定中啟用的國家/地區,以便顧客以他們所選擇的語言瀏覽您的商店。
顯示付款圖示 顯示商店中所有已啟用的付款方式圖示。

「選單」區塊

頁尾區段的選單區塊相關設定
設定 說明
標題 區塊的標題。
選單 欲在此區塊中顯示的選單。

文字區塊

文字區塊可用來凸顯重要資訊,例如商店詳細資訊、促銷活動或聯絡資訊。

頁尾區段的文字區塊相關設定
設定 說明
標題 區塊的標題。
子文字 希望在此區塊中顯示的文字。

「圖片」區塊

頁尾區段的圖片區塊相關設定
設定 說明
圖片 您想要在此區塊顯示的圖片。
圖片寬度 設定圖片的寬度,可以是 5 的任何倍數 (介於 50 像素至 200 像素之間),預設值為 100 像素。
大螢幕上的圖片對齊方式

在區塊中對齊圖片:

  • 靠左 - 將圖片對齊區塊的左側。
  • 置中 (預設) - 將圖片對齊區塊中央。
  • 靠右 - 將圖片對齊區塊的右側。

部落格文章

如果您的 Shopify 商店有網誌,可以使用網誌文章區段來凸顯該網誌的文章。網誌文章區段的每篇文章都會顯示文章摘錄的前 55 個字。如果網誌文章沒有摘錄,則會顯示文章的前 30 個字。

區段設定

網誌文章區段的相關設定
設定 說明
標題 此區段的標題。
部落格 您想要顯示的網誌文章所屬的網誌來源。預設為網誌頁面上依字母順序排列的第一個網誌。
部落格文章 您想要在此區段顯示的網誌文章數量 (上限為 3 篇)。
顯示主要圖片 顯示網誌文章的主要圖片。建議圖片寬高比:2:3。
顯示日期 顯示網誌文章的建立日期。
顯示作者 顯示網誌文章的作者。
顯示次要背景 根據文字顏色調整背景顏色。
若網誌中仍有未顯示的網誌文章,請啟用「檢視全部」按鈕 如果該網誌的網誌文章多於網誌文章欄位中所設定的數量,系統就會顯示「檢視全部」按鈕,並將顧客導向該網誌的頁面。

選擇網誌

  1. 在佈景主題編輯器中,點擊網誌文章區段的標題。
  2. 在「網誌」區段中,點擊「變更」。
  3. 選取「網誌」。
  4. 點擊「選取」,然後點擊「儲存」。

拼貼

您可以建立影片、圖片、產品和商品系列拼貼。每個拼貼區段包含三個區塊。根據預設,此區段包含影片、產品和商品系列區塊。

若要建立超過三個區塊的拼貼,請於第一個區塊下面新增其他拼貼區段,但不要在下方拼貼區段加入「標題」值。拼貼區段將合併顯示為單一區段。

區段設定

拼貼區段的相關設定
設定 說明
標題 此區段的標題。
桌面版版面配置

區塊在桌面版的顯示方式。

  • 左側大型區塊 (預設) - 畫面左側區段所顯示的第一個區塊,且該區塊大於所有區塊。
  • 右側大型區塊:區段的最後一個區塊顯示在右側,且大於其他區塊。
  • 行動版版面配置

    區塊在行動版的顯示方式。

    • 拼貼 - 以拼貼版面配置顯示圖片:
      • 如果已在「桌面版版面配置」啟用了「左側大型區塊」,則第一個區塊會顯示於頂部,且大於其他區塊。
      • 如果已在「桌面版版面配置」啟用了「右側大型區塊」,則最後一個區塊顯示於底部,且大於任何其他區塊。
    • :在欄中顯示大小相同的圖片。

    「影片」區塊

    拼貼區段影片區塊的相關設定
    設定 說明
    封面圖片 在顧客播放影片前,畫面所顯示的圖片。
    連結 影片的 YouTube 或 Vimeo 連結。影片必須設為公開顯示。
    影片替代文字 影片的替代文字。為使用螢幕助讀程式的顧客說明該影片。
    新增圖片邊框間距 新增必要的額外空間,確保您的圖片不會遭到裁剪。為了避免圖片遭到裁剪,請上傳寬高比 16:9 的封面圖片

    「產品」區塊

    拼貼區段的產品區塊相關設定
    設定 說明
    產品 您想要顯示的產品。
    顯示次要背景 根據文字顏色調整背景顏色。
    游標暫留時顯示次要圖片 當顧客將游標停留在產品圖片上時,顯示產品的次要圖片 (若有的話)。
    新增圖片邊框間距 新增必要的額外空間,確保您的圖片不會遭到裁剪。為了避免圖片遭到裁剪,請上傳寬高比 16:9 的產品圖片。

    「商品系列」區塊

    拼貼區段的商品系列區塊相關設定
    設定 說明
    商品系列 您想要顯示的商品系列。
    新增圖片邊框間距 新增必要的額外空間,確保您的圖片不會遭到裁剪。為了避免圖片遭到裁剪,請上傳寬高比 16:9 的產品圖片。
    顏色配置 「商品系列區塊」區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。

    「圖片」區塊

    拼貼區段的圖片區塊相關設定
    設定 說明
    圖片 欲顯示的圖片。
    新增圖片邊框間距 新增必要的額外空間,確保您的圖片不會遭到裁剪。為了避免圖片遭到裁剪,請上傳寬高比 16:9 的產品圖片。
    顏色配置 圖片區塊的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。

    商品系列清單

    您可以為想要主打的商品系列新增清單。您最多可以新增 16 個商品系列區塊至單一商品系列清單中。

    區段設定

    商品系列清單區段的相關設定
    設定 說明
    標題 此區段的標題
    圖片比例 商品系列主要圖片的圖片比例:
    • 依圖片調整 - 使用圖片本身的寬高比,可避免圖片遭到裁剪。
    • 縱向 - 使用 2:3 的比例裁剪圖片。
    • 正方形 (預設) - 使用 1:1 的比例裁剪圖片。
    顏色配置 商品系列清單區段和圖片邊框間距的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
    啟用行動裝置的滑動功能 將行動版畫面的欄變更為列,這樣顧客便能向側邊滑動以查看更多商品系列區塊。
    新增圖片邊框間距 新增必要的額外空間,確保您的圖片不會遭到裁剪。為了避免圖片遭到裁剪,請上傳寬高比 16:9 的產品圖片。
    若清單中包含未顯示的商品系列,請啟用「檢視全部」按鈕 如果商品系列清單的商品系列超過「商品系列顯示上限」欄位中所設定的數量,則系統會顯示「檢視全部」按鈕,將顧客帶至該商品系列頁面。

    選擇商品系列

    1. 在佈景主題編輯器中,點擊您要將商品系列新增至哪一個商品系列區塊。
    2. 點擊「選取商品系列」。
    3. 點擊某個商品系列,然後點擊「選取」。

    聯絡表單

    您的聯絡表單會將所有提交的內容傳送至您商店的寄件者電子郵件地址。您可以從 Shopify 管理介面的「一般設定」中變更寄件者電子郵件地址。

    此表單包含下列欄位:

    • 名稱
    • 電子郵件 (必填)
    • 電話號碼
    • 留言

    聯絡表單使用下列顏色配置:

    • 背景顏色是背景 1的顏色。
    • 文字和文字欄位的邊框顏色是文字的顏色。
    • 「傳送」按鈕顏色是色調 1 的顏色。

    自訂 Liquid

    您可以新增自己的 Liquid 程式碼來建立自訂區段。

    • 從您已下載應用程式的說明中新增應用程式程式碼片段,即可輕鬆將應用程式加至您的頁面。
    • 直接在編輯器中新增自訂 Liquid 程式碼。

    電子郵件訂閱

    您可以新增區段,供顧客輸入電子郵件地址並訂閱您的電子報或行銷活動。顧客訂閱後,系統即會於 Shopify 管理介面中建立顧客帳號。

    此區段包含三個預設區塊:

    • 標題
    • 子標題
    • 電子郵件表單

    區段設定

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

    標題區塊

    商品系列清單區段的標題區塊相關設定
    設定 說明
    標題 此區段的標題。

    子標題區塊

    商品系列清單區段的子標題區塊相關設定
    設定 說明
    說明 此區段的說明。

    電子郵件表單

    「電子郵件表單」區塊會顯示一個欄位,供顧客輸入電子郵件地址以註冊您的行銷活動,此區塊未提供可自訂的設定選項。

    精選產品

    您可以新增精選特定產品的區段。

    區段設定

    精選產品區段的相關設定
    設定 說明
    產品 希望在此區段凸顯的產品。
    顯示次要背景 以次要背景顏色顯示精選產品。
    啟用影片循環播放功能 允許重播影片重播。顧客必須點擊才能開始重播。

    「區段」區塊

    在 Dawn 中,您可以在「精選產品」區段中新增以下區塊。

    精選產品區段可用的區塊
    區塊 設定
    文字 為精選產品輸入文字:
    • 文字:接受文字或動態來源。
    • 文字樣式:選擇內文副標題大寫文字
    標題 此區塊未提供可自訂的設定選項。
    價格 此區塊未提供可自訂的設定選項。
    子類選擇器 在按鈕或下拉式選單中選擇。
    數量選擇器 此區塊未提供可自訂的設定選項。
    顯示動態結帳按鈕 顯示您在「付款」設定中啟用的任何動態結帳選項。
    分享 可點擊的文字,供顧客將此產品分享至他們的社群媒體。
    產品評等 顯示產品平均星期評等,並在括號中顯示評論數,例如:★★★★★ (8)。同時也需要產品評論應用程式 (如 Shopify 產品評論) 以及 reviews.rating_countreviews.rating中繼欄位定義
    自訂 Liquid 新增自訂 Liquid 或 HTML 程式碼

    精選商品系列

    您可以新增一個區段,用於顯示單一商品系列的各項產品。

    區段設定

    精選商品系列區段的相關設定
    設定 說明
    標題 此區段的標題。
    商品系列 您想要顯示其產品的商品系列。
    產品數量顯示上限 您想要顯示商品系列中的產品數量。此數量必須為偶數 (最小值為 2,最大值為 12)。
    若商品系列中包含未顯示的產品,請啟用「檢視全部」按鈕 如果商品系列的產品超過「產品顯示上限」欄位中所設定的數量,則系統會顯示「檢視全部」按鈕,將顧客帶至該商品系列頁面。
    啟用行動裝置的滑動功能 將行動版畫面的欄變更為列,這樣顧客便能向側邊滑動以查看更多產品。
    圖片比例 產品圖片的圖片比例:
    • 依圖片調整 - 使用圖片本身的寬高比,可避免圖片遭到裁剪。
    • 縱向 - 使用 2:3 的比例裁剪圖片。
    • 正方形 - 使用 1:1 的比例裁剪圖片。
    游標暫留時顯示次要圖片 當顧客將游標停留在產品圖片上時,顯示產品的次要圖片 (若有的話)。
    新增邊框間距 為圖片新增邊框間距,確保圖片不會遭到裁切。
    顯示圖片邊框 為產品圖片新增細邊框。
    顯示廠商 顯示產品的廠商。
    顯示產品評等 顯示產品平均星期評等,並在括號中顯示評論數,例如:★★★★★ (8)。同時也需要產品評論應用程式 (如 Shopify 產品評論) 以及 reviews.rating_countreviews.rating中繼欄位定義

    圖片橫幅

    圖片橫幅區段支援一或兩張圖片,以及一個包含按鈕的文字方塊。在桌面版中,若使用兩張圖片,圖片會並排顯示;在行動版中,您可以選擇要將圖片並排顯示,或在欄位中顯示。

    在電腦版,文字方塊會遮蓋部分圖片。在行動版,文字方塊會顯示於圖片下方。

    區段設定

    圖片橫幅區段的相關設定
    設定 說明
    第一張圖片 橫幅的主要圖片。若您在此區段新增兩張圖片,則該圖片可能顯示在左側或上方,依顧客使用的應用程式為電腦版或行動版而定。
    第二張圖片 橫幅的次要圖片。若您在此區段新增兩張圖片,則該圖片可能顯示在右側或下方,依顧客使用的應用程式為電腦版或行動版而定。
    區段高度配合的第一張圖片的尺寸 將區段高度設為第一張圖片的高度。在行動版中,這兩張圖片皆會調整為第一張圖片的高度。
    在桌面上顯示文字方塊 在橫幅圖片上顯示文字方塊,以便使用桌上型電腦購物的顧客使用。
    桌面版文字位置

    以桌面版檢視時,文字方塊在圖片之上的位置。

    • 上方 - 在圖片上方顯示文字方塊。
    • 中央 - 在圖片中央顯示文字方塊。
    • 下方 - 在圖片下方顯示文字方塊。

    文字方塊一律水平置中顯示。

    圖片疊加層透明度 使用疊加層模糊橫幅圖片。使用控制橫桿來設定疊加層的不透明度。預設為 0%。
    顏色配置 圖片橫幅區段的背景顏色和圖片邊框間距。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。只有在您選取「在桌面版顯示文字方塊」選項時,才會顯示顏色配置供您選擇。
    在行動裝置上堆疊圖片 若此區段已新增兩張圖片,則圖片會在固定欄位顯示,而非並排顯示。
    將文字置於圖片下方 在行動版圖片下方顯示文字。

    標題區塊

    圖片橫幅區段標題區塊的相關設定
    設定 說明
    標題 文字方塊標題的大型文字。
    標題大小 變更標題文字的大小,選擇中型或大型。

    文字區塊

    圖片橫幅區段的文字區塊相關設定
    設定 說明
    說明 顯示段落樣式文字。

    按鈕區塊

    圖片橫幅區段的按鈕區塊相關設定
    設定 說明
    第一個按鈕標籤 第一個按鈕上顯示的文字。
    第一個按鈕連結 您想要與第一個按鈕連結的網址
    使用外框按鈕樣式 將按鈕樣式調整為按鈕外框,而非純色背景。
    第二個按鈕標籤 第二個按鈕上顯示的文字。
    第二個按鈕連結 欲與第二個按鈕連結的網址
    使用外框按鈕樣式 將按鈕樣式調整為按鈕外框,而非純色背景。

    附文字的圖片

    您可以新增一個包含圖片和文字方塊的區段,並附上可將顧客導向新頁面的選項按鈕。搭配文字和圖片以突顯特定產品、商品系列或網誌文章。新增供貨情況、樣式等資訊,甚至可以提供相關評論。

    區段設定

    附文字圖像區段的相關設定
    設定 說明
    圖片 此區段的圖片。
    圖片比例 此圖片的圖片比例:
    • 依圖片調整 - 使用圖片本身的寬高比,可避免圖片遭到裁剪。
    • 縱向 - 使用 2:3 的比例裁剪圖片。
    • 正方形 - 使用 1:1 的比例裁剪圖片。
    顏色配置 附文字圖像和圖片邊框間距的背景顏色,可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
    桌面版版面配置 桌面版區段的版面配置:
    • 先顯示圖片 - 在左側顯示圖片。
    • 先顯示文字 - 在左側顯示文字。

    標題區塊

    附文字圖像區段的標題區塊相關設定
    設定 說明
    標題 此區段標題的大型文字。

    文字區塊

    附文字圖像區段的文字區塊相關設定
    設定 說明
    說明 在此文字區段中顯示的段落樣式文字。

    按鈕區塊

    附文字圖像區段的按鈕區塊相關設定
    設定 說明
    按鈕標籤 按鈕上顯示的文字。
    按鈕連結 欲與此按鈕連結的網址

    多欄

    您可以在欄版面配置使用多欄區段來顯示內容,並在欄下方新增按鈕將顧客導向新頁面。搭配文字和圖片以突顯特定產品、商品系列或網誌文章。新增供貨情況、樣式等資訊,甚至可以提供相關評論。

    區段設定

    多欄區段的相關設定
    設定 說明
    標題 此區段的標題。
    圖片寬度

    新增至欄的圖片寬度。

    • 欄位的全寬度 - 圖片寬度是欄位的完整尺寸。
    • 欄位的一半寬度 - 圖片寬度是欄位尺寸的一半。
    • 欄位的三分之一寬度 - 圖片寬度是欄位尺寸的三分之一。
    圖片比例

    此圖片的圖片比例:

    • 依圖片調整 - 使用圖片本身的寬高比,可避免圖片遭到裁剪。
    • 縱向 - 使用 2:3 的比例裁剪圖片。
    • 正方形 - 使用 1:1 的比例裁剪圖片。
    • 圓圈 - 裁剪圖片以在圓圈中顯示
    欄位對齊

    圖片和文字在欄位中的對齊方式:

    • 靠左 (預設) - 將圖片和文字靠左對齊。
    • 置中 - 將圖片和文字置中對齊。
    次要背景

    根據背景調整區段的樣式:

    • - 欄和區段的背景維持背景 1 的顏色,且這些欄無邊框間距。
    • 顯示欄位背景 - 欄位背景為文字的不透明色,且會新增邊框間距至這些欄位。
    • 顯示區段背景 - 區段的背景為文字的透明色,欄的背景為背景 1,並會新增邊框間距邊距至這些欄。
    按鈕標籤 按鈕上顯示的文字。
    按鈕連結 欲與此按鈕連結的網址
    啟用行動裝置的滑動功能 將行動版畫面的欄變更為列,這樣顧客便能向側邊滑動以查看更多欄區塊。

    「欄」區塊

    單一區段最多包含 12 個欄。若您的欄區塊為 1-3 個,桌面版會以一列的形式並排顯示。若您的欄區塊為 4 個以上,則桌面版會以兩欄形式顯示。在行動版中,除非開啟「啟用行動裝置的滑動功能」,否則欄區塊一律以單欄形式顯示。

    多欄區段的直欄區塊相關設定
    設定 說明
    圖片 欲顯示的圖片。
    標題 欄的標題。
    說明 此欄中的段落文字。

    頁面

    您可以選擇在區段顯示自訂頁面的內容。系統會將頁面內容全數帶入此區段,但不會從任何範本帶入任何 Liquid 程式碼。

    此區段的顏色配置採用以下設定:

    • 根據預設,文字是文字的顏色。套用至頁面文字的所有特定樣式都會一併顯示至此區段。
    • 超連結是強調色 1 的顏色。

    區段設定

    頁面區段的相關設定
    設定 說明
    頁面 您想要在網路商店中顯示的頁面。

    RTF 文字

    您可以新增包含頁首、段落內容和按鈕的 RTF 文字區段,供顧客連結至新頁面。

    區段設定

    RTF 文字區段的相關設定
    設定 說明
    顏色配置 RTF 文字區段的背景,可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
    讓區段以全寬度呈現 區段預設為全寬度。

    標題區塊

    RTF 文字區段的標題區塊相關設定
    設定 說明
    標題 此區段的標題。
    標題字型大小

    標題文字的大小:

    • 小型
    • 中等
    • 大型

    文字區塊

    文字」區塊是向顧客分享品牌資訊的好方法。您可以描述產品優點、發佈公告、歡迎顧客光臨您的商店,或闡述您的品牌價值。

    RTF 文字區段的文字區塊相關設定
    設定 說明
    說明 此區段主要內容的段落樣式文字。

    按鈕區塊

    RTF 文字區段的按鈕區塊相關設定
    設定 說明
    按鈕標籤 按鈕上顯示的文字。
    按鈕連結 欲與此按鈕連結的網址
    使用外框按鈕樣式 將按鈕樣式調整為按鈕外框,而非純色背景。

    影片

    您可以新增影片區段,以便在您的商店頁面嵌入 YouTube 或 Vimeo 影片。

    區段設定

    影片區段的相關設定
    設定 說明
    標題 此區段的標題。
    封面圖片 在顧客播放影片前,畫面所顯示的圖片。
    網址 影片的 YouTube 或 Vimeo 連結。影片必須設為公開顯示。
    影片替代文字 影片的替代文字。
    讓區段以全寬度呈現 移除預設邊框間距,讓區段以頁面的全寬度呈現。

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

    免費試用