網路商店功能

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

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

公告列

公告列可讓您在任何頁面上向顧客傳達重要資訊。此區段本身沒有設定,但您可以自訂最多 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 或對比色中挑選。

    可摺疊的內容

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

    區段設定

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

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

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

    可摺疊橫列的區塊

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

    商品系列清單

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

    區段設定

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

    選擇商品系列

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

    聯絡表單

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

    此表單包含下列欄位:

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

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

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

    自訂 Liquid

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

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

    電子郵件訂閱橫幅

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

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

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

    區段設定

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

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

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


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

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


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

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

    標題區塊

    電子郵件訂閱區段標題區塊的相關設定
    設定 說明
    標題 此區段的標題。

    子標題區塊

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

    電子郵件訂閱

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

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

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

    區段設定

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

    標題區塊

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

    子標題區塊

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

    電子郵件表單

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

    精選產品

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

    區段設定

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

    「區段」區塊

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

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

    精選商品系列

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

    區段設定

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

    圖片橫幅

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

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

    區段設定

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

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

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

    標題區塊

    圖片橫幅區段標題區塊的相關設定
    設定 說明
    標題 文字方塊標題的大型文字。
    標題大小 變更標題文字的大小。選擇中型 (桌面版為 40 像素,行動版為 30 像素) 或大型 (桌面版為 52 像素,行動版為 40 像素)。

    文字區塊

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

    按鈕區塊

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

    附文字的圖片

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

    區段設定

    附文字圖像區段的相關設定
    設定 說明
    圖片 區段的圖片。點擊「變更」按鈕以變更或移除圖片。
    編輯替代文字 點擊以設定搜尋引擎最佳化 (SEO) 的圖片替代文字,並為使用螢幕助讀程式的顧客說明圖片。
    圖片高度 選擇圖片高度:
    • 依圖片調整 (預設)
    • 小型
    • 大型
    桌面版圖片寬度 圖片寬度:
    • 小型
    • (預設)
    • 大型
    桌面版圖片位置 選擇先顯示圖片或文字是先顯示。行動版的版面配置預設為先顯示圖片:
    • 先顯示圖片 (行動版的預設值)
    • 圖片秒數
    桌面版內容位置 桌上型電腦的「圖片」位置:
    • 靠上 (預設)
    • 置中
    • 靠下
    桌面版內容對齊方式 桌上型電腦的「文字」對齊方式:
    • 靠左 (預設)
    • 置中
    • 靠右
    內容版面配置 允許圖片和文字方塊彼此重疊。若選取不可重疊,內容會調整為配合文字和圖片。
    • 可重疊
    • 不可重疊 (預設)
    顏色配置 附文字圖像和圖片邊框間距的背景顏色,可從色調 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 文字區段的標題區塊相關設定
    設定 說明
    標題 此區段的標題。
    標題字型大小

    標題文字的大小:

    • 小:桌面版為 24 像素,行動版為 20 像素
    • 中型:桌面版為 52 像素,行動版為 40 像素
    • 大:桌面版為 52 像素,行動版為 40 像素

    文字區塊

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

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

    按鈕區塊

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

    素材輪播

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

    區段設定

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

    素材輪播的高度:

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

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

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

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

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

    圖片投影片設定

    素材輪播區段圖片的相關設定
    設定 說明
    圖片 素材輪播的靜態圖片。點擊圖片以選取新圖片,或使用「變更」選單來變更或移除圖片。
    編輯替代文字

    為使用螢幕助讀程式的顧客說明該素材輪播。

    標題

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

    標題大小

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

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

    影片

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

    區段設定

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

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

    免費試用