Narrative 的區段

此頁面列印時間為 Jan 28, 2022。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/narrative/sections。

佈景主題內容是使用區段建立而成的。區段即是可以決定網路商店中各頁面版面配置和外觀的可自訂內容方塊。您可以使用新版佈景主題編輯器新增、編輯和自訂區段。

Shopify 的佈景主題包含下列類型的區段：

  • 靜態區段：顯示於網路商店中預定地點的區段，您無法移除或重新排列這些區段。靜態區段可能包含頁首、頁尾、導覽區段，或像產品頁面、商品系列頁面等頁面中的內容區段。例如，「產品」區段會決定網路商店中每個產品頁面的外觀。
  • 動態區段：可用於自訂首頁版面配置的選用區段。 您可以在商店首頁新增、重新排列和移除動態區段，以建立頁面版面配置。您可以在首頁上新增最多 25 個動態區段。

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

秘訣：如果您使用 Shopify 的免費佈景主題，若要查看其區段和設定的詳細說明，您可以前往 Shopify 的免費佈景主題並按一下您的佈景主題名稱。

若要瞭解付費佈景主題中的區段和設定，請參閱佈景主題的說明文件。

靜態區段

Narrative 包括以下的靜態區段：

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

動態區段

Narrative 包括以下的動態區段：

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

標頭

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

您也可以讓商店頁首透明化以變更其外觀。

自訂頁首

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。

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

  2. 在「標誌圖片」區域，點擊「選取圖片」，然後執行下列任一操作：- 若要選取已上傳至 Shopify 管理介面的圖片，請點擊「圖庫」分頁。

  3. 若要從 Burst 中選取圖庫圖片，請點擊「免費圖片」分頁。您可以在這裡輸入搜尋詞彙，或是瀏覽圖片類別。

  4. 若要從電腦本機中選取圖片，請點擊「圖庫」分頁，然後點擊「上傳」。

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

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

  7. 如果要讓商店的標頭透明，請執行以下操作：

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

  8. 在「主要導覽」清單中，選擇顧客點擊導覽圖示時會顯示的主要選單。

  9. 在「次要導覽」清單中，選擇次要選單。

  10. 點擊「儲存」。

新增公告列

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

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。

  1. 點擊「標頭」。

  2. 在「公告」區域中，勾選「顯示公告」。

  3. 輸入公告文字。

  4. 選用：輸入網址以新增公告連結。

  5. 選用：在「圖示」選單中，選取圖示以顯示於公告列。圖示會使用與公告文字相同的顏色。

  6. 若要變更公告列背景的顏色，請點擊「列」顏色色樣並選擇顏色。

  7. 若要變更公告文字的顏色，請點擊「文字」顏色色樣並選擇顏色。

  8. 點擊「儲存」。

素材輪播

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

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

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

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

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

  • 投影片高度 - 設定投影片高度。選擇「配合第一張圖片投影片高度」，以第一張圖片的高度做為投影片高度的基礎。
  • 置中按鈕 - 設定投影片上的按鈕位置。
  • 顯示疊加層 - 新增顏色疊加層至投影片。疊加層顏色可讓投影片輪播文字便於閱讀。
  • 疊加層顏色 - 設定疊加層的顏色。
  • 不透明度 - 設定疊加層的不透明度。
  • 圖片 - 新增要顯示於素材輪播的圖片。
  • 對齊圖片 - 選擇圖片中最重要的區域，當作投影片的重點。
  • 影片連結 - 新增 YouTube 連結的 URL。
  • 封面圖片 - 幫影片投影片新增封面圖片。影片未播放時，即會顯示封面圖片。
  • 標題 - 新增標題到投影片。
  • 投影片標題 - 新增標題至投影片。若您有多張投影片，標題會顯示於素材輪播的下方。
  • 按鈕標籤 - 將含有文字標籤的按鈕新增到投影片。
  • 按鈕連結 - 設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在此區段中加上按鈕，請將此欄位保留空白。

將投影片新增至您的首頁

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 按一下「新增區段」。
  2. 點擊「素材輪播」，然後點擊「選取」。

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

  4. 點擊「儲存」。

頁尾

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

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

自訂頁尾

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 點擊「頁尾」。
  2. 勾選「顯示社群媒體圖示」，將社群媒體圖示新增至頁尾。您可以在社群設定中，將圖示連結至您的社群媒體帳號。
  3. 勾選「顯示付款圖示」，以便在頁尾新增付款圖示 (例如 Mastercard 或 PayPal)。 此區域會顯示與付款服務供應商相關聯的圖示，您已在管理員介面中的「付款設定」區段中將其啟用。

  4. 如要將訂閱電子報加入頁尾，請執行以下步驟：

    1. 勾選「顯示訂閱電子報」。
    2. 在「標題」欄位，中輸入訂閱電子報的標題。標題預設為「訂閱最新消息」。
    3. 在「副標題」欄位中，輸入訂閱電子報的副標題。預設副標題為「促銷活動、新產品和特賣消息，直接送到您的收件匣。」

  5. 如要將選單加入頁尾，請執行以下步驟：

    1. 在「內容」下方，點擊「新增選單」。
    2. 如要編輯預設選單，請按一下「編輯選單」。如要變更為其他選單，請按一下「變更」，然後選擇現有選單或按一下「建立選單」。

  6. 點擊「儲存」。

產品頁面

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

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

媒體

  • 啟用影片循環播放功能 - 循環播放產品影片。若取消選取此選項，播放按鈕會在影片結束時出現。
  • 隱藏圖庫中的子類多媒體檔案 - 選取此選項，以避免子類多媒體檔案在頁面底部中的圖庫顯示。若啟用此選項，則唯一會在圖庫中顯示的多媒體檔案為非子類相關的圖片。

編輯產品頁面設定

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  3. 開啟頁面頂端的下拉式選單。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點選「範本」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點選「範本」。
  1. 選取「產品頁面」。
  2. 點擊「產品頁面」區段。
  3. 使用設定來自訂您的產品頁面區段。
  4. 點擊「儲存」。

商品推薦

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

啟用產品推薦功能

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  3. 開啟頁面頂端的下拉式選單。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點選「範本」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點選「範本」。

  1. 選取「產品頁面」。

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

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

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

  5. 選用：若要在產品說明中顯示或隱藏廠商，請使用「顯示廠商」核取方塊。

  6. 選取「啟用圖片間距」在產品圖片之間新增間距。

  7. 點擊「儲存」。

商品系列

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

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

  • 啟用標籤篩選功能 - 新增篩選條件，讓顧客用來檢視商品系列中有特定標籤之產品。若要在商品系列頁面中顯示篩選條件，您必須先為該商品系列中的產品新增標籤。
  • 啟用商品系列排序 - 新增可讓客戶以不同方式排序商品系列的選單，例如按字母排序或按價格排序。
  • 格狀樣式 - 在頁面上設定產品的版面配置。
  • 顯示商品系列圖片 - 在商品系列頁面最上方顯示商品系列圖片。
  • 啟用圖片間距 -選取此選項要增加圖片間距。
  • 顯示產品廠商 - 顯示產品品牌或廠商。

自訂您的商品系列頁面

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  3. 開啟頁面頂端的下拉式選單。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點選「範本」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點選「範本」。
  1. 選取「商品系列頁面」。
  2. 按一下「商品系列頁面」區段。
  3. 使用設定來自訂商品系列頁面區段。
  4. 點擊「儲存」。

購物車頁面

「購物車頁面」區段是網路商店購物車的主要可自訂區段。您可以在購物車頁面中啟用購物車備註，讓顧客可以在訂單中包含特別指示。

啟用訂單備註

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  3. 開啟頁面頂端的下拉式選單。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點選「範本」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點選「範本」。
  1. 選取「購物車」。
  2. 按一下「購物車頁面」區段。
  3. 選取「啟用購物車備註」。
  4. 點擊「儲存」。

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

精選商品系列

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

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

  • 商品系列 - 選擇要在區段中顯示的商品系列。
  • 啟用圖片間距 -選取此選項要增加圖片間距。
  • 標題 - 新增要在商品系列中顯示於產品上方的文字。此處的預設文字為「精選商品系列」。
  • 顯示產品廠商 - 在產品名稱下方顯示各產品的廠商。
  • 顯示「檢視全部」按鈕 - 選取此選項，即可在此區段的最後一列下方新增「檢視全部」按鈕。顧客可以點擊此按鈕來檢視整套商品系列。
  • 使用次要按鈕樣式 - 將按鈕樣式顯示為有實線的透明按鈕。
  • 格狀樣式 - 在頁面上設定產品的版面配置。
  • 每列產品數 - 選擇此區段中每一列要顯示的產品數量。
  • 列 - 選擇此區段中要顯示的產品列數。

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

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 按一下「新增區段」。
  2. 點擊「精選商品系列」，然後點擊「選取」。
  3. 點擊「選取商品系列」，然後從「商品系列」清單中選取一套商品系列。
  4. 使用設定來自訂精選商品系列區段。
  5. 點擊「儲存」。

圖庫

圖庫區段為最多三張的系列圖片。您可以從 13 個自訂圖示清單中選取要疊加在各圖片上的圖示，或者可以將每張圖片連結至一個網址或商店中的頁面。

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

內容

  • 圖片 - 新增要顯示於此區段圖片。
  • 圖片對齊 - 選擇要在此區段對齊圖片的方式。若您不想顯示圖示，請在「圖示」清單中選取「無」。
  • 圖示 -新增要在圖片上顯示的圖示。
  • 標題 -輸入要顯示在圖片上的文字。
  • 連結 -貼上網址連結，或點擊該欄位以從商店選取頁面。

設定

  • 區段高度 - 選擇希望此區段的畫面大小。
  • 顯示疊加層 - 在圖片上新增顏色疊加層。疊加層可讓文字更易於閱讀。
  • 疊加層顏色 - 設定疊加層的顏色。
  • 文字顏色 - 設定標題和文字的顏色。如果背景圖片顏色較深，挑選淺色文字能使文字更易於閱讀。
  • 不透明度 - 設定疊加層的不透明度。

將圖庫新增至首頁

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 按一下「新增區段」。
  2. 點擊「圖庫」，然後點擊「選取」。
  3. 如要新增圖片，請在「圖片」區域中，按一下「選擇圖片」，然後執行下列任一操作：
  • 若要選取已上傳至 Shopify 管理介面的圖片，請點擊「圖庫」分頁。
  • 若要從 Burst 中選取圖庫圖片，請點擊「免費圖片」分頁。您可以在這裡輸入搜尋詞彙，或是瀏覽圖片類別。
  • 若要從電腦本機中選取圖片，請點擊「圖庫」分頁，然後點擊「上傳」。
  1. 使用設定以自訂圖庫區段。
  2. 點擊「儲存」。

附文字的圖片

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

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

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

設定

  • 區段高度 - 選擇希望此區段的畫面大小。
  • 背景顏色 - 設定區段的背景顏色。

圖片

  • 圖片 - 新增要顯示於此區段圖片。
  • 圖片樣式 - 選擇圖片的裁剪樣式。選擇「無」即可讓圖片保持未裁剪狀態。
  • 圖片位置 - 選擇在範圍內的圖片對齊方式。

文字

  • 標題 - 為區段加上標題。
  • 文字 - 為區段加上文字。
  • 使用次要按鈕樣式 - 將按鈕樣式顯示為有實線的透明按鈕。
  • 按鈕標籤 - 將含有文字標籤的按鈕新增至區段。
  • 按鈕連結 - 設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在此區段中加上按鈕，請將此欄位保留空白。

圖片對齊

  • 桌面 - 選擇以桌上型電腦檢視時，區段中的圖片要顯示在左側還是右側。
  • 行動版 - 選擇行動裝置檢視時，區段中的圖片要顯示在第一位還是第二位。

為首頁新增附文字的圖片

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 按一下「新增區段」。
  2. 點擊「附文字圖像」，然後點擊「選取」。
  3. 在「圖片」區域，點擊「選擇圖片」，然後執行下列任一操作：
  • 若要選取已上傳至 Shopify 管理介面的圖片，請點擊「圖庫」分頁。
  • 若要從 Burst 中選取圖庫圖片，請點擊「免費圖片」分頁。您可以在這裡輸入搜尋詞彙，或是瀏覽圖片類別。
  • 若要從電腦本機中選取圖片，請點擊「圖庫」分頁，然後點擊「上傳」。
  1. 使用設定來自訂您的附文字圖片區段。
  2. 點擊「儲存」。

附文字疊加層的圖片

您可以使用附文字圖像疊加層區段，在首頁向顧客顯示自訂訊息，訊息內容可為產品說明、公告或歡迎訊息。

附文字圖片疊加層區段包含以下設定：

設定

  • 區段間距 - 選擇希望此區段的畫面大小，包含小、中、大或特大。
  • 圖片 - 新增要顯示於此區段圖片。
  • 圖片對齊 - 選擇要在區段中對齊圖片的方式。

文字

  • 標題 - 為區段加上標題。
  • 文字 - 為區段加上內文文字。
  • 文字大小 - 設定標題和內文文字的大小。
  • 使用次要按鈕樣式 - 將按鈕樣式顯示為有實線的透明按鈕。
  • 按鈕標籤 - 將含有文字標籤的按鈕新增至區段。
  • 按鈕連結 - 設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在此區段中加上按鈕，請將此欄位保留空白。

疊加層

  • 顯示疊加層 - 在圖片上新增顏色疊加層。疊加層可讓文字更易於閱讀。
  • 疊加層顏色 - 設定疊加層的顏色。
  • 文字顏色 - 設定標題和文字的顏色。如果背景圖片顏色較深，挑選淺色文字能使文字更易於閱讀。
  • 不透明度 - 設定疊加層的不透明度。

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

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 按一下「新增區段」。
  2. 點擊「附文字圖像疊加層」，然後點擊「選取」。
  3. 在「圖片」區域，點擊「選擇圖片」，然後執行下列任一操作：
  • 若要選取已上傳至 Shopify 管理介面的圖片，請點擊「圖庫」分頁。
  • 若要從 Burst 中選取圖庫圖片，請點擊「免費圖片」分頁。您可以在這裡輸入搜尋詞彙，或是瀏覽圖片類別。
  • 若要從電腦本機中選取圖片，請點擊「圖庫」分頁，然後點擊「上傳」。
  1. 使用此設定來自訂區段。
  2. 點擊「儲存」。

電子報

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

將訂閱電子報新增至首頁

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 按一下「新增區段」。
  2. 點擊「電子報」，然後點擊「選取」。
  3. 在「標題」欄位中，輸入訂閱電子報的標題。
  4. 在「副標題」欄位中，輸入訂閱電子報的副標題。
  5. 在「成功訊息」欄位中輸入成功訊息。客戶在提交電子郵件地址後會看到成功訊息。成功訊息預設為「感謝訂閱」。
  6. 按一下「文字顏色」色樣並選擇顏色，以設定訂閱電子報欄位的文字顏色。
  7. 按一下「背景顏色」色樣並選擇顏色，以設定訂閱電子報區段的背景顏色。
  8. 點擊「儲存」。

地圖

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

秘訣：若要顯示地圖，您必須註冊 Google Maps API 金鑰。

地圖區段包括下列設定：

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

將地圖新增至首頁

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 按一下「新增區段」。
  2. 點擊「地圖」，然後點擊「選取」。
  3. 使用設定來自訂您的地圖區段。
  4. 點擊「儲存」。

影片

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

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

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

影片區段包括下列設定：

設定

  • 標題 - 新增要在播放按鈕上顯示的文字。
  • 影片連結 - 為您的影片加上分享連結。

封面

  • 圖片 -新增影片未播放時，影片區段會顯示的圖片。
  • 圖片位置 - 選擇影片區段中圖片的顯示位置。

疊加層

  • 顯示疊加層 - 在佔位符圖片和按鈕標籤之間新增一層顏色。疊加層可讓影片上的文字更容易閱讀，並且在點擊播放按鈕前會一直顯示。
  • 疊加層 - 設定疊加層的顏色。
  • 文字 - 設定標題文字和播放按鈕的顏色。
  • 不透明度 - 設定疊加層的不透明度。

將影片新增至首頁

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 按一下「新增區段」。
  2. 點擊「影片」，然後點擊「選取」。
  3. 將影片的分享連結貼上至「影片連結」欄位。
  4. 使用設定來自訂您的影片區段。
  5. 點擊「儲存」。

精選商品投影播放器

精選商品投影播放器可讓您在首頁展示更多產品資訊。

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

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

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

自訂精選商品投影播放器

  1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的區段 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的區段 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 按一下「新增區段」。
  2. 點擊「精選商品投影播放器」，然後點擊「選取」。
  3. 使用此設定來自訂精選商品投影播放器區段。
  4. 點擊「儲存」。

新增圖片投影片

  1. 在「內容」區域中，按一下「投影片」。
  2. 按一下「背景顏色」色樣，以從調色盤中選擇背景顏色。
  3. 在「圖片」區域，點擊「選擇圖片」，然後執行下列任一操作：
  • 若要選取已上傳至 Shopify 管理介面的圖片，請點擊「圖庫」分頁。
  • 若要從 Burst 中選取圖庫圖片，請點擊「免費圖片」分頁。您可以在這裡輸入搜尋詞彙，或是瀏覽圖片類別。
  • 若要從電腦本機中選取圖片，請點擊「圖庫」分頁，然後點擊「上傳」。
  1. 在「標題」欄位中，輸入要顯示蓋過投影片的文字。
  2. 在「按鈕標籤」欄位中，輸入要顯示在按鈕上的文字。
  3. 在按鈕連結欄位中，設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在此區段中加上按鈕，請將此欄位保留空白。

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

  1. 如果要將投影片按鈕顯示為有實線外框的透明按鈕，請勾選「使用次要按鈕樣式」。
  2. 如果要變更文字顏色，請按一下「投影片標題顏色」色樣，即可從調色盤中選擇顏色。
  3. 在「封面設定」區域中，按一下「選擇圖片」，然後執行下列任一操作，即可為精選商品投影播放器選擇封面圖片：
  • 若要選取已上傳至 Shopify 管理介面的圖片，請點擊「圖庫」分頁。
  • 若要從 Burst 中選取圖庫圖片，請點擊「免費圖片」分頁。您可以在這裡輸入搜尋詞彙，或是瀏覽圖片類別。
  • 若要從電腦本機中選取圖片，請點擊「圖庫」分頁，然後點擊「上傳」。
  1. 在「標頭」清單中，輸入要顯示在封面圖片上的文字。
  2. 在「標題位置」清單中，選擇標題文字要顯示在封面圖片的左側還是中央位置。此設定僅適用於電腦檢視。
  3. 在「疊加層」區域中，勾選「顯示疊加層」。
  4. 按一下「疊加層顏色」色樣，以從圖片疊加層中選擇顏色。
  5. 按一下「文字顏色」色樣，以選擇文字顏色。 
<aside class="note note-information">
<h4>秘訣</h4>
<p>If the background image is dark, picking a light text color makes the text easier to read.</p>
</aside>

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

  2. 點擊「儲存」。

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

免費試用