網路商店功能

您可以使用區段,為網路商店的任何頁面新增功能。您可以選擇、新增和設定包含圖片、文字、品牌顏色等的區段。

某些頁面將具有預設區段,例如公告列、頁首和頁尾。這些區段會顯示在每個頁面上。

公告列

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

「公告」區塊

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

標頭

頁首會顯示在網路商店的所有頁面上。

區段設定

標題區段的相關設定
設定 說明
顏色配置 選擇商店頁首的背景。使用下拉式選單,選取重點色 1、重點色 2、背景 1、背景 2 或對比色。
標誌圖片 區段的圖片。按一下選取圖片以查看多媒體檔案庫,或按一下變更按鈕,來變更或移除圖片。
編輯替代文字 新增簡短說明以改善搜尋引擎最佳化 (SEO),並為使用螢幕助讀程式的顧客說明媒體內容。
自訂標誌寬度 標誌寬度可以是任何 10 的倍數,介於 50 px 至 250 px 之間。預設為 100 px。
桌面版標誌位置

當顧客在大螢幕上瀏覽網站時,標誌會顯示在頁首的位置。系統會自動最佳化標誌位置,以符合行動裝置。

  • 中央左側 - 畫面顯示的標誌內嵌於主選單,垂直置中並靠左對齊。
  • 左上角 - 在主選單上方顯示標誌,並將標誌和選單項目靠左對齊。
  • 頂部中央 (預設) - 在主選單上方顯示標誌,並將標誌和選單項目置中對齊。
選單 作為主選單的選表。按一下變更以選取其他選單。
桌面版選單類型 使用下拉式選單,在「下拉式選單」和「大型選單」之間選擇桌面版選單類型。「下拉式選單」選項會顯示第二層選單內容,在點擊對應的第二層品項前,第三層會收合起來。「大型選單」會在第一次點擊時顯示第二層和第三層選單的所有內容。系統會自動針對行動版優化選單類型。
顯示不同行 顯示一行,以視覺方式區分頁首和頁面的內容。
啟用固定式頁首 在顧客向上捲動時,畫面會重新顯示頁首;而在顧客向下捲動時,頁首就會從畫面上消失。
間距 在頁首下方加入間距。使用範圍滑桿,在頁首下方加入 0 像素到 100 像素的空間。
區段邊框間距 在頁首上方或下方加入間距。使用範圍滑桿,在頁首上方或下方加入 0 像素到 100 像素的空間。

頁尾

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

區段設定

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

「選單」區塊

頁尾區段的選單區塊相關設定
設定 說明
標題 區塊的標題。
選單 要顯示於區塊的選單。頁尾僅會顯示頂層的選單項目,因此下拉式選單類型不會如預期顯示。

文字區塊

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

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

「圖片」區塊

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

在區塊中對齊圖片:

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

部落格文章

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

區段設定

網誌文章區段的相關設定
設定 說明
標題 此區段的標題。
標題大小 變更標題文字的大小:選擇小型、中型或大型標題。
部落格 您想要顯示的網誌文章所屬的網誌來源。預設為網誌頁面上依字母順序排列的第一個網誌。
部落格文章 您想要在此區段顯示的網誌文章數量(上限為 4 篇)。
桌面版的欄數 桌上型電腦所顯示的欄數。最小值為 1,最大值為 4。
顏色配置 網誌區段的背景顏色。選擇色調 1、色調 2、背景 1、背景 2 或對比色。
顯示主要圖片 顯示網誌文章的主要圖片。建議圖片寬高比:3:2。
顯示日期 顯示網誌文章的建立日期。
顯示作者 顯示網誌文章的作者。
若網誌中仍有未顯示的網誌文章,請啟用「檢視全部」按鈕 如果該網誌的網誌文章多於網誌文章欄位中所設定的數量,系統就會顯示「檢視全部」按鈕,並將顧客導向該網誌的頁面。
區段邊框間距 在網誌文章區塊的上方或下方加入間距。使用範圍滑桿,在網誌文章區塊的上方或下方加入 0 像素到 100 像素的空間。

選擇網誌

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

拼貼

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

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

區段設定

拼貼區段的相關設定
設定 說明
標題 此區段的標題。
標題大小 變更標題文字的大小:選擇小型、中型或大型標題。
桌面版版面配置

拼貼多媒體檔案在桌面版的顯示方式。

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

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

    • 拼貼 - 以拼貼版面配置顯示圖片:
      • 如果已在「桌面版版面配置」啟用了「左側大型區塊」,則第一個區塊會顯示於頂部,且大於其他區塊。
      • 如果已在「桌面版版面配置」啟用了「右側大型區塊」,則最後一個區塊顯示於底部,且大於任何其他區塊。
    • :在欄中顯示所有相同尺寸的多媒體檔案。
    顏色配置 拼貼的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
    區段邊框間距 在拼貼區塊上方或下方加入間距。使用範圍滑桿,在區塊的上方或下方加入 0 像素到 100 像素的空間。

    「影片」區塊

    拼貼區段影片區塊的相關設定
    設定 說明
    封面圖片 在顧客播放影片前,畫面所顯示的圖片。
    網址 YouTube 或 Vimeo 影片的連結。影片必須設為公開顯示。影片將在彈出式視窗中播放。
    影片替代文字 影片的替代文字。為使用螢幕助讀程式的顧客說明影片的相關背景和用途。
    使用原始圖片比例 若您不希望圖片遭到裁剪,請選取這個選項。

    「產品」區塊

    拼貼區段的產品區塊相關設定
    設定 說明
    產品 您想要顯示的產品。
    游標暫留時顯示次要圖片 當顧客將游標停留在產品圖片上時,顯示產品的次要圖片 (若有的話)。

    「商品系列」區塊

    拼貼區段的商品系列區塊相關設定
    設定 說明
    商品系列 您想要顯示的商品系列。

    「圖片」區塊

    拼貼區段的圖片區塊相關設定
    設定 說明
    圖片 區段的圖片。按一下選取圖片以選擇圖片,或按一下變更按鈕來變更或移除圖片。
    編輯替代文字 新增圖片的簡短說明以改善搜尋引擎最佳化 (SEO),並為使用螢幕助讀程式的顧客說明圖片。
    使用原始圖片比例 若您不希望圖片遭到裁剪,請選取這個選項。

    可摺疊的內容

    可折疊內容區段支援可收合或展開的橫列,以檢視其中的內容,以及可放在可折疊內容左側或右側的圖片。

    區段設定

    可折疊內容區段的設定
    設定 說明
    說明 可折疊內容區段的選用說明;顯示於區段標題上方。
    標題 可摺疊內容區段的標題。
    標題大小 變更標題文字的大小:選擇小型、中型或大型標題。
    標題對齊方式 選擇區段標題的對齊方式。可選擇靠左、置中 (預設),或靠右。
    版面配置

    選取可折疊內容的版面配置:

    • 沒有容器 (預設)
    • 橫列容器:每個可折疊的橫列都包含在陰影方塊中
    • 區段容器:在陰影方塊中包含完整的可折疊內容區段
    顏色配置 可折疊內容區段的背景顏色。選擇色調 1、色調 2、背景 1、背景 2 或對比色。
    容器顏色配置 可折疊內容容器的背景顏色。選擇色調 1、色調 2、背景 1、背景 2 或對比色。「版面配置」選項設為「橫列」或「區段」容器時才能看見所選顏色配置。
    開啟第一個可折疊的橫列 依預設,勾選後會展開可折疊內容的第一列。
    圖片 區段的圖片。按一下選取圖片以選擇圖片,或按一下變更按鈕來變更或移除圖片。
    編輯替代文字 新增圖片的簡短說明以改善搜尋引擎最佳化 (SEO),並為使用螢幕助讀程式的顧客說明圖片。
    圖片比例 區段圖片的圖片比例:
    • 依圖片調整 (預設):使用圖片本身的寬高比,可避免圖片遭到裁剪。
    • 小型
    • 大型
    桌面版版面配置 選擇要先顯示圖片或可折疊橫列。預設設定為先顯示文字。在行動版上,一律先顯示圖片。
    區段邊框間距 在可收合內容的上方或下方加入間距。使用範圍滑桿,在可收合內容的上方或下方加入 0 像素到 100 像素的空間。

    可摺疊橫列的區塊

    可折疊橫列區塊的相關設定
    設定 說明
    標題 可折疊橫列的標題。
    圖示 從下拉式清單中選擇要顯示在可折疊內容前的圖示。依預設會選取勾號圖示。
    橫列內容 可折疊橫列的內容。可以格式化內容或包含網址連結。此功能可與橫列內容同時使用。此功能可與橫列內容頁面頁面同時使用。
    橫列內容頁面 您可以將其他頁面的現有內容插入可折疊的橫列。點擊「變更」以選取或移除頁面。此功能可與橫列內容同時使用。

    商品系列清單

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

    區段設定

    商品系列清單區段的相關設定
    設定 說明
    標題 此區段的標題
    標題大小 變更標題文字的大小:選擇小型、中型或大型標題。
    圖片比例 商品系列主要圖片的圖片比例:
    • 依圖片調整 - 使用圖片本身的寬高比,可避免圖片遭到裁剪。
    • 縱向 - 使用 2:3 的比例裁剪圖片。
    • 正方形 (預設) - 使用 1:1 的比例裁剪圖片。
    桌面版的欄數 桌上型電腦所顯示的欄數。最小值為 1,最大值為 5。
    顏色配置 「商品系列清單」區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
    若清單中包含未顯示的商品系列,請啟用「檢視全部」按鈕 顯示「查看全部」按鈕,讓顧客連結至商品系列的完整清單。
    行動版的欄數 設定行動裝置特定欄位的版面配置。請在 1 欄和 2 欄之間擇一。
    啟用行動裝置的滑動功能 將行動版畫面的欄變更為列,這樣顧客便能向側邊滑動以查看更多商品系列區塊。
    區段邊框間距 在商品系列清單的上方或下方加入間距。使用範圍滑桿,在商品系列的上方或下方加入 0 像素到 100 像素的空間。

    選擇商品系列

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

    聯絡表單

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

    此表單包含下列欄位:

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

    區段設定

    聯絡表單區塊的設定
    設定 說明
    標題 此區段的標題
    標題大小 變更標題文字的大小:選擇小型、中型或大型標題。
    顏色配置 聯絡表單區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中選取。
    區段邊框間距 在聯絡表單的上方或下方加入間距。使用範圍滑桿,在聯絡表單區塊的上方或下方加入 0 像素到 100 像素的空間。

    自訂 Liquid

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

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

    區段設定

    自訂 Liquid 區塊的設定
    設定 說明
    自訂 Liquid 新增應用程式程式碼片段或其他自訂 Liquid 碼以建立進階自訂內容。
    顏色配置 聯絡表單區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中選取。
    區段邊框間距 在自訂 Liquid 區塊的上方或下方加入間距。使用範圍滑桿,在自訂 Liquid 區塊的上方或下方加入 0 像素到 100 像素的空間。

    電子郵件訂閱橫幅

    您可以在密碼頁面中新增區段,讓顧客輸入電子郵件地址,以在商店開始營運時收到通知。每個電子郵件訂閱會建立一個顧客帳號

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

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

    區段設定

    電子郵件訂閱橫幅區段的相關設定
    設定 說明
    背景圖片 電子郵件訂閱橫幅的背景圖片。點擊「變更」以取代或移除圖片。移除圖片後,會顯示佈景主題隨附的圖片。取消勾選「顯示背景圖片」核取方塊以隱藏此圖片。
    編輯替代文字 點擊以設定搜尋引擎最佳化 (SEO) 的圖片替代文字,並為使用螢幕助讀程式的顧客說明圖片。
    圖片疊加層透明度 使用疊加層讓電子郵件訂閱的橫幅圖片變暗。使用控制橫桿來設定疊加層的不透明度。預設為 0%。
    顯示背景圖片 勾選此方塊以在電子郵件訂閱橫幅上顯示背景圖片。
    橫幅高度

    使用下拉式選單設定電子郵件訂閱橫幅圖片的高度。選擇配合圖片、小型、中型 (預設) 或大型。

    桌面版內容位置 設定桌上型電腦的電子郵件訂閱橫幅位置。選擇靠上、中央或靠下以及靠右、靠左或置中。預設為中間置中。


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

    在桌面版顯示容器 將電子郵件訂閱橫幅圖片文字放在圖片上方的文字方塊中,以供使用桌上型電腦購物的顧客使用。
    桌面版內容對齊方式 設定桌上型電腦圖片橫幅文字的對齊方式,選擇靠右、靠左或置中 (預設)。
    顏色配置 可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選電子郵件訂閱橫幅區塊的背景顏色。


    在桌面版選取「在桌面版顯示容器」時才能看見所選顏色配置。在行動版選取「在行動版圖片下方顯示內容」時才能看見所選顏色配置。

    行動版內容對齊方式 設定行動裝置圖片橫幅文字的對齊方式,選擇靠右、靠左或置中 (預設)。
    在行動版顯示下方內容 內容將顯示在行動裝置的電子郵件訂閱橫幅圖片下方。

    標題區塊

    電子郵件訂閱區段標題區塊的相關設定
    設定 說明
    標題 此區段的標題。
    標題大小 變更標題文字的大小:選擇小型、中型或大型標題。

    子標題區塊

    電子郵件訂閱區段子標題區塊的相關設定
    設定 說明
    說明 此區段的說明。
    文字樣式 變更電子郵件訂閱區段的文字樣式。選擇內文 (預設) 或副標題。

    電子郵件訂閱

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

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

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

    區段設定

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

    標題區塊

    電子郵件訂閱區段標題區塊的相關設定
    設定 說明
    標題 此區段的標題。
    標題大小 變更標題文字的大小:選擇小型、中型或大型標題。

    子標題區塊

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

    電子郵件表單

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

    精選商品系列

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

    區段設定

    精選商品系列區段的相關設定
    設定 說明
    標題 區段的標題。點擊「動態來源」按鈕以插入動態來源作為區段的標題。
    標題大小 變更標題文字的大小:選擇小型、中型或大型標題。
    說明 輸入精選商品系列的說明文字。您可以將文字格式設為粗體斜體或加入連結。點擊「動態來源」按鈕以插入精選商品系列說明的動態來源。
    顯示管理介面的商品系列說明 勾選此方塊後,系統會使用您在 Shopify 管理介面為商品系列新增的商品系列說明,而非上方「說明」欄位中輸入的任何文字。
    說明樣式 使用下拉式選單來選擇精選商品系列說明的樣式。選項為「內文 (預設)」、「副標題」或「大寫」。
    商品系列 您想要顯示其產品的商品系列。點擊「變更」,以儲存您對商品系列的變更。
    產品數量顯示上限 要顯示商品系列中的產品數量數 (最小值為 2,最大值為 12)。
    桌面版的欄數 桌上型電腦所顯示的欄數。最小值為 1,最大值為 5。
    讓產品以全寬度呈現 無論頁面寬度設定為何,只要勾選方塊,就能以視窗的全寬度顯示產品。
    若商品系列中包含未顯示的產品,請啟用「檢視全部」按鈕 如果商品系列的產品超過「產品顯示上限」欄位中所設定的數量,則系統會顯示「檢視全部」按鈕,將顧客帶至該商品系列頁面。
    「檢視全部」樣式 選擇「連結」、「純色按鈕」或「外框按鈕」。
    在桌面版啟用輪播廣告 勾選方塊後,即可在寬度超過 989 像素的螢幕上以輪播廣告顯示產品。
    顏色配置 可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選精選商品系列區塊的背景顏色。
    圖片比例 產品圖片的圖片比例:
    • 依圖片調整 (預設) - 使用圖片本身的寬高比,可避免圖片遭到裁切。
    • 縱向 - 使用 2:3 的比例裁剪圖片。
    • 正方形 - 使用 1:1 的比例裁剪圖片。
    游標暫留時顯示次要圖片 當顧客將游標停留在產品圖片上時,顯示產品的次要圖片 (若有的話)。
    顯示廠商 顯示產品的廠商。
    顯示產品評等 顯示商品的平均星級評等,並在括號中顯示評論數,例如:★★★★★ (8)。同時也需要商品評論應用程式 (如 Shopify Product Reviews),以及下列兩項的中繼欄位定義reviews.rating_countreviews.rating
    啟用「快速新增」按鈕 「快速新增」按鈕能讓顧客從產品卡將品項新增至購物車。若產品具有子類選項,則按鈕會顯示「選擇選項」,並在彈出式視窗中顯示產品詳細資訊。顧客可以從中選取想要的子類選項、新增品項到購物車,並使用「立刻購買」快速結帳,或是點擊檢視品項的完整資訊。請注意,此設定取決於您是否在產品頁面中啟用「立刻購買」按鈕而定。如果您並未在產品範本中啟用「立刻購買」按鈕,顧客仍可新增產品到購物車,但無法採用快速的「立刻購買」結帳流程。
    行動版的欄數 設定行動裝置特定欄位的版面配置。請在 1 欄和 2 欄之間擇一。
    啟用行動裝置的滑動功能 將行動版畫面的欄變更為列,這樣顧客便能向側邊滑動以查看更多產品。
    區段邊框間距 在精選商品系列區塊的上方或下方加入間距。使用範圍滑桿,在精選商品系列區塊的上方或下方加入 0 像素到 100 像素的空間。

    精選產品

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

    區段設定

    精選產品區段的相關設定
    設定 說明
    產品 希望在此區段凸顯的產品。
    顏色配置 選取精選產品的配色。
    顯示次要背景 以次要背景顏色顯示精選產品。
    隱藏其他子類多媒體檔案 若選取此選項,在選擇子類後,其他子類的多媒體檔案就會被隱藏。
    啟用影片循環播放功能 允許重播影片重播。顧客必須點擊才能開始重播。
    區段邊框間距 在精選產品區塊的上方或下方加入間距。使用範圍滑桿,在此區塊的上方或下方加入 0 像素到 100 像素的空間。

    「區段」區塊

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

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

    圖片橫幅

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

    在桌面版上,文字方塊會遮蓋部分圖片。在行動版上,文字方塊會顯示於圖片下方。桌面版和行動版均可變更文字對齊方式 (靠右、靠左或置中)。

    區段設定

    圖片橫幅區段的相關設定
    設定 說明
    第一張圖片 橫幅的主要圖片。若您在此區段新增兩張圖片,則該圖片可能顯示在左側或上方,依顧客使用的應用程式為電腦版或行動版而定。
    編輯替代文字 點擊以設定搜尋引擎最佳化 (SEO) 的圖片替代文字,並為使用螢幕助讀程式的顧客說明圖片。
    第二張圖片 橫幅的次要圖片。若您在此區段新增兩張圖片,則該圖片可能顯示在右側或下方,依顧客使用的應用程式為電腦版或行動版而定。
    圖片疊加層透明度 為橫幅圖片新增一個疊加層。使用控制橫桿來設定疊加層的不透明度。預設為 0%。
    橫幅高度

    使用下拉式選單來設定橫幅圖片的高度。

    • 小型圖片:桌上型為 420 像素,行動版為 280 像素
    • 中型圖片 (預設):桌上型為 560 像素,行動版為 340 像素
    • 大型圖片:桌上型為 720 像素,行動版為 390 像素
    區段高度配合的第一張圖片的尺寸 將區段高度設為第一張圖片的高度。在行動版中,這兩張圖片皆會調整為第一張圖片的高度。勾選此方塊會覆寫圖片橫幅高度設定。
    桌面版內容位置 設定桌面版圖片橫幅位置。選擇靠上、中央或靠下以及靠右、靠左或置中。
    在桌面版顯示容器 將橫幅圖片文字放在橫幅圖片上方的文字方塊中,以供使用桌上型電腦購物的顧客使用。
    桌面版內容對齊方式 設定桌上型電腦圖片橫幅文字的對齊方式,選擇靠右、靠左或置中。
    顏色配置 圖片橫幅區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。只有在您選取「在桌面版顯示文字方塊」選項時,才會顯示已選擇的顏色配置。
    行動版內容對齊方式 設定行動裝置圖片橫幅文字的對齊方式,選擇靠右、靠左或置中。
    在行動裝置上堆疊圖片 若此區段已新增兩張圖片,則圖片會在固定欄位顯示,而非並排顯示。
    在行動版顯示容器 將橫幅圖片文字放在橫幅圖片上方的文字方塊中,以供使用行動裝置購物的顧客使用。

    標題區塊

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

    文字區塊

    圖片橫幅區段的文字區塊相關設定
    設定 說明
    說明 顯示段落樣式文字。
    文字樣式 變更圖片橫幅中的文字樣式。選擇內文、副標題和大寫。

    按鈕區塊

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

    附文字的圖片

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

    區段設定

    附文字圖像區段的相關設定
    設定 說明
    圖片 按一下選取圖片以選擇該區段的圖片。按一下變更按鈕以變更或移除圖片。
    編輯替代文字 點擊以設定搜尋引擎最佳化 (SEO) 的圖片替代文字,並為使用螢幕助讀程式的顧客說明圖片。
    圖片高度 選擇圖片高度:
    • 依圖片調整 (預設)
    • 小型
    • 大型
    桌面版圖片寬度 圖片寬度:
    • 小型
    • (預設)
    • 大型
    桌面版圖片位置 選擇先顯示圖片或文字是先顯示。行動版的版面配置預設為先顯示圖片:
    • 先顯示圖片 (行動版的預設值)
    • 圖片秒數
    桌面版內容位置 容器中內容的垂直位置:
    • 靠上 (預設)
    • 置中
    • 靠下
    桌面版內容對齊方式 容器中文字的對齊方式:
    • 靠左 (預設)
    • 置中
    • 靠右
    內容版面配置 允許圖片和文字方塊彼此重疊。若選取不可重疊,內容會調整為配合文字和圖片。
    • 可重疊
    • 不可重疊 (預設)
    顏色配置 附文字圖像的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
    行動版版面配置 選擇行動裝置的內容對齊方式:
    • 靠左 (預設)
    • 靠右
    • 置中
    區段邊框間距 在附文字圖像區塊的上方或下方加入間距。使用範圍滑桿,在附文字圖像區塊的上方或下方加入 0 像素到 100 像素的空間。

    標題區塊

    附文字圖像區段的標題區塊相關設定
    設定 說明
    標題 區段的標題文字。
    標題大小 變更標題文字的大小:選擇小型、中型或大型標題。

    文字區塊

    附文字圖像區段的文字區塊相關設定
    設定 說明
    內容 在此文字區段中顯示的段落樣式文字。
    文字樣式 內容文字的樣式:
    • 內文 (預設)
    • 副標題

    按鈕區塊

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

    說明區塊

    附文字圖像區段字幕區塊的相關設定
    設定 說明
    文字 為圖片新增標語或說明。文字會顯示在附文字圖像區段的底部。
    文字樣式 內容文字樣式:
    • 大寫 (預設)
    • 副標題
    文字大小 內容文字的大小:
    • 小型
    • (預設)
    • 大型

    多欄

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

    區段設定

    多欄區段的相關設定
    設定 說明
    標題 此區段的標題。
    標題大小 變更標題文字的大小:選擇小型、中型或大型標題。
    圖片寬度

    新增至欄的圖片寬度。

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

    此圖片的圖片比例:

    • 依圖片調整 (預設) - 使用圖片本身的寬高比,可避免圖片遭到裁剪。
    • 縱向 - 使用 2:3 的比例裁剪圖片。
    • 正方形 - 使用 1:1 的比例裁剪圖片。
    • 圓圈 - 裁剪圖片以在圓圈中顯示
    桌面版的欄數 使用範圍刻度來選取桌上型電腦所顯示的欄位數量,最小值為 2,最大值為 6。
    欄位對齊

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

    • 靠左 (預設) - 將圖片和文字靠左對齊。
    • 置中 - 將圖片和文字置中對齊。
    次要背景 選擇以隱藏次要背景,或選擇以欄背景顯示以變更欄位容器顏色。
    按鈕標籤 按鈕上顯示的文字。
    按鈕連結 欲與此按鈕連結的網址
    顏色配置 多欄區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
    行動版的欄數 設定行動裝置特定欄位的版面配置。請在 1 欄和 2 欄之間擇一。
    啟用行動裝置的滑動功能 將行動版畫面的欄變更為列,這樣顧客便能向側邊滑動以查看更多商品系列區塊。
    區段邊框間距 在多欄區塊的上方或下方加入間距。使用範圍滑桿,在多欄區塊的上方或下方加入 0 像素到 100 像素的空間。

    「欄」區塊

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

    多欄區段的直欄區塊相關設定
    設定 說明
    圖片 欲顯示的圖片。
    標題 欄的標題。
    說明 此欄中的段落文字。
    連結標籤[選用] 新增在欄區塊下方的連結文字。如果您沒有新增連結,請略過此欄位。
    連結 連結的網址。若無連結則請略過。

    頁面

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

    區段設定

    頁面區段的相關設定
    設定 說明
    頁面 您想要在網路商店中顯示的頁面。
    標題大小 變更標題文字的大小:選擇小型、中型或大型標題。
    顏色配置 「商品系列區塊」區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
    區段邊框間距 在頁面區塊的上方或下方加入間距。使用範圍滑桿,在頁面區塊的上方或下方加入 0 像素到 100 像素的空間。

    RTF 文字

    您可以新增包含標題、說明、文字和按鈕的 RTF 文字區段,供顧客連結至新頁面。

    區段設定

    RTF 文字區段的相關設定
    設定 說明
    桌面版內容位置 選擇 RTF 文字容器的位置。使用下拉式選單選取靠左、置中 (預設) 或靠右。內容會自動針對行動裝置進行最佳化調整。
    內容對齊 此設定會影響 RTF 文字區段內所有區塊的文字對齊方式。使用下拉式選單選取靠左、置中 (預設) 或靠右。
    顏色配置 RTF 文字區段的背景。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
    讓區段以全寬度呈現 區段預設為全寬度。
    區段邊框間距 在 RTF 文字區塊的上方或下方加入間距。使用範圍滑桿,在 RTF 文字區塊的上方或下方加入 0 像素到 100 像素的空間。

    標題區塊

    RTF 文字區段最多可有 3 個標題區塊。

    RTF 文字區段的標題區塊相關設定
    設定 說明
    標題 區段的標題。您可使用按鈕將文字設為粗體或斜體,也可以新增連結。點擊來源按鈕即可連結動態來源。
    標題大小 變更標題文字的大小:選擇小型、中型、大型或超大型標題。

    文字區塊

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

    RTF 文字區段最多可有 3 個文字區塊。

    RTF 文字區段的文字區塊相關設定
    設定 說明
    說明 此區段主要內容的段落樣式文字。點擊來源按鈕即可連結動態來源。

    說明區塊

    RTF 文字區段最多可有 3 個說明區塊。

    RTF 文字區段的文字區塊相關設定
    設定 說明
    文字 為 RTF 文字區段加上簡短標語。
    文字樣式 使用下拉式選單選取副標題 (預設) 或大寫文字的文字樣式。
    文字大小 使用下拉式選單來設定說明文字大小。您可以選取小型、中型 (預設) 或大型文字。

    按鈕區塊

    RTF 文字區段最多可有 2 個按鈕區塊。

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

    素材輪播

    您可以新增素材輪播區段,在商店頁面上顯示最多 5 張圖片的輪播廣告。

    區段設定

    素材輪播區段的設定
    設定 說明
    版面配置 選擇「全寬度」(預設) 或「網格」。「全寬度」會顯示素材輪播區段的完整寬度,而「網格」會顯示兩側的邊框。
    投影片高度

    素材輪播的高度:

    • 配合第一張圖片 (預設):所有圖片的高度和輪播廣告中第一張圖片的高度相同。
    • 小型
    • 中等
    • 大型
    分頁樣式

    顯示在圖片下方的素材輪播導覽樣式。

    • 圓點
    • 計數器 (預設)
    • 數字
    自動旋轉投影片

    勾選此方塊以自動旋轉素材輪播中的圖片。如果未勾選此方塊,則顧客為素材輪播手動換頁前,素材輪播會持續顯示靜態圖片。

    變更投影片計時器 使用來設定素材輪播的自動旋轉時間。最短 3 秒,最長 9 秒。
    行動版版面配置 勾選此方塊以在行動版圖片下方顯示內容。
    可存取性 為視力受損的顧客新增素材輪播說明。

    圖片投影片設定

    素材輪播區段圖片的相關設定
    設定 說明
    圖片 為素材輪播選擇靜態或動態圖片。您可以點擊「選取圖片」查看多媒體檔案庫,或點擊來源按鈕以連結動態來源。選取圖片後如需更動,只要點擊「變更」按鈕即可移除、變更或刪除圖片。
    編輯替代文字

    為使用螢幕助讀程式的顧客說明素材輪播的圖片並提供相關背景。

    標題

    圖片的選用標題文字。文字會個別新增至每張圖片。

    標題大小

    選擇小型、中型 (預設) 或大型標題。

    子標題 圖片的選用副標題文字。文字會個別新增至每張圖片。
    按鈕標籤 輸入按鈕的文字,或保留空白以完全隱藏按鈕。
    按鈕連結 您想讓按鈕連結的網址。點擊來源按鈕即可將動態來源新增為網址。
    使用外框按鈕樣式 點擊核取方塊以切換實線或外框按鈕。
    桌面版內容位置 內容方塊在圖片上的位置。選擇靠上、中央或靠下以及靠左、置中或靠右。預設設定為中間置中。
    在桌面版顯示容器 勾選此方塊以顯示內容方塊。
    桌面版內容對齊方式 對齊容器中的文字。可從向左對齊、置中 (預設) 或向右對齊中挑選。
    圖片疊加層透明度 使用控制橫桿調整圖片疊加層的不透明度。
    顏色配置 變更內容方塊的背景顏色。選擇色調 1、色調 2、背景 1 (預設)、背景 2 或對比色。此設定需顯示容器以影響素材輪播圖片。
    行動版版面配置 選擇內容在行動裝置上的顯示方式。選擇靠左、置中 (預設) 或靠右。

    影片

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

    區段設定

    影片區段的相關設定
    設定 說明
    標題 此區段的標題。
    標題大小 變更標題文字的大小:選擇小型、中型或大型標題。
    封面圖片 在顧客播放影片前,畫面所顯示的圖片。
    網址 影片的 YouTube 或 Vimeo 連結。影片必須設為公開顯示。
    影片替代文字 影片的替代文字。為使用螢幕助讀程式的顧客說明影片的相關背景和用途。
    讓區段以全寬度呈現 移除預設邊框間距,讓區段以頁面的全寬度呈現。
    顏色配置 「商品系列區塊」區段的背景顏色。可從色調 1、色調 2、背景 1、背景 2 或對比色中挑選。
    區段邊框間距 在影片的上方或下方加入間距。使用範圍滑桿,在影片區塊的上方或下方加入 0 像素到 100 像素的空間。

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

    免費試用