Brooklyn 的首頁區段

Brooklyn內含特意挑選的首頁區段。您可以新增、重新排列與移除這些區段,以便自訂首頁的版面配置。

投影片輪播

您可以建立首頁投影片輪播,其使用完整寬度或配合系列中第一張圖片的高度:

一間名為「John's Apparel」的線上商店首頁,顯示全螢幕投影片輪播圖片。標頭瀏覽會顯示於圖片上方。

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

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

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

投影片輪播區段包括下列設定:

  • 自動輪流播放投影片 - 將投影片輪播設為自動播放。
  • 變更投影片的頻率 - 選擇變更投影片的頻率。
  • 圖片 - 將圖片投影片新增至投影片輪播。
  • 疊加層 - 在圖片投影片上添加一層顏色。疊加顏色可讓投影片輪播文字便於閱讀。
  • 不透明度 - 設定疊加的不透明度。
  • 副標題文字 - 為投影片新增副標題。副標題會在標題之前顯示。
  • 標題文字 - 為投影片新增標題。
  • 按鈕文字 - 為投影片新增含有文字標籤的按鈕。
  • 投影片連結 - 將您的投影片連結至線上商店的其他部分。
  • 配合第一張圖片 - 將投影片輪播的高度設為配合第一張圖片的高度。
  • 圖片位置 - 選擇圖片中最重要的區域,當作投影片的焦點。
  • 文字對齊 - 對齊投影片的文字。
  • 投影片輪播和文字的顏色挑選器。

自訂投影片輪播

  1. 按一下 Brooklyn 旁邊的「自訂」。

  2. 按一下「幻燈片」

  3. 使用設定來自訂您的投影片輪播

  4. 按一下「儲存」

部落格文章

您可以在首頁上展示最多三篇部落格貼文。

秘訣:若要瞭解如何建立部落格,請參閱《為線上商店新增部落格》。

部落格貼文區段包括下列設定:

  • 標題 - 為部落格貼文區段加上標題。
  • 部落格 - 設定要展示其貼文的來源部落格。
  • 貼文 - 設定要展示的部落格貼文數。
  • 顯示日期 - 顯示發佈部落格貼文的日期。
  • 顯示作者 - 顯示部落格貼文的作者。
  • 顯示封面圖片 - 顯示部落格貼文的封面圖片
  • 顯示摘要 - 顯示部落格貼文的簡短摘要
  • 顯示「查看全部」按鈕 - 新增連結至線上商店部落格頁面的按鈕。

將部落格貼文新增至首頁

  1. 按一下 Brooklyn 旁邊的「自訂」。

  2. 依序按一下「新增區段 > 部落格文章 > 新增」。

  3. 使用設定來自訂首頁部落格區段。

  4. 按一下「儲存」

商品系列清單

您可以在首頁上展示最多九個商品系列。

商品系列清單區段包括下列設定:

  • 標題 - 為商品系列清單加上標題。
  • 系列商品 - 設定您想展示的商品系列。

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

  1. 按一下 Brooklyn 旁邊的「自訂」。

  2. 按一下「商品系列清單」。

  3. 使用設定來自訂商品系列清單區段。

  4. 按一下「儲存」

精選商品系列

您可以在首頁展示來自其中一個商品系列的產品。

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

  • 標題 - 為商品系列加上標題。
  • 商品系列 - 設定要展示其產品的商品系列。
  • 格狀樣式 - 設定您精選產品的版面配置。

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

  1. 按一下 Brooklyn 旁邊的「自訂」。

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

  3. 使用設定來自訂精選商品系列區段。

  4. 按一下「儲存」

附文字的圖片

您可以在首頁上展示圖片和自訂文字。

線上商店的圖片和文字區段。區段左半邊會顯示圖片,而右半邊則顯示文字及按鈕。

附文字圖片區段包括下列設定:

  • 圖片 - 選擇要新增至區段的圖片。
  • 圖片對齊 - 設定您要在頁面哪一側顯示圖片。
  • 標題 - 為區段加上標題。
  • 文字 - 為區段加上文字。
  • 按鈕標籤 - 將含有文字標籤的按鈕新增至區段。
  • 按鈕連結 - 將您的按鈕連結至其他頁面或網站。

為首頁新增附文字的圖片

  1. 按一下 Brooklyn 旁邊的「自訂」。

  2. 依序按一下「新增區段 > 附文字的圖片 > 新增」。

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

  4. 按一下「儲存」

精選產品

您可以在首頁上展示商品。展示產品是宣傳新產品或促銷產品的好方式。

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

  • 產品 - 選擇要在首頁上展示的產品。
  • 顯示變體標籤 - 顯示變體標籤,如「尺寸」和「顏色」。
    襯衫的產品列表,包含選擇不同顏色變體的選項。「顏色」標籤會醒目顯示。
  • 顯示廠商 - 顯示產品品牌或廠商。
  • 文字 - 為精選產品新增文字。
  • 按鈕文字 - 為精選產品新增含有文字標籤的按鈕。
  • 按鈕連結 - 將您的按鈕連結至其他頁面或網站。

將精選產品添加到首頁

  1. 按一下 Brooklyn 旁邊的「自訂」。

  2. 依序按一下「新增區段 > 精選產品 > 新增」。

  3. 使用設定來自訂您的精選產品區段。

  4. 按一下「儲存」

電子報

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

網站上的電子報區段。在此提供客戶可以輸入電子郵件地址的欄位和「訂閱」按鈕。

電子報區段包括下列設定:

  • 標題 - 為訂閱電子報區段加上標題。
  • 副標題 - 為訂閱電子報加上副標題。

將訂閱電子報新增至首頁

  1. 按一下 Brooklyn 旁邊的「自訂」。

  2. 依序按一下「新增區段 > 電子報 > 新增」。

  3. 使用設定來自訂您的訂閱電子報區段。

  4. 按一下「儲存」

地圖

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

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

地圖區段包括下列設定:

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

將地圖新增至首頁

  1. 按一下 Brooklyn 旁邊的「自訂」。

  2. 依序按一下「新增區段 > 地圖 > 新增」。

  3. 使用設定來自訂您的地圖區段。

  4. 按一下「儲存」

RTF 文字

您可以在首頁上加上自訂文字。

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

  • 寬螢幕 - 減少文字兩端的邊距。
  • 標題 - 為 RTF 文字區段加上標題。
  • 文字 - 新增自訂文字並設定其格式。
  • 尺寸 - 設定文字尺寸。

將自訂文字新增至首頁

  1. 按一下 Brooklyn 旁邊的「自訂」。

  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. 按一下 Brooklyn 旁邊的「自訂」。

  2. 依序按一下「新增區段 > 影片 > 新增」。

  3. 使用設定來自訂您的影片區段。

  4. 按一下「儲存」

自訂 HTML

您可以為首頁加上自訂內容。舉例來說,您可以透過 HTML 設定文字方塊的格式、建立表格,或內嵌來自其他網站的內容。

自訂 HTML 區段包括下列設定:

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

將自訂 HTML 新增至首頁

  1. 按一下 Brooklyn 旁邊的「自訂」。

  2. 依序按一下「新增區段 > 自訂 HTML > 新增」。

  3. 使用設定來自訂您的自訂 HTML 區段。

  4. 按一下「儲存」

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

免費試用