Supply 的區段

佈景主題內容是使用區段建立而成的。區段即是可以決定線上商店中各頁面版面配置和外觀的可自訂內容方塊。

靜態區段即是顯示在線上商店中預定地點的區段,您無法移除或重新排列這些區。靜態區段可能包含頁首、頁尾、導覽區段,或像產品頁面、商品系列頁面等頁面中的內容區段。例如,「產品」區段會決定線上商店中每個產品頁面的外觀。

動態區段是可用於自訂首頁版面配置的選用區段。 您可以在商店首頁新增重新排列移除動態區段,以建立頁面版面配置。您可以在首頁上新增最多 25 個動態區段。

您可以瞭解Supply的獨特區段集和如何按照公司風格自訂這些區段的方法。

靜態區段

Supply 包括以下的靜態區段:

  • 標頭
  • 頁尾
  • 產品
  • 商品系列
  • 商品系列清單頁面
  • 文章頁面

動態區段

Supply 包括以下的動態區段:

  • 部落格文章
  • 商品系列清單
  • 精選商品系列
  • 附文字的圖片
  • 素材輪播
  • 精選產品
  • 電子報
  • 地圖
  • RTF 文字
  • 影片
  • 自訂內容

標頭

您佈景主題的標頭是顯示在商店每個頁面頂部的區段。

您可以在標頭中自訂以下項目:

  • 商標
  • 公告列
  • 選單

新增自訂標誌

您可以將自訂標誌圖片新增至商店的頁首。最佳格式為包含透明背景的 .png 檔。Supply 搭配 400 像素寬的標誌可呈現最佳視覺效果。您可以藉由增加或縮減寬度來調整標誌圖片的尺寸大小。請勿將值提高到超出標誌圖片原本的寬度,否則可能會導致圖片受到扭曲和畫質減損。

  1. 點擊「標頭」。
  2. 在「標誌圖片」區域,點擊「選擇圖片」,然後執行下列任一操作: - 若要選擇已上傳至「Shopify 管理員」的圖片,請按一下「圖庫」索引標籤。
    • 若要從電腦本機中選取圖片,請點擊「圖庫」>「上傳」。 6. 在「自訂標誌寬度」欄位中輸入標誌寬度。
  3. 點擊「儲存」。

新增公告列

您可以在頁首新增公告列,以向顧客顯示訊息。訊息內容可以自訂,可包含聯絡資訊、商店活動或促銷相關資訊,還有商店標語。訊息長度最多為 55 個字元。

  1. 點擊「標頭」。
  2. 在「公告列」區域中,勾選「顯示公告」。
  3. 輸入公告文字。
  4. 選用:輸入網址以新增公告連結。
  5. 若要變更公告列背景的顏色,請點擊「」顏色色樣並選擇顏色。
  6. 若要變更公告文字的顏色,請點擊「文字」顏色色樣並選擇顏色。
  7. 點擊「儲存」。

新增選單

您可以將選單新增至頁首。這樣會在頁首顯示所有選單上的連結,用來凸顯顧客想要存取的常見頁面。例如,您可以新增連結至商品系列的選單。

  1. 點擊「標頭」。

  2. 若要選取選單,請點擊「變更」。從清單中選取選單或點擊「建立選單」來建立新選單。

  3. 若要編輯選單中,請點擊「編輯選單」。

  4. 點擊「儲存」。

頁尾

您佈景主題的頁尾是顯示在商店每個頁面底部的區段。 您可以在頁尾加入以下功能:

  • 社交媒體圖示
  • 付款圖示
  • 橫向選單
  • 訂閱電子報
  • 自訂文字
  • 快速連結

新增社群媒體圖示

您只要啟用相關選項,即可在線上商店的頁尾顯示社群媒體圖示。若要控制頁尾顯示的社群媒體圖示,請編輯佈景主題設定

  1. 點擊「頁尾」。
  2. 勾選「顯示社群媒體圖示」。
  3. 點擊「儲存」。

新增付款圖示

您可以在頁尾顯示您接受的付款方式圖示。此區域會顯示與付款服務供應商相關聯的圖示,您已在管理員介面中的「付款設定」區段中將其啟用。

  1. 點擊「頁尾」。

  2. 勾選「顯示付款圖示」。

  3. 點擊「儲存」。

新增橫向選單

您可以將「選單」新增至頁尾,在頁尾底部的水平列中顯示選單的所有連結。您可以使用此選單連結至顧客經常存取的常用頁面。例如,您可以新增包含運送和退貨政策連結的選單。

  1. 點擊「頁尾」。
  2. 編輯「法律選單」設定。若要選取選單,請點擊「變更」。從清單中選取選單或點擊「建立選單」來建立新選單。
  3. 若要編輯選單中,請點擊「編輯選單」。
  4. 點擊「儲存」。

新增選單、訂閱電子報或文字

您最多可在頁尾新增九個內容區塊。

  1. 點擊「頁尾」。

  2. 若要新增內容區塊,請在「內容」區域,點擊「新增內容」。從以下選項中選取區塊類型:

- [Menu](/manual/online-store/os/menus-and-links)

- [Newsletter](/manual/online-store/os/using-themes/change-the-layout/theme-settings/theme-newsletter)

- Text

若要移除內容區塊,請點擊該區塊,然後點擊「移除內容」。

若要自訂內容區塊,請點擊區塊並編輯其設定。

  1. 點擊「儲存」。

秘訣:您可以使用各的拖放式控制代碼 ⋮⋮ 來重新排列區塊。

產品

產品區段是產品頁面的主要可自訂區段。您可以使用下列選項來自訂此區段:

  • 啟用圖片縮放功能 - 顧客將滑鼠游標移至產品圖片上即可放大。
  • 顯示數量選擇器 - 讓使用者指定要新增至購物車的數量。
  • 顯示剩餘數量的訊息 - 庫存不足時顯示剩餘庫存數量。當所選子類選項的庫存僅剩 9 個或更少時,系統會顯示剩餘數量的訊息。您必須為產品啟用庫存追蹤,系統才會顯示此訊息。
  • 在售完時顯示即將調貨的訊息 - 顯示此訊息以指出售罄產品何時會有現貨供應。訊息內容為:「[日期] 後會有現貨」。您必須為產品建立調貨以記錄待入庫庫存,系統才會顯示此訊息。
  • 顯示廠商 - 顯示產品品牌或廠商。若要顯示品牌或廠商,您必須先為產品新增廠商
  • 顯示省下金額 - 顯示顧客省下的金額。省下金額是產品定價與售價之間的差額。若要顯示省下金額,您必須設定產品的售價。
  • 顯示售價 - 顯示產品售價
  • 顯示相關產品 - 在頁面底部顯示一系列相關產品。畫面顯示的相關產品會視產品所屬商品系列而定。您必須將產品新增至商品系列,系統才會顯示該產品的相關產品。如果產品不屬於任何商品系列或是商品系列中的唯一品項,就無法顯示相關產品。
  • 顯示動態結帳按鈕 - 讓顧客可以略過購物車,並從「精選產品」區段直接前往結帳頁面。
  • 啟用產品分享按鈕 - 顯示顧客可用來將產品分享至社群媒體的按鈕。顯示的分享選項是由佈景主題設定所控制。
  • 啟用產品評論 - 在頁面新增產品評論區段。若要顯示評論,您必須安裝免費的 Shopify Product Reviews 應用程式並接收產品評論。
  • 子類選項選擇器和按鈕尺寸 - 從這個下拉式選單選擇尺寸,以設定子類選項選擇器、「加入購物車」按鈕和動態結帳按鈕的尺寸。

編輯產品設定

  1. 選取「產品頁面」。
  2. 點擊「產品」區段。
  3. 使用此設定來自訂您的產品區段。
  4. 點擊「儲存」。

商品系列

商品系列區段是商品系列頁面的主要可自訂區段。

商品系列區段包含下列設定:

  • 每列產品數 - 選擇此商品系列頁面中每一列要顯示的產品數量。
  • 每頁列數 (僅限網格) - 選擇商品系列頁面中顯示的產品列數。
  • 側邊欄產品篩選條件 - 選擇按產品標籤篩選群組在側邊欄排序商品系列。
  • 顯示售價 - 顯示產品售價
  • 顯示省下金額 - 顯示顧客省下的金額。省下金額是產品定價與售價之間的差額。若要顯示省下金額,您必須設定產品的售價。
  • 啟用產品評論 - 在頁面顯示評論評分徽章。若要顯示評論評分徽章,您必須安裝免費的 Shopify Product Reviews 應用程式並接收產品評論。
  • 啟用側邊欄 - 顯示側邊欄,讓顧客可以使用所選的篩選條件類型篩選您的產品。

編輯商品系列設定

  1. 選取「商品系列頁面」。
  2. 點擊「商品系列」區段。
  3. 使用此設定來自訂商品系列區段。
  4. 點擊「儲存」。

商品系列清單

使用「商品系列」區段,在首頁顯示最多 6 個產品商品系列。

將商品系列清單新增至首頁

  1. 點擊「新增區段」。2. 點擊「商品系列清單」,然後點擊「選取」。3. 若要將商品系列新增至此區段,請自訂各個「商品系列」區塊:* 點擊一個商品系列區塊,然後點擊「選取商品系列」。* 從「商品系列」下拉式清單中,選取要顯示的商品系列,或點擊「建立商品系列」以建立新的商品系列。* 點擊「選取」。4. 若要新增其他商品系列區塊,請點擊「新增商品系列」。5. 點擊「儲存」。

秘訣:您可以使用各的拖放式控制代碼 ⋮⋮ 來重新排列區塊。

精選商品系列

您可以在首頁上展示精選商品系列。展示精選商品系列有助於促進銷售和宣傳新商品系列。

精選商品系列區段包含下列設定:

  • 標題 - 為精選商品系列區段加上標題。
  • 商品系列 - 選擇要顯示於此區段的商品系列。
  • 每列產品數 - 選擇此區段中每一列要顯示的產品數量。
  • - 選擇此區段中要顯示的產品列數。
  • 顯示省下金額 - 顯示顧客省下的金額。省下金額是產品定價與售價之間的差額。若要顯示省下金額,您必須設定產品的售價。
  • 顯示售價 - 顯示產品售價

將精選商品系列新增至首頁

  1. 點擊「新增區段」。2. 點擊「精選商品系列」,然後點擊「選取」。3. 點擊「選取商品系列」,然後選取要顯示的商品系列,接著點擊「選取」。4. 使用此設定來自訂精選商品系列區段。5. 點擊「儲存」。

素材輪播

您可以使用「素材輪播」區段上傳用於首頁素材輪播的圖片。

您可以為首頁選取最多 6 張投影片的圖片。您可以為每張投影片新增連結,讓顧客可以點擊該連結以開啟商店的頁面。

建議每張投影片的圖片寬 1000 像素,高 500 像素。如果投影片輪播使用具有不同高度的圖片,在投影片轉場時可能會出現圖片跳片或不連貫的情形。

秘訣:如果素材輪播中的圖片包含文字,請設定較慢的轉場速度,讓您的客戶有足夠的時間可以看清楚每張投影片。

素材輪播區段包括下列設定:

內容

  • 圖片 - 新增素材輪播投影片中顯示的圖片。
  • 連結網址 - 將您的投影片連結至線上商店的其他部分。

設定

  • 自動輪播投影片 - 設定自動開始素材輪播。
  • 轉場時間 - 選擇更換投影片的頻率。

自訂素材輪播

  1. 按一下「新增區段」。
  2. 點擊「素材輪播」,然後點擊「選取」。
  3. 若要將圖片新增至素材輪播,點擊「圖片」方塊以自訂:
    1. 點擊「選取圖片」,然後執行下列任一操作:- 若要選取已上傳至 Shopify 管理員介面的圖片,請點擊「圖庫」分頁。
  4. 若要從 Burst 中選取圖庫圖片,請點擊「免費圖片」分頁。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。
  5. 若要從電腦本機中選取圖片,請點擊「圖庫」分頁,然後點擊「上傳」。

    1. 如果要將加入投影片的連結,請執行以下操作: - 如要將投影片上的文字連結到商店的頁面,請按一下「連結 URL」欄並選擇頁面。
    2. 如果要將投影片上的文字連結至網站,請將該網站的網址貼在「連結網址」欄位中。
  6. 使用設定來自訂素材輪播

  7. 點擊「儲存」。

秘訣:您可以使用各的拖放式控制代碼 ⋮⋮ 來重新排列區塊。

電子報

您可以將訂閱電子報加入首頁。您可以收集客戶的電子郵件地址,以供電子郵件行銷使用。您可以在 Shopify 部落格上進一步瞭解電子郵件行銷。

將訂閱電子報新增至首頁

  1. 按一下「新增區段」。

  2. 點擊「電子報」,然後點擊「選取」。

  3. 輸入「訂閱電子報」的標題。

  4. 輸入訂閱電子報的副標題。

  5. 點擊「儲存」。

地圖

您可以將 Google 地圖新增至首頁,向客戶顯示您商家所在的位置。

秘訣:若要顯示地圖,您必須註冊 Google Maps API 金鑰

地圖區段包括下列設定:

  • 標題 - 為地圖區段加上標題。
  • 地址和營業時間 - 為地圖區段加上商店的地址和營業時間。
  • 地圖地址 - 設定地圖以顯示商店地點。
  • 地圖連結標籤 - 新增連結至您在 Google Maps 上地點的按鈕。
  • 顯示圖釘 - 在地圖上新增顯示您商店精確位置的圖釘。
  • Google Maps API 金鑰 - 為地圖區段加上地圖的 API 金鑰。
  • 圖片 - 新增在地圖未載入時要顯示的圖片。
  • 圖片位置 - 設定圖片的位置。

將地圖新增至首頁

  1. 按一下「新增區段」。
  2. 點擊「地圖」,然後點擊「選取」。
  3. 使用設定來自訂您的地圖區段。
  4. 點擊「儲存」。

RTF 文字

使用「RTF 文字」區段提供您要在首頁上顯示的任何文字內容,或嵌入在 Shopify 管理員中建立的任何頁面。例如,您可以透過嵌入部落格頁面來展示即將舉辦的活動,或顯示包含以下內容的頁面:

RTF 文字區段包括下列設定:

  • 標題 - 為 RTF 文字區段加上標題。
  • 文字 - 新增自訂文字並設定其格式。 如果要展示商店中的精選頁面,請點擊「新增內容」,然後點擊「頁面」。從下拉式選單中選擇要展示作為首頁的頁面。
  • 尺寸 - 設定文字尺寸。

將 RTF 文字新增至首頁

  1. 按一下「新增區段」。

  2. 點擊「RTF 文字」,然後點擊「選取」。

  3. 使用設定來自訂您的 RTF 文字區段。

  4. 點擊「儲存」。

影片

您可以將 YouTube 或 Vimeo 影片新增至首頁。影片可以吸引客戶,讓客戶對您的業務產生興趣。

若要新增影片,您必須找出影片的分享連結:

  • YouTube - Youtube 分享連結如下所示:https://youtu.be/Oc5v_ToKP7c。您可以在此 YouTube 說明文章中,瞭解如何複製 YouTube 影片的分享連結。
  • Vimeo - Vimeo 分享連結如下所示:https://vimeo.com/123456789。您可以在此 Vimeo 說明中心文章中,瞭解如何複製 Vimeo 影片的分享連結。

影片區段包括下列設定:

  • 標題 - 為影片區段加上標題。
  • 影片連結 - 為您的影片加上分享連結。

將影片新增至首頁

  1. 按一下「新增區段」。
  2. 點擊「影片」,然後點擊「選取」。
  3. 使用此設定來自訂您的影片區段。
  4. 點擊「儲存」。

自訂內容

在「自訂內容」區段中,您可以將多個內容區塊集合在一起。也可以調整每個區塊的寬度和對齊方式,以建立自訂版面配置。

您可以透過 HTML 設定文字方塊的格式、建立表格,或內嵌其他網站的內容。您可以在「自訂內容」區段中,新增最多九個「自訂 HTML」。

各個「自訂 HTML」區塊皆包含以下設定:

  • HTML - 新增您想在首頁上顯示的 HTML 程式碼。
  • 容器寬度 - 設定自訂 HTML 區段的寬度。
  • 垂直對齊 - 設定此區塊中內容的垂直位置。

將自訂內容新增至首頁

  1. 按一下「新增區段」。

  2. 點擊「自訂內容」,然後點擊「選取」。

  3. 選取和設定要包含在區段中的內容區塊。

  4. 點擊「儲存」。

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

免費試用