Boundless 的區段

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

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

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

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

靜態區段

Boundless 包括以下的靜態區段:

  • 側邊欄選單
  • 公告列
  • 標頭
  • 素材輪播
  • 動作列
  • 頁尾
  • 產品
  • 商品推薦
  • 商品系列
  • 商品系列清單頁面
  • 文章

動態區段

Boundless 包括以下的動態區段:

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

側邊欄選單

側邊欄選單就像是商店的目錄。此選單會顯示在商店的所有頁面上。

側邊欄選單會顯示兩個選單。「主要選單」以較大字體顯示在頂端,而「附加選單」以較小字體顯示於「主要選單」下方。

您可以在側邊欄顯示社群媒體帳號的連結。這些連結是由佈景主題設定所控制。

自訂側邊欄選單

  1. 按一下「側邊欄選單」。

  2. 在「主要選單」清單中,選擇要顯示為主要選單的選單。這通常是商店的主選單。

  3. 從「附加選單」清單中,選擇要在主要選單下方顯示的選單。這通常是商店的頁尾選單。

  4. 點擊「儲存」。

公告列

您可以啟用公告列,以向顧客顯示訊息。訊息內容完全可以自訂,並可以包含聯絡資訊、連結、商店活動或特賣資訊,還有商店標語或品牌訊息。公告列可以在商店的任何頁面中顯示,但你可以選擇僅在首頁中顯示。

啟用公告列

  1. 點擊「公告列」。5. 勾選「顯示公告」。
Select **Home page only** to display the announcement message on the home page only.
  1. 輸入公告文字。
  2. 選用:輸入網址以新增公告連結。
  3. 若要變更公告列背景的顏色,請點擊「」顏色色樣並選擇顏色。
  4. 若要變更公告文字的顏色,請點擊「文字」顏色色樣並選擇顏色。
  5. 點擊「儲存」。

標頭

佈景主題的頁首是顯示在商店中每個頁面最上方的區段。您可以自訂顯示於頁首中的標誌

您可以新增額外標誌,並將其設定為僅在首頁上顯示。首頁標誌會在素材輪播上顯示,因此請選擇可在圖片上方清楚顯示的標誌版本。

新增自訂標誌

  1. 點擊「頁首」。2. 在「標誌 」區域中,點擊「選取圖片」,然後執行下列任一操作:- 若要選取已上傳至 Shopify 管理員介面的圖片,請點擊「圖庫」分頁。
    • 若要從 Burst 中選取圖庫圖片,請點擊「免費圖片」分頁。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。
    • 若要從電腦本機中選取圖片,請點擊「圖庫」分頁,然後點擊「上傳」。
  2. 選用:在「首頁標誌」區域中,點擊「選取圖片」,然後執行下列任一操作:- 若要選取已上傳至 Shopify 管理員介面的圖片,請點擊「圖庫」分頁。
    • 若要從 Burst 中選取圖庫圖片,請點擊「免費圖片」分頁。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。
    • 若要從電腦本機中選取圖片,請點擊「圖庫」分頁,然後點擊「上傳」。
  3. 在「自訂標誌寬度 (單位為像素)」欄位中輸入標誌寬度。8. 點擊「儲存」。

素材輪播

您可以將素材輪播新增至首頁,最多可以輪播五張圖片。

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

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

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

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

  • 投影片高度 - 設定投影片高度。選擇「配合第一張圖片投影片高度」,以第一張圖片的高度做為投影片高度的基礎。
  • 自動輪播投影片 - 設定自動開始素材輪播。
  • 換投影片的頻率 - 選擇換投影片的頻率。
  • 文字與圖示 - 為顯示於素材輪播的文字與圖示選擇顏色。
  • 圖片疊加層 - 在圖片投影片上疊加層一層顏色。疊加層顏色可讓素材輪播文字更容易閱讀。
  • 不透明度 - 設定疊加層的不透明度。
  • 圖片 - 將圖片投影片新增至素材輪播。
  • 圖片位置 - 選擇圖片中最重要的區域,當作投影片的焦點。
  • 標題 - 新增標題到投影片。
  • 按鈕文字 - 為投影片新增含有文字標籤的按鈕。
  • 按鈕連結 - 設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在此區段中加上按鈕,請將此欄位保留空白。

自訂素材輪播

  1. 按一下「幻燈片」

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

  3. 點擊「儲存」。

動作列

根據預設,動作列會顯示商店的主選單。您可以自訂您的選單,使動作列根據顧客所查看的頁面顯示不同項目。在首頁上,動作列通常用於顯示您產品所屬的商品系列。在商品系列中,動作列可以顯示更多子類別或其他相關的商品系列。

例如,如果您的商店銷售服裝,您的動作列可能會在首頁上顯示「男裝」、「女裝」和「配件」。如果客戶按一下「女裝」,則動作列可能會接著在商品系列頁面上顯示「上衣」、「褲子」和「鞋類」。

要確保動作列以這種方式運作,請使用主選單連結至您的商品系列。在頁尾選單中,將連結放置在商店的其他部分 (您的「聯絡」或「關於」頁面)。

提示:

如果在動作列上建立連結至首頁的選單,則該選單也會顯示在首頁上。當您為尚不存在的商品系列設定選單時,就可能會發生這種情況,因此您改為建立了一個指向首頁的預留位置連結。

在建立為動作列的商品系列連結前,請先建立您的商品系列。替代方式是您可以在建立要連結的商品系列前,先連結至「所有產品」頁面。

自訂動作列

  1. 按一下「動作列」。

  2. 在「選單」清單中,選擇要在「動作列」顯示的選單。

  3. 點擊「儲存」。

頁尾

您佈景主題的頁尾是顯示在商店每個頁面底部的區段。您可以使用 Boundless 在頁尾中顯示接受的付款方式選單和圖示。

您可以在頁尾顯示社群媒體帳號的連結。這些連結是由佈景主題設定所控制。

將選單新增至頁尾

您可以將選單新增至頁尾。這樣會在頁尾顯示所有選單上的連結,用來凸顯顧客想要存取的常用頁面。例如,您可以新增包含聯絡資訊和運送政策連結的選單。

<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. 點擊「儲存」。

新增付款圖示

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

  1. 點擊「頁尾」。

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

  3. 點擊「儲存」。

產品

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

  • 略過第一張產品圖片 - 啟用此選項時,第一張產品圖片僅會顯示在商品系列頁面上,而不會顯示在產品頁面上。您可以使用此選項,將第一張產品圖片設計為在商品系列頁面上呈現最佳外觀,並將其他產品圖片設計為適合在產品頁面提供的較大空間中呈現。
  • 圖片樣式 - 選擇「直向/正方形」或「寬幅」。
  • 顯示廠商 - 在產品頁面中顯示產品品牌或廠商。如要展示品牌或廠商,您需要為產品新增廠商
  • 顯示數量選擇器 - 讓使用者指定要新增至購物車的數量。
  • 顯示動態結帳按鈕 - 讓顧客可以略過購物車,並從「精選產品」區段直接前往結帳頁面。
  • 產品表單寬度 - 選擇寬度「」或「」。

您也可以在產品頁面上顯示推薦產品。

自訂產品區段

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

商品推薦

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

啟用產品推薦功能

  1. 選取「產品頁面」。

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

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

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

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

商品系列

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

  • 圖片樣式 - 選擇將圖片設定為「直向/正方形」或「寬幅」。

    如果您的產品圖片是正方形或縱向,則「直/正方形」最為適合。

    如果您的圖片是長方形或橫向,則「」最為適合。

  • 圖片尺寸 - 選擇圖片尺寸。如果您顯示小型產品圖片,則可以在一列中放入更多張圖片。每列顯示的圖片數量也依顧客的裝置和視窗尺寸大小而有所不同。

  • 在圖片之間加入間距 - 在產品圖片周圍加入間距。

  • 顯示產品廠商 - 在產品圖片下方顯示產品品牌或廠商。若要顯示品牌或廠商,您必須先為產品新增廠商

  • 顯示排序功能 - 選取此選項即可讓顧客在商品系列頁面中對產品進行排序。

  • 顯示標籤篩選功能 - 選取此選項即可讓顧客以產品標籤篩選商品系列。

  • 分頁類型 - 若商品系列中的產品有多個頁面,請選擇是否要顯示頁面編號或「檢視更多」按鈕。

自訂商品系列區段

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

精選商品系列

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

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

  • 商品系列 - 選擇要顯示於此區段的商品系列。從您選取的商品系列中最多會顯示 50 項產品。
  • 圖片樣式 - 選擇將圖片設定為「直向/正方形」或「寬幅」。

    如果您的產品圖片是正方形或縱向,則「直/正方形」最為適合。

    如果您的圖片是長方形或橫向,則「」最為適合。

  • 圖片尺寸 - 選擇圖片尺寸。如果您顯示小型產品圖片,則可以在一列中放入更多張圖片。每列顯示的圖片數量也依顧客的裝置和視窗尺寸大小而有所不同。

  • 啟用圖片間距 - 在產品圖片周圍加入間距。

  • 顯示產品廠商 - 在產品圖片下方顯示產品品牌或廠商。若要顯示品牌或廠商,您必須先為產品新增廠商

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

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

電子報

您可以將訂閱電子報加入首頁。您可以收集客戶的電子郵件地址,以供電子郵件行銷使用。您可以在 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. 點擊「新增區段」。3. 點擊「影片」,然後點擊「選取」。4. 使用此設定來自訂影片區段。5. 點擊「儲存」。

自訂 HTML

您可以在「自訂 HTML」區段內用 HTML 程式碼為首頁建立自訂內容。舉例來說,您可以透過 HTML 設定文字方塊的格式、建立表格,或內嵌來自第三方網站的內容。

將自訂 HTML 區段新增至首頁

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

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

  3. 按一下「自訂 HTML」,然後輸入要新增到首頁的 HTML 程式碼。

  4. 點擊「儲存」。

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

免費試用