Debut 的區段

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

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

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

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

靜態區段

Debut 包括以下的靜態區段:

  • 標頭
  • 頁尾
  • 產品頁面
  • 商品推薦
  • 商品系列頁面
  • 商品系列清單頁面
  • 部落格頁面
  • 貼文
  • 購物車頁面

動態區段

Debut 包括以下的動態區段:

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

標頭

您可以在標頭區段中編輯顯示在商店每一頁頂部的內容。您可以新增標誌圖片、選擇要顯示的選單及建立公告訊息。

新增自訂標誌

您可以將自訂標誌圖片新增至商店的頁首。最佳格式為包含透明背景的 .png 檔。您可以藉由增加或縮減寬度來調整標誌圖片的尺寸大小。

若您不想新增標誌圖片,則會改為顯示您的商店名稱文字。您可以在 Shopify 管理介面的「一般設定」頁面中變更商店名稱。

  • 自訂標誌寬度:標誌的寬度。 - 標誌對齊:頁首中標誌的對齊方式。選取靠左置中

新增並設定標誌

  1. 點擊「頁首」。2. 在「標誌圖片」區域中,點擊「選取圖片」,然後執行下列任一操作:* 若要選取已上傳到 Shopify 管理介面中的圖片,請點擊「圖庫」分頁。* 若要從本機電腦中選取圖片,請點擊「圖庫」>「上傳」。3. 使用此設定來自訂標誌的尺寸和位置。4. 點擊「儲存」。

新增公告列

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

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

新增選單

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

  1. 點擊「標頭」。

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

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

  4. 點擊「儲存」。

頁尾

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

  • 付款圖示
  • 快速連結
  • 訂閱電子報
  • 文字區段包含有關您商家的資訊
  • 社交媒體圖示
  • 語言選擇器
  • 幣別選擇器

新增付款圖示

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

  1. 點擊「頁尾」。

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

  3. 點擊「儲存」。

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

  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

您最多可以新增 4 個內容區塊。

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

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

  1. 點擊「儲存」。

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

新增社群媒體圖示

若您將社群媒體帳號加入佈景主題設定,即會自動顯示於頁尾。

新增語言選擇器

如果您已啟用多個商店語言,則只應新增一個語言選擇器。

  1. 點擊「區段」。

  2. 點擊「頁尾」。

  3. 在「語言選擇器」下方,選取「顯示語言選擇器」。

  4. 點擊「儲存」。

新增幣別選擇器

如果您已啟用多種貨幣,則只應新增一個幣別選擇器。

  1. 點擊「頁尾」。

  2. 在「幣別選擇器」下方,選取「顯示幣別選擇器」。

  3. 點擊「儲存」。

產品頁面

產品頁面」區段是產品頁面的主要可自訂區段。若您在商店中設定了以下功能,則該區段也支援這些功能:

您可以使用下列選項來自訂此區段:

  • 顯示數量選擇器 - 讓使用者指定要新增至購物車的數量。
  • 顯示子類標籤 - 在子類下拉式選單上方顯示子類標籤 (例如「尺寸」或「顏色」)。顯示的子類標籤是依產品的子類選項名稱而定。
  • 顯示廠商 - 顯示產品品牌或廠商。若要顯示品牌或廠商,您必須先為產品新增廠商
  • 顯示動態結帳按鈕 - 讓顧客可以略過購物車,並從精選產品區段直接前往結帳頁面。
  • 顯示社群分享按鈕 - 顯示顧客可用來將產品分享至社群媒體的按鈕。顯示的分享選項是由佈景主題設定所控制。

媒體

  • 大小 - 設定產品多媒體檔案的大小。
  • 啟用圖片縮放功能 - 顧客將滑鼠游標移至產品圖片上即可放大。
  • 啟用影片循環播放功能 - 選取此選項以循環播放產品影片。若取消選取此選項,播放按鈕會在影片結束時出現。

編輯產品頁面設定

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

顯示取貨服務供應情況

Debut 可讓您向顧客顯示您線上商店中的某件產品是否提供到店取貨服務。在每個產品頁面上,取貨服務供貨情況區段會顯示該產品是否開放到店取貨和取貨所需的預估時間範圍。

若要使用此功能,您必須設定「到店取貨」。如果啟用到店取貨,則此功能一律會顯示在產品頁面上,且無法停用。

啟用到店取貨服務後,產品頁面即會顯示到店取貨地點的產品是否可供取貨。此資訊僅會顯示於存放在一個以上取貨地點的產品,且該產品在「運送區段」的產品子類詳細資訊中,「這是實體產品」的選項已選取。

若要為產品子類選項選取「這是實體產品」,請執行下列操作:

  1. 在 Shopify 管理介面中,前往「產品」 > 「所有產品」。

  2. 選取產品

  3. 在「子類」下方,選取子類。

  4. 在「運送」下方,勾選「這是實體產品」。

  5. 點擊「儲存」。

若您僅在一個地點啟用到店取貨服務,則系統會顯示該地點的位置以及取貨服務供應情況。顧客可以點擊「檢視商店資訊」以深入瞭解取貨地點資訊。

若您有多個地點啟用到店取貨服務,則系統會根據顧客的 IP 位址,在取貨服務供應情況區段中顯示距離顧客最近地點的位置和取貨服務供應情況。若顧客點擊「查看其他商店的供應情況」,則會顯示取貨地點清單,並按照距離顧客所在地點遠近排序。

若系統無法從顧客的 IP 位址判斷顧客所在地點,則取貨服務供應情況區段會按照地點的字母順序 (判斷順序依序為城市、地點),列出地點和取貨服務供應情況。例如,假設您有三個取貨地點:多倫多 (Toronto)「Queen Street」、多倫多「Front Street」和渥太華 (Vancouver)「Alberni Street」,則在取貨服務供應情況區段會顯示多倫多「Front Street」的詳細資訊。

顯示 Shop Pay 分期付款橫幅

版本 17.12.0+

如果您位於美國境內並啟用 Shop Pay 分期付款功能,且,則 Shop Pay 分期付款橫幅會在產品頁面上商品價格為 $50 ~ $1000 美元之間的產品顯示。若啟用 Shop Pay 分期付款,則無法關閉橫幅功能。

橫幅會顯示在產品價格下方,且告知顧客可以選擇一次付清或分 4 期付款。使用者可以點擊「瞭解詳情」查看關於分期付款和必要的揭露聲明等相關資訊。

商品推薦

您可以在產品頁面顯示推薦產品,讓客戶輕鬆發掘其他符合興趣的產品。

啟用產品推薦功能

  1. 選取「產品頁面」。

  2. 點擊「產品推薦」區段。

  3. 勾選「顯示動態推薦的應用程式」以在產品頁面上顯示推薦產品。

  4. 選用:若要變更推薦產品上方顯示的標題,請在「標題」欄中輸入新標題。

    1. 選用:若要在產品說明中顯示或隱藏廠商,請使用「顯示廠商」核取方塊。
  5. 點擊「儲存」。

商品系列頁面

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

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

  • 版面配置 - 選擇在商品系列頁面安排產品的方式。
  • 每列產品數 (僅限網格) - 選擇在商品系列頁面上每一列要顯示的產品數量。此區段僅適用於將「版面配置」設定為「網格」。
  • 每頁列數 (僅限網格) - 選擇商品系列頁面中顯示的產品列數。此區段僅適用於將「版面配置」設定為「網格」。
  • 顯示商品系列圖片 - 在商品系列頁面最上方顯示商品系列圖片。
  • 顯示產品廠商 - 在產品名稱下方顯示各產品的廠商。
  • 啟用排序功能 - 選取此選項即可讓顧客在商品系列頁面中對產品進行排序。
  • 啟用標籤篩選功能 - 選取此選項即可讓顧客以產品標籤篩選商品系列。

編輯商品系列頁面設定

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

商品系列清單頁面

您的顧客可以使用商品系列清單頁面找出他們想瀏覽的商品系列。商品系列清單頁面可以顯示商店中的所有商品系列,或您選取的商品系列群組。

商品系列清單頁面區段包含下列設定:

  • 商品系列 - 設定要顯示於商品系列清單頁面的商品系列。僅在「選取要顯示的商品系列」設為「已選取」時適用。
  • 選取要顯示的商品系列 - 選擇要顯示哪些商品系列。
  • 商品系列排序依據 - 設定如何排序商品系列。此設定僅在「選取要顯示的商品系列」設為「全部」時適用。
  • 每列產品數 - 設定商品系列頁面中每一列要顯示的產品數量。

自訂商品系列清單頁面區段

  1. 選取「商品系列清單」。
  2. 點擊「商品系列清單頁面」區段。
  3. 選用:在「內容」區域中,點擊「新增商品系列」,以在商品系列清單頁面新增商品系列。
  4. 使用設定來自訂商品系列清單頁面區段。
  5. 點擊「儲存」。

部落格頁面

部落格頁面」區段是「部落格」頁面中主要的自訂區段。部落格頁面列出您發佈到部落格的所有文章。您可以將文章以清單方式顯示,或以網格的方式顯示。清單檢視和網格檢視都會顯示部落格文章標題和摘要 (若適用)。若無摘要,則會顯示部落格文章的前幾句。

部落格頁面區段包含下列設定:

  • 版面配置 - 選擇「清單」或「網格」。
  • 顯示作者 - 在部落格文章標題下方顯示作者姓名。
  • 顯示日期 - 在部落格文章標題下方顯示發佈日期。

秘訣:若您想為商店建立部落格,或將貼文新增至現有部落格,則可以在 Shopify 管理介面中前往「線上商店」>「部落格文章」。若要深入瞭解有關為線上商店建立部落格的相關事項,請參閱「部落格」。

自訂部落格頁面區段

  1. 選取「部落格」。
  2. 點擊「部落格頁面」區段。
  3. 使用此設定來自訂文章區段。
  4. 點擊「儲存」。

貼文

「部落格文章」頁面會顯示個別部落格文章。「文章」區段包含下列設定:

  • 顯示作者 - 在部落格文章標題下方顯示作者姓名。
  • 顯示日期 - 在部落格文章標題下方顯示部落格文章的發佈日期。
  • 顯示社群分享按鈕 - 選取此選項以在部落格文章中顯示社群分享按鈕。您可以在社群媒體設定中選擇要提供分享選項的平台。

秘訣:若您想為商店建立部落格,或將貼文新增至現有部落格,則可以在 Shopify 管理介面中前往「線上商店」>「部落格文章」。若要深入瞭解有關為線上商店建立部落格的相關事項,請參閱「部落格」。

自訂貼文區段

  1. 選取「部落格文章」。
  2. 點擊「貼文」區段。
  3. 使用此設定來自訂文章區段。
  4. 點擊「儲存」。

購物車頁面

購物車頁面區段包含下列設定:

  • 啟用購物車自動更新功能 - 選取此選項,即可讓顧客變更訂單後立即更新購物車資訊。例如,顧客變更購物車中的商品數量後,購物車的小計金額隨即更新。
  • 啟用購物車備註功能 - 在部分佈景主題中,這個選項稱為「訂單備註」。

自訂購物車頁面區段

  1. 選取「購物車」。
  2. 點擊「購物車頁面」區段。
  3. 使用「購物車頁面」區段來自訂設定。
  4. 點擊「儲存」。

精選商品系列

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

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

  • 標題 - 新增要在商品系列中顯示於產品上方的文字。此處的預設文字為「精選商品系列」。
  • 商品系列 - 選擇要顯示於此區段的商品系列。
  • 每列產品數 - 選擇此區段中每一列要顯示的產品數量。
  • - 選擇此區段中要顯示的產品列數。
  • 顯示產品廠商 - 在產品名稱下方顯示各產品的廠商。
  • 顯示「檢視全部」按鈕 - 選取此選項,即可在此區段的最後一列下方新增「檢視全部」按鈕。顧客可以點擊此按鈕來檢視整套商品系列。

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

  1. 按一下「新增區段」。
  2. 點擊「精選商品系列」,然後點擊「選取」。
  3. 點擊「選取商品系列」,然後從「商品系列」清單中選取一套商品系列。從您選取的商品系列中最多會顯示 50 項產品。
  4. 使用此設定來自訂精選商品系列區段。
  5. 點擊「儲存」。

附文字的圖片

使用 Debut 時,您可以新增圖片,並在圖片右側或左側顯示文字。您也可以新增連結至其他頁面的按鈕。

您可以使用附文字圖像區段來宣傳特定產品或商品系列。

附文字圖像區段包含下列設定:

  • 圖片 - 新增或選取圖片至此區段。您可以上傳圖片、使用之前上傳的圖片,或從 Burst 中選取免費圖庫圖片。
  • 圖片對齊 - 選擇區段中的圖片要顯示在左側還是右側。
  • 標題 - 新增搭配圖片的主要文字。
  • 文字 - 新增搭配圖片的次要文字。這段文字會顯示於標題文字下方。
  • 按鈕標籤 - 新增要顯示在按鈕上的文字。
  • 按鈕連結 - 設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在此區段中加上按鈕,請將此欄位保留空白。

將附文字圖像區段新增至首頁

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

  6. 使用設定自訂區段。

  7. 點擊「儲存」。

附文字疊加層的圖片

您可以在首頁上展示附自訂文字疊加層的大型圖片。

附文字圖片疊加層區段包含下列設定:

  • 圖片 - 選擇圖片至此區段。您可以上傳圖片、使用之前上傳的圖片,或從 Burst 中選取免費圖庫圖片。
  • 圖片對齊 - 選擇區段中的圖片要顯示在左側還是右側。
  • 版面配置 - 設定區段的寬度。
  • 區段高度 - 設定區段的高度。選擇「配合圖片」,根據圖片高度來設定區段高度,以避免圖片裁剪。
  • 文字大小 - 設定文字的大小。
  • 標題 - 新增搭配圖片的主要文字。「附文字圖像疊加層」區段會自動以您提供的標題重新命名。
  • 文字 - 新增搭配圖片的次要文字。這段文字會顯示於標題文字下方。
  • 按鈕標籤 - 新增要顯示在按鈕上的文字。
  • 按鈕連結 - 設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在此區段中加上按鈕,請將此欄位保留空白。

將附文字圖像疊加層新增至首頁

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

  6. 使用設定來自訂您的附文字疊加層圖片區段。

  7. 點擊「儲存」。

精選產品

您可以在首頁上展示商品。展示產品是宣傳新產品或促銷產品的好方式。顧客可使用圖片下方的左右箭頭檢視其他產品圖片。

精選產品區段包括下列設定:

  • 產品 - 選取要在首頁展示的精選產品。
  • 顯示數量選擇器 - 讓使用者指定要新增至購物車的數量。
  • 顯示子類標籤 - 在子類下拉式選單上方顯示子類標籤 (例如「尺寸」或「顏色」)。顯示的子類標籤是依產品的子類選項名稱而定。
  • 顯示廠商 - 顯示產品品牌或廠商。若要顯示品牌或廠商,您必須先為產品新增廠商
  • 顯示動態結帳按鈕 - 讓顧客可以略過購物車,並從精選產品區段直接前往結帳頁面。
  • 顯示社群分享按鈕 - 顯示買顧客可用來將產品分享至社群媒體的按鈕。

媒體

  • 大小 - 設定產品多媒體檔案的大小。
  • 啟用圖片縮放功能 - 顧客將滑鼠游標移至產品圖片上即可放大。
  • 啟用影片循環播放功能 - 循環播放產品影片。若取消選取此選項,播放按鈕會在影片結束時出現。

新增精選產品區段

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">電腦版</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 管理介面,前往<strong>「線上商店」</strong> &gt; <strong>「佈景主題」</strong>。
</li><li>點擊 <strong>的區段</strong> 旁邊的「<strong>自訂</strong>」。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li><li>在 <strong>的區段</strong> 旁,點選「<strong>自訂</strong>」。
</li><li>點一下「<strong>編輯</strong>」。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li><li>在 <strong>的區段</strong> 旁,點選「<strong>自訂</strong>」。
</li><li>點一下「<strong>編輯</strong>」。
</li></ol></div>
</div>
  1. 按一下「新增區段」。
  2. 點擊「精選產品」,然後點擊「選取」。
  3. 使用設定來自訂您的精選產品區段。
  4. 點擊「儲存」。

電子報

您可以將訂閱電子報加入首頁。您可以收集客戶的電子郵件地址,以供電子郵件行銷使用。您可以在 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 URL。
  • 顯示疊加層 - 為影片加上一層顏色,使文字更易於閱讀。若您將影片樣式設為「附播放按鈕的圖片」,則疊加層會在影片播放時移除。
  • 樣式 - 設定影片樣式。背景影片樣式僅適用於桌上型電腦。若客戶透過平板電腦或行動裝置造訪您的商店,他們一律會看到附播放按鈕的圖片樣式。
  • 影片高度 - 設定影片高度。
  • 標題 - 新增影片標題。
  • 文字尺寸 - 為影片新增文字。若您將影片樣式設為「附播放按鈕的圖片」,則文字會在影片播放時移除。

將影片新增至首頁

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

素材輪播

您可以將素材輪播圖片新增至首頁。在素材輪播區段中,您可以設定投影片高度、新增文字和按鈕,及選擇是否要自動開始素材輪播。

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

  • 圖片投影片 - 選擇要在素材輪播中包含的圖片。您可以上傳圖片、使用之前上傳的圖片,或從 Burst 選取的免費圖庫圖片。您可以為每張投影片設定的下列設定: - 圖片位置 - 在素材輪播邊框選擇對齊圖片的方式。您可以在下方準則中深入瞭解圖片位置 。

    • 標題 - 新增搭配圖片的主要文字。
    • 副標題 - 新增搭配圖片的次要文字。這段文字會顯示於標題文字下方。
    • 按鈕標籤 - 新增要顯示在按鈕上的文字。
    • 按鈕連結 - 設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在此區段中加上按鈕,請將此欄位保留空白。
  • 投影片高度 - 設定投影片高度。深入瞭解投影片高度對素材輪播的影響。

  • 文字大小 - 設定素材輪播的標題大小。

  • 文字對齊 - 選擇在投影片文字的位置。

  • 顯示疊加層 - 在圖片和任何放置於圖片上的文字之間新增一層顏色。疊加層有助於提升顏色對比度和易讀性。您可以在色彩設定中設定疊加層的顏色和透明度。

  • 自動輪播投影片 - 設定自動開始素材輪播。

  • 換投影片的頻率 - 選擇換投影片的頻率。

若要瞭解素材輪播圖片裁剪以及建議圖片大小,請參考素材輪播準則。

將投影片新增至您的首頁

  1. 按一下「新增區段」。
  2. 點擊「素材輪播」,然後點擊「選取」。
  3. 如要新增圖片,請執行以下步驟:

    1. 在「內容」區域中,按一下「新增圖片投影片」。
    2. 在「圖片」下按一下「選擇圖片」。如要從電腦上傳圖片,請按一下「上傳」。如要使用 Burst 中的免費圖庫圖片,請按一下「免費圖片」。
    3. 從「圖片位置」下拉式選單中選擇位置,以選擇在投影片輪播中對齊圖片的方式。您可以在下方準則中深入瞭解圖片位置。
    4. 若要為圖片投影片新增文字,請在「標題」欄位或「副標題」欄位中輸入文字,或同時在這兩個欄位中輸入文字。
    5. 在「按鈕標籤」欄位中輸入文字,即可將按鈕新增至圖片投影片。在「按鈕連結」欄位中,選取按鈕要連結到線上商店的哪個部分。
  4. 使用設定來自訂素材輪播區段。

  5. 點擊「儲存」。

素材輪播準則

您可以使用下列設定和圖片建議,來控制素材輪播在線上商店中的顯示方式。投影片的顯示方式取決於以下因素:

  • 圖片尺寸
  • 圖片位置設定
  • 投影片高度設定
  • 圖片的寬高比

由於螢幕尺寸和形狀的差異,您的投影片在行動和桌上型裝置上可能會有所不同。

圖片尺寸建議

素材輪播圖片的建議尺寸取決於您的投影片高度設定。請遵循以下準則:

設定圖片尺寸建議
投影片高度設定 建議寬度 建議高度
配合第一張圖片 1200 像素 600 像素
小型 1200 像素 475 像素
中等 1200 像素 489 像素
大型 1200 像素 775 像素

若要檢視或變更投影片的高度設定,請參閱「建立素材輪播說明」中的步驟 5。

圖片裁剪

您可以執行步驟來控制裁剪圖片的方式,或完全避免圖片遭到裁剪。

控制裁剪圖片的方式

在下列情況下,您可以預期某些螢幕尺寸將會裁剪圖片:

  • 您圖片的寬度與高度比不同。
  • 您的投影片高度設為「」、「」或「」。
  • 您的投影片高度設為「配合第一張圖片」且您的圖片高度高於裝置螢幕或瀏覽器視窗。

您可以使用「圖片位置」設定來控制圖片的剪裁方式。

每張圖片您都可以選擇要在裁剪時保留哪一部分。在下列範例中,您會看到同一張圖片在某些螢幕尺寸上如何被裁剪。左側的投影片圖片位置設為「中心」。右側的投影片圖片位置設定為「左上角」。

範例投影片因為圖片位置設定不同而有不同的裁剪方式。

若要檢視或變更圖片位置設定,請參閱「建立素材輪播說明」中的步驟 10。

避免圖片裁剪

若要避免圖片在素材輪播中遭到裁剪,請嘗試下列步驟:

  • 將投影片高度設為「配合第一張圖片」。
  • 使用寬度是高度兩倍的圖片。這些圖片的寬高比為 2:1。建議解析度為 1200 x 600 像素。
  • 確保所有投影片的寬高比都相同。投影片的比例比解析度像素更加重要。

在下列範例中,比率為 2:1 的素材輪播圖片顯示在桌上型和行動裝置上:

顯示在桌上型和行動裝置上的未經裁剪投影片。

投影片高度

投影片輪播區段的高度一律為瀏覽器視窗的 100%。投影片的高度與寬度相關。由於螢幕尺寸有所不同,因此投影片的寬度與高度在不同裝置上也會不同。投影片高度設定也會影響您投影片的高度。

您可以使用「配合第一張圖片」的投影片高度設定,以第一張圖片的高度做為輪播投影片高度的基準。此設定適合所有圖片尺寸一致或寬高比相同時使用。若您的圖片尺寸不一或者比例不同,您可以變更投影片順序來查看在不同高度下的顯示情況。

在下列範例中,高度最低的投影片會第一個顯示:

高度較低的投影片會決定其他兩張投影片的高度。由於其他投影片高度較高,因此頂部和底部會遭到裁剪。

在下列範例中,高度較高的投影片會第一個顯示:

高度居中的投影片會決定其他兩張投影片的高度。高度較高的投影片頂部和底部將會裁剪。高度較低的投影片則會裁剪兩側。

若您改用「」、「」或「」高度設定,則請參考投影片的圖片尺寸建議。

圖片比例

若您想避免在素材輪播中裁剪圖片,建議圖片使用 2:1 的寬高比。

若您不介意桌上型顯示器會裁剪圖片,而是想在行動裝置上裁剪圖片,則請使用正方形圖片,或者高度大於寬度的圖片。下列範例投影片顯示寬高比為 1:1 的正方形圖片。

顯示在桌上型和行動裝置上的正方形投影片。桌上型裝置上的圖片會經過裁剪,在行動裝置上則無。

下一張範例投影片顯示寬高比為 2:3 的縱向圖片。

顯示在桌上型和行動裝置上的長方形投影片。桌上型裝置上的圖片會經過裁剪,在行動裝置上則無。

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

免費試用