Boundless 的區段

區段即是可以決定您線上商店中各頁面版面配置,並可由您自訂的內容方塊。

  • 首頁區段包含幻燈片或電子報註冊等功能,您可以新增、重新排列或移除這些功能。首頁上最多可以有 25 個區段。

  • 不同的頁面類型有不同的區段。舉例來說,產品頁面區段就會決定您線上商店中每個產品頁面的版面配置。

  • 頁面區段一定會位於您線上商店內的特定位置。您可以自訂這些區段,但是無法重新排列或移除。

  • 每項佈景主題都有固定的區段,如標頭、頁尾等等,這些區段會顯示在線上商店的所有頁面上。

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

Boundless 包括以下的靜態區段:

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

動態區段

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

Boundless 包括以下的動態區段:

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

標頭

您佈景主題的標頭是顯示在商店每個頁面頂部的區段。

標頭區段包括下列設定:

  • 商標 - 將商標新增至標頭。
  • 首頁商標 - 新增僅在您首頁上顯示的商標。首頁商標會在素材輪播上顯示,因此請選擇可在圖片上方清楚顯示的商標版本。
  • 自訂商標寬度 (單位為像素) - 設定商標尺寸。

自訂標頭

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

  2. 點擊「標頭」。

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

  4. 點擊「儲存」。

側邊欄選單

側邊欄選單就像是商店的目錄。無論客戶在哪裡,選單按鈕都會顯示商店的主選單和頁尾選單:

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

如要自訂側邊欄選單:

  1. 點擊「區段」。

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

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

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

  5. 點擊「儲存」。

素材輪播

您可以建立首頁素材輪播,最多可以輪播五張圖片。

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

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

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

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

  • 投影片高度 - 設定投影片高度。選擇「配合第一張圖片投影片高度」,以第一張圖片的高度做為投影片高度的基礎。
  • 自動輪播投影片 - 設定自動開始素材輪播。
  • 變更投影片的頻率 - 選擇變更投影片的頻率。
  • 文字與圖示 - 選擇輪播投影片上面的文字與圖示顏色。
  • 圖片疊加層 - 在圖片投影片上疊加層一層顏色。疊加層顏色可讓素材輪播文字更容易閱讀。
  • 不透明度 - 設定疊加層的不透明度。
  • 圖片 - 將圖片投影片新增至素材輪播。
  • 圖片位置 - 選擇圖片中最重要的區域,當作投影片的焦點。
  • 標題 - 新增標題到投影片。
  • 按鈕文字 - 為投影片新增含有文字標籤的按鈕。
  • 按鈕連結 - 將您的按鈕連結至線上商店的其他部分。

將投影片新增至您的首頁

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

  2. 按一下「幻燈片」

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

  4. 點擊「儲存」。

動作列

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

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

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

提示:

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

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

如要自訂動作列:

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

  2. 按一下「動作列」。

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

  4. 點擊「儲存」。

頁尾

您可以使用 Boundless 在頁尾內容中顯示選單。

如要自訂商店的頁尾:

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

  2. 點擊「頁尾」。

  3. 在「選單」清單中,選擇要在頁尾顯示的選單。

  4. 點擊「儲存」。

產品

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

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

您也可以略過第一張產品圖片、設定圖片的樣式,並選擇產品表單的寬度。

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

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

  2. 點擊「區段」。

  3. 按一下「產品」。

  4. 如要略過第一張產品圖片,請勾選「略過第一張產品圖片」。

    這表示第一張產品圖片僅顯示在商品系列頁面上,而不會顯示在產品頁面上。您可以使用此選項,將第一張產品圖片設計為在商品系列頁面上呈現最佳外觀,並將其他產品圖片設計為在產品頁面提供的較大空間,以最佳方式呈現:

    顯示包含第一張產品圖片的商品系列頁面以及包含第二和第三張產品圖片的產品頁面的範例

  5. 如要設定圖片樣式,請在「圖片樣式」下拉式選單中選擇「高/方形」或「寬幅」。

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

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

  8. 如要顯示社交分享圖示,請勾選「啟用產品分享」。

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

  10. 如要設定產品表單的寬度,請在「產品表單寬度」下拉式選單中,選擇「小型」或「大型」。

  11. 點擊「儲存」。

新增或移除產品推薦

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

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

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

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

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

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

  6. 點擊「儲存」。

商品系列

Boundless 包括適用於商品系列頁面的多個排序和篩選、外觀和分頁選項。

  1. 在佈景主題預覽中,開啟商品系列頁面。

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

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

  4. 在「外觀」區域中,設定以下選項:

- 在「圖片樣式」清單中,選擇將產品圖片的圖片方向設定為「高/方形」或「寬幅」。

  • 在「圖片尺寸」清單中,選擇產品圖片的大小。

  • 如果要增加圖片間距,請勾選「增加圖片間距」

  • 如要在產品圖片下方顯示供應商或品牌名稱,請勾選「顯示產品供應商」。

  1. 在「排序和篩選」區域中,設定以下選項:
  • 如果要顯示排序選項清單,請勾選「顯示排序選項」。

  • 如果要顯示允許客戶按標籤篩選的清單,請勾選「顯示標籤篩選條件」。

  1. 在「分頁」區域中,從「分頁類型」清單中選擇要顯示編號頁面或「查看更多」按鈕。

  2. 點擊「儲存」。

精選商品系列

佈景主題編輯器的「精選商品系列」區段中,「圖片樣式」選項可讓您變更商品系列和產品頁面顯示圖片的方式:

  • 如果您的產品圖片是正方形或縱向,則「高/方形」最為適合。
  • 如果您的圖片是矩形或橫向,則「寬幅」最為適合

圖片尺寸」選項可決定產品圖片在商品系列頁面上的大小。如果您顯示小型產品圖片,則可以在一行中放入更多張圖片。

每行顯示的圖片數量也視客戶的裝置 (桌面或行動裝置) 和視窗大小而定。

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

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

  3. 從「商品系列」清單中選擇商品系列。從您選擇的商品系列中最多會顯示 50 項產品。

  4. 從「圖片樣式」清單中,選擇將圖片設定為「高/方形」或「寬幅」。

  5. 在「圖片尺寸」清單中,選擇圖片尺寸。

  6. 要增加產品圖片周圍的間距,請勾選「增加圖片間距」。

  7. 如要顯示產品供應商或品牌名稱,請勾選「顯示產品供應商」。

  8. 點擊「儲存」。

電子報

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

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

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

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

  2. 點擊「區段」。

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

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

  5. 在「副標題」欄位中,輸入訂閱電子報的副標題。

  6. 點擊「儲存」。

RTF 文字

使用「RTF 文字」區段提供您要在首頁上顯示的任何書面內容,或嵌入在 Shopify 管理員中建立的任何頁面。例如,您可以透過嵌入部落格頁面來展示即將舉辦的活動,或顯示包含以下內容的頁面:

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

  2. 按一下「RTF 文字」。

  3. 輸入並格式化文字。

  4. 如果要展示商店中的精選頁面,請按一下「新增內容」,然後按一下「頁面」。從下拉式選單中選擇要展示作為首頁的頁面。

  5. 點擊「儲存」。

影片

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

如要為首頁新增影片:

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

  2. 點擊「區段」。

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

  4. 在「標題」欄中輸入影片的標題。

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

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

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

  6. 點擊「儲存」。

自訂 HTML

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

若要為首頁新增自訂 HTML:

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

  2. 按一下「區段」。

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

  4. 「進階版面配置」區域中,按一下「自訂 HTML > 新增」

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

  6. 按一下「儲存」。

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

免費試用