Narrative 的區段

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

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

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

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

Narrative 包括以下的靜態區段:

  • 標頭
  • 素材輪播
  • 頁尾
  • 產品頁面
  • 商品系列頁面
  • 商品系列清單頁面
  • 部落格
  • 貼文
  • 購物車頁面

動態區段

您可以新增重新排列移除這些動態區段,以便自訂首頁的版面配置。每項佈景主題都有獨特的動態區段集可供挑選。

Narrative 包括以下的動態區段:

  • 部落格文章
  • 商品系列清單
  • 精選商品系列
  • 圖庫
  • 醒目顯示
  • 附文字的圖片
  • 附文字疊加層的圖片
  • 精選產品
  • 電子報
  • 地圖
  • RTF 文字
  • 推薦文
  • 影片
  • 自訂內容
  • 精選商品投影播放器

標頭

標頭區段包括顯示在商店每一頁頂端的內容。Narrative 提供您兩種導覽選單,顧客可以藉由點擊導覽圖示以存取您的導覽選單。

您也可以讓商店標頭透明化來變更商店標頭的外觀,這表示。

若要自訂標頭區段:

  1. 點擊「區段」索引標籤。

  2. 按一下「標頭」區段。

  3. 在「標誌圖片」區域,點擊「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請點擊「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請點擊「圖庫」索引標籤,然後點擊加號按鈕。

  1. 在「自訂標誌高度 (單位為像素)」欄位中輸入標誌的像素高度。

  2. 在「購物車圖示」清單中,選擇是否要在標頭中顯示手提袋或購物車標誌。

  3. 如果要讓商店的標頭透明,請執行以下操作:

    1. 按一下「啟用首頁上的透明標頭」。
    2. 選擇要在透明背景上顯示的圖片。您可能需要另選一個標誌 (與您選擇在標頭頁面上顯示的標誌不同)。例如,為因應較暗的背景,您可能需要採用白色的標誌。
    3. 按一下「透明標頭圖示調色盤」以選擇標頭圖片、導覽和購物車圖示的顏色。
  4. 在「主要導覽」清單中,選擇顧客點擊導覽圖示時會顯示的主要選單。

  5. 在「次要導覽」清單中,選擇次要選單。

  6. 點擊「儲存」。

素材輪播

您可以建立首頁投影片輪播,最多可以輪播五張圖片或影片投影片。

建議您針對投影片使用高解析度圖片。請使用 4000 x 2200 像素或更大的圖片,但請勿超過 Shopify 的上傳限制

由於投影片的尺寸和形狀取決於客戶裝置的尺寸和形狀,因此您的素材輪播圖片在某些螢幕上將會遭到裁剪。請嘗試使用焦點位於中心部位的圖片,以保持每張圖片的重要部分可見。

若要深入瞭解素材輪播圖片的最佳作法,請參閱「上傳圖片」。

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

  • 投影片高度 - 設定投影片高度。選擇「配合第一張圖片投影片高度」,以第一張圖片的高度做為投影片高度的基礎。
  • 置中按鈕 - 設定投影片上的按鈕位置。
  • 顯示疊加層 - 新增顏色疊加層至投影片。疊加層顏色可讓投影片輪播文字便於閱讀。
  • 疊加層顏色 - 設定疊加層的顏色。
  • 不透明度 - 設定疊加層的不透明度。
  • 圖片 - 將圖片投影片新增至素材輪播。
  • 對齊圖片 - 選擇圖片中最重要的區域,當作投影片的重點。
  • 影片連結 - 新增 YouTube 連結的 URL。
  • 封面圖片 - 幫影片投影片新增封面圖片。影片未播放時,即會顯示封面圖片。
  • 標題 - 新增標題到投影片。
  • 投影片標題 - 新增標題至投影片。若您有多張投影片,標題會顯示於素材輪播的下方。
  • 按鈕標籤 - 將含有文字標籤的按鈕新增到投影片。
  • 按鈕連結 - 將您的按鈕連結至線上商店的其他部分。

將投影片新增至您的首頁

  1. 點擊 的區段 旁邊的「自訂」。

  2. 按一下「幻燈片」

  3. 使用設定來自訂素材輪播

  4. 點擊「儲存」。

頁尾

您可以在頁尾區段中編輯顯示在商店每一頁底部的內容。您可以在頁尾加入以下功能:

  • 社交媒體圖示
  • 付款圖示
  • 訂閱電子報
  • 視差捲動效果
  • 最多兩個選單

如要自訂頁尾區段:

  1. 點擊 的區段 旁邊的「自訂」。

  2. 點擊「區段」。

  3. 點擊「頁尾」。

  4. 勾選「顯示社群媒體圖示」,將社群媒體圖示新增至頁尾。您可以在「社群」設定中,將圖示連結至您的社群媒體帳號。

  5. 勾選「顯示付款圖示」,以便在頁尾新增付款圖示 (例如 Mastercard 或 PayPal)。

  6. 如要將訂閱電子報加入頁尾,請執行以下步驟:

    1. 勾選「顯示訂閱電子報」。
    2. 在「標題」欄位,中輸入訂閱電子報的標題。標題預設為「訂閱最新消息」。
    3. 在「副標題」欄位中,輸入訂閱電子報的副標題。預設副標題為「促銷活動、新產品和特賣消息,直接送到您的收件匣。」
  7. 如要將選單加入頁尾,請執行以下步驟:

    1. 按一下「新增選單」。
    2. 如要編輯預設選單,請按一下「編輯選單」。如要變更為其他選單,請按一下「變更」,然後選擇現有選單或按一下「建立選單」。
  8. 點擊「儲存」。

產品頁面

在「產品頁面」區段中,您可以新增或移除以下元素:

  • 數量選擇器
  • 變體標籤
  • 產品品牌或廠商
  • 變體圖片
  • 動態結帳按鈕
  • 社交分享按鈕
  • 商品推薦

如要編輯產品頁面的設定:

  1. 從頂端列的下拉式選單中選擇「產品頁面」。

  2. 點擊「區段」。

  3. 點擊「產品頁面」。

  4. 如要顯示數量選擇器,請勾選「顯示數量選擇器」。

  5. 如要顯示同類產品標籤 (例如「尺寸」和「顏色」),請勾選「顯示變體標籤」。顯示的變體標籤是以變體選項名稱為根據。

  6. 如要顯示產品品牌或供應商,請勾選「顯示產品供應商」。如要展示品牌或供應商,您需要為產品新增供應商

  7. 如要防止變體圖片顯示在頁面底部的圖庫中,請勾選「隱藏圖庫中的變體圖片」。如此一來,唯一會顯示的圖片是非附加於變體的圖片。

  8. 如要顯示動態結帳按鈕,請勾選「顯示動態結帳按鈕」。

  9. 如要顯示社交分享按鈕,請勾選「顯示社交分享按鈕」。

  10. 點擊「儲存」。

新增或移除產品推薦

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

  1. 從頂端列的下拉式選單中選擇「產品頁面」。

  2. 按一下「產品推薦」。

  3. 使用「顯示動態推薦」核取方塊,於產品頁面中顯示或隱藏產品推薦。

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

  5. 選用:若要選擇產品推薦的顯示方式,可以使用這些核取方塊:

- 啟用圖片間距 - 顯示產品廠商

  1. 點擊「儲存」。

商品系列頁面

您可以設定商品系列頁面,以允許客戶對商品系列中的產品進行篩選和排序。您也可以選擇要顯示的產品數量。

如要設定商品系列頁面的版面配置:

  1. 導覽至佈景主題編輯器中的商品系列頁面。

  2. 點擊「區段」索引標籤。

  3. 按一下「商品系列頁面」。

  4. 從清單中選擇每列的產品數和每頁的列數。

  5. 如果您銷售來自不同品牌或供應商的產品,請勾選「顯示產品供應商」,以便在產品圖片下方顯示供應商的名稱。

  6. 如果要在頁面頂端顯示商品系列圖片,請勾選「顯示商品系列圖片」。

  7. 勾選「啟用標籤篩選」,以允許客戶按產品標籤篩選商品系列。

  8. 勾選「啟用商品系列排序」以顯示排序選單。

  9. 點擊「儲存」。

購物車頁面

您可以讓顧客在訂單中加入備註。顧客可以使用購物車備註提供有關準備或配送訂單的特別指示。

客戶撰寫備註時,備註內容會顯示在 Shopify 管理員中訂單的「備註」區域中。

如要在購物車頁面中加入「備註」欄位:

  1. 點擊 的區段 旁邊的「自訂」。

  2. 從頂端列的下拉式選單中選擇「購物車」。

  3. 點擊「區段」。

  4. 按一下「購物車頁面」。

  5. 勾選「啟用購物車備註」。

  6. 點擊「儲存」。

秘訣:您可以在「購物車導覽匣」佈景主題設定中,將購物車設定為導覽匣式購物車。購物車導覽匣會從頁面右側滑出,這表示顧客無需離開產品頁面即可將產品加入購物車。

精選商品系列

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

如要新增精選商品系列:

  1. 點擊「區段」索引標籤。

  2. 按一下「精選商品系列」

  3. 在「商品系列」清單中,選擇您想顯示的商品系列。

  4. 勾選「啟用圖片間距」以拉大圖片之間的距離。

  5. 在「標題」欄位中,輸入要顯示在此區段頂端的文字。此文字依預設為「精選商品系列」。

  6. 如要在每張產品照片下方顯示供應商或品牌名稱,請勾選「顯示產品供應商」。

  7. 如果要允許客戶檢視商品系列中的所有產品,請勾選「顯示『查看全部』按鈕」。客戶按下此按鈕後,就會開啟商品系列頁面並顯示所有產品。

  8. 如果要將「查看全部」按鈕顯示為有實線外框的透明按鈕,請勾選「使用次要按鈕樣式」。

  9. 從「每列產品數」清單中,選擇要在每一列顯示的產品數量。

  10. 從「資料列」清單中,選擇要顯示的產品列數。

  11. 點擊「儲存」。

圖庫

圖庫區段為最多一系列 3 張的圖片。您可以從 13 個自訂圖示的清單中選擇要疊加在圖片上的圖示。也可以選擇將每張圖片連結至商店中的 URL 或頁面。

  1. 點擊「區段」索引標籤。

  2. 按一下「圖庫」。

  3. 在「內容」區域中,按一下「圖片」。

  4. 如要新增圖片,請在「圖片」區域中,按一下「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請點擊「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請點擊「圖庫」索引標籤,然後點擊加號按鈕。

  1. 在「圖片對齊」清單中,選擇要對齊圖片的方式。例如,選擇「左上角」會將圖片放置在區段區域的左上角。

  2. 從「圖示」清單中,選擇要顯示蓋過圖片的圖示。

  3. 找到「文字」區域,在「說明文字」欄位中輸入要顯示每張圖片上的文字。

  4. 如果要將說明文字連結至頁面,請執行以下操作:

    1. 如要將文字連結至商店中的頁面,請按一下「連結」欄位,然後選擇商店中的頁面。
    2. 如果要將文字連結到網站,請將網站的 URL 輸入「連結」欄位中。
  5. 點擊「儲存」。

附文字的圖片

Narrative 包含「附文字的圖片」區段,可供您向客戶顯示包含自訂訊息的圖片。

您可以選取一種圖片對齊方式,以確保從行動裝置檢視時圖片的重要部分不會遭到裁剪。例如,如果您不希望您銷售產品的圖片最下方遭到裁剪,則可以選擇 Bottom center (底部中間) 對齊方式,以確保此部分的圖片不會遭到裁剪。

  1. 點擊「區段」索引標籤。

  2. 按一下「帶有文字的圖片」

  3. 區段間距」清單中,選擇您希望此區段的大小為「小型」、「中型」、「大型」或「超大型」。

  4. 如果要新增背景顏色,請按一下「背景顏色」色樣,然後從調色盤中選擇顏色。

  5. 如要新增圖片,請在「圖片」區域中,按一下「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請點擊「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請點擊「圖庫」索引標籤,然後點擊加號按鈕。

  1. 如果要將圖片裁剪為圖案,請在「圖片裁剪」清單中選擇「圓形」或「正方形」。

  2. 如果不想將圖片裁剪成圖案,請執行以下操作:

    1. 在「圖片裁剪」清單中選擇「」。
    2. 在「圖片對齊」清單中,選擇要對齊圖片的方式。例如,選擇「左上角」會將圖片放置在區段區域的左上角。
  3. 如要新增文字,請執行下列其中一項操作:

    1. 在「標題」欄位中,輸入要顯示的標題文字。
    2. 在「文字」欄位中,輸入要顯示在標題下方的文字。
    3. 如果要將按鈕顯示為有實線外框的透明按鈕,請勾選「使用次要按鈕樣式」。
    4. 「按鈕標籤」欄位中,輸入要顯示在按鈕上的文字。
    5. 在「按鈕連結」欄位中,貼上指向 URL 的連結,或按一下該欄位以從商店中選擇頁面。

如要自訂版面配置:

  1. 在「版面配置」區域中,從「電腦版面配置清單」中,選擇在從電腦檢視時要將圖片置放在文字的左側還是右側。

  2. 從「行動裝置版面配置」清單中,選擇在從行動裝置檢視時要將圖片置放在文字的上方或下方。

附文字疊加層的圖片

您可以在首頁向客戶顯示自訂訊息。您的可以在訊息中說明產品、分享公告內容或歡迎客戶造訪您的商店。

如要自訂附文字疊加層的圖片區段:

  1. 點擊「區段」索引標籤。

  2. 按一下「附文字疊加層的圖片」。

  3. 區段間距」清單中,選擇您希望此區段的大小為「小型」、「中型」、「大型」或「超大型」。

如要新增背景圖片:

  1. 在「圖片」區域,點擊「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請點擊「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請點擊「圖庫」索引標籤,然後點擊加號按鈕。

  1. 在「圖片對齊」清單中,選擇要對齊圖片的方式。例如,選擇「左上角」會將圖片放置在區段區域的左上角。

如要新增文字:

  1. 找到「文字」區域,在「標題」欄位中輸入此區段的標題。

  2. 在「文字」欄位中,輸入要顯示在此區段的文字。

  3. 在「文字大小」清單中,選擇文字大小為「中型」或「大型」。

如要新增按鈕:

  1. 如果要將按鈕顯示為有實線外框的透明按鈕,請勾選「使用次要按鈕樣式」。

  2. 「按鈕標籤」欄位中,輸入要顯示在按鈕上的文字。

  3. 在「按鈕連結」欄位中,貼上指向 URL 的連結,或按一下該欄位以從商店中選擇頁面。

如要套用疊加層:

  1. 在「疊加層」區域中,勾選「顯示疊加層」。

  2. 按一下「疊加層顏色」色樣,以從圖片疊加層中選擇顏色。

  3. 按一下「文字顏色」色樣,以選擇文字顏色。

祕訣:若背景圖片顏色較深,請挑選淺色文字以便閱讀。

  1. 在「透明度」清單中,為圖片疊加層選擇透明度。

電子報

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

如要將訂閱電子報新增至首頁:

  1. 點擊 的區段 旁邊的「自訂」。

  2. 點擊「區段」。

  3. 按一下「新增區段 > 電子報」。

  4. 在「標題」欄位中,輸入訂閱電子報的標題。標題預設為「訂閱我們的電子報」。

  5. 在「副標題」欄位中,輸入訂閱電子報的副標題。預設文字為「促銷活動、新產品和銷售消息,直接送到您的收件匣。」

  6. 在「成功訊息」欄位中輸入成功訊息。客戶在提交電子郵件地址後會看到成功訊息。成功訊息預設為「感謝訂閱」。

  7. 按一下「文字顏色」色樣並選擇顏色,以設定訂閱電子報欄位的文字顏色。

  8. 按一下「背景顏色」色樣並選擇顏色,以設定訂閱電子報區段的背景顏色。

  9. 點擊「儲存」。

地圖

您可以在首頁納入地圖。地圖可有助於宣傳商店的位置和營業時間。

如要新增地圖:

  1. 按一下「區段」索引標籤,並選擇「新增區段」。

  2. 按一下「地圖」。

  3. 在「疊加層標題」欄位中,輸入要顯示在此區段頂端的文字。

  4. 在「文字地址和營業時間」欄位中,輸入公司的業務資訊。

  5. 在「地圖地址」欄位中,輸入商家地址。

  6. 在「Google Maps API 金鑰」欄位中,輸入有效的 API 金鑰

  7. 在「圖片」欄位中,上傳或選擇在地圖區段載入發生問題時顯示的圖片。

影片

您可以將 YouTube 或 Vimeo 代管的影片加入首頁。影片可以吸引客戶並讓客戶對您的業務產生興趣。

如要為首頁新增影片:

  1. 點擊 的區段 旁邊的「自訂」。

  2. 點擊「區段」。

  3. 按一下「新增區段 > 影片」。

  4. 在「標題」欄位中,輸入影片的標題。標題文字會顯示在您的影片上,直到點擊播放按鈕為止。

  5. 在「影片連結」欄位中輸入您影片的分享連結。

    YouTube 分享連結如下所示:https://youtu.be/OTJXAUZY9t0。您可以在此 YouTube 說明文章中,瞭解如何複製 YouTube 影片的分享連結。

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

  6. (選用) 在影片中加入封面圖片:

    1. 按一下「選擇圖片」。如要從電腦上傳圖片,請按一下「上傳」。如要使用 Burst 中的免費圖庫圖片,請按一下「免費圖片」。
    2. 在「圖片位置」下拉式選單中選擇位置,以選擇對齊封面圖片的方式。您可以使用圖片位置來選擇在裁剪圖片時要保留的部分。
  7. 選用:新增疊加層至影片中,即在影片和標題文字間增加一層顏色:

    1. 勾選「顯示疊加層」。
    2. 按一下「疊加層」色樣並選擇顏色,以設定疊加層顏色。
    3. 按一下「文字」色樣並選擇顏色,以設定文字顏色。
    4. 在「透明度」桿滑中選擇百分比,以設定疊加層的透明度。
  8. 點擊「儲存」。

精選商品投影播放器

精選商品投影播放器可讓您展示更多產品資訊,而無需強迫客戶離開首頁。

您可以顯示產品功能、新商品系列或變體。素材輪播最適合使用少量投影片,因為在電腦上瀏覽投影片組合時,頁面捲動功能會被鎖定。

從行動裝置檢視時,精選商品投影片輪播需要點一下或捏合動作才能開啟和檢視。為了吸引行動裝置的客戶開啟精選商品投影片輪播,建議使用精美的封面圖片並使用包含「行動號召」的用語。

您最多可以為精選商品投影片輪播內容新增 5 張投影片。

如要自訂精選商品投影片輪播內容:

  1. 點擊「區段」索引標籤。

  2. 按一下「精選商品投影播放器」。

如要新增圖片投影片:

  1. 在「內容」區域中,按一下「投影片」。

  2. 按一下「背景顏色」色樣,以從調色盤中選擇背景顏色。

  3. 在「圖片」區域,點擊「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請點擊「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請點擊「圖庫」索引標籤,然後點擊加號按鈕。

  1. 在「標題」欄位中,輸入要顯示蓋過投影片的文字。

  2. 在「按鈕標籤」欄位中,輸入要顯示在按鈕上的文字。

  3. 在「按鈕連結」欄位中,貼上指向 URL 的連結,或按一下該欄位以從商店中選擇頁面。

如要自訂精選商品投影播放器設定:

  1. 如果要將投影片按鈕顯示為有實線外框的透明按鈕,請勾選「使用次要按鈕樣式」。

  2. 如果要變更文字顏色,請按一下「投影片標題顏色」色樣,即可從調色盤中選擇顏色。

  3. 在「封面設定」區域中,按一下「選擇圖片」,然後執行下列任一操作,即可為精選商品投影播放器選擇封面圖片:

- 若要選擇已上傳到 Shopify 管理員的圖片,請點擊「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請點擊「圖庫」索引標籤,然後點擊加號按鈕。

  1. 在「標頭」清單中,輸入要顯示在封面圖片上的文字。

  2. 在「標題位置」清單中,選擇標題文字要顯示在封面圖片的左側還是中央位置。此設定僅適用於電腦檢視。

  3. 在「疊加層」區域中,勾選「顯示疊加層」。

  4. 按一下「疊加層顏色」色樣,以從圖片疊加層中選擇顏色。

  5. 按一下「文字顏色」色樣以選擇文字顏色。

  6. 在「透明度」清單中,為圖片疊加層選擇透明度。

  7. 點擊「儲存」。

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

免費試用