Boundless

Boundless 是一款以攝影為主的佈景主題,透過最簡潔的 UI 設計,提供全畫面的攝影功能。Boundless 主要針對行動裝置,且適用於中型到大型庫存的商店。

使用 Boundless 的線上商店範例

佈景主題編輯器

使用佈景主題編輯器來自訂您的佈景主題。佈景主題編輯器分為「區段」「佈景主題設定」兩個部分。

有「區段」和「佈景主題設定」的佈景主題編輯器工具列

您可以使用區段來修改商店不同頁面的內容和版面配置。您可以使用佈景主題設定來自訂商店的字體和顏色,以及變更社群媒體連結和結帳設定。

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

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

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

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

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

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

Boundless 包括以下的靜態區段:

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

動態區段

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

Boundless 包括以下的動態區段:

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

標頭

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

標頭區段包括下列設定:

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

自訂標頭

  1. 找到 Boundless 並按一下「自訂」

  2. 按一下「標頭」

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

  4. 按一下「儲存」

側邊欄選單

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

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

如要自訂側邊欄選單:

  1. 按一下「區段」

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

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

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

  5. 按一下「儲存」

投影片輪播

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

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

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

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

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

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

將投影片新增至您的首頁

  1. 找到 Boundless 並按一下「自訂」

  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. 找到 Boundless 並按一下「自訂」

  2. 按一下「區段」

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

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

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

  6. 按一下「儲存」

RTF 文字

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

  1. 按一下「區段」索引標籤。

  2. 按一下「RTF 文字」。

  3. 輸入並格式化文字。

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

  5. 按一下「儲存」

影片

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

如要為首頁新增影片:

  1. 找到 Boundless 並按一下「自訂」

  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. 找到 Boundless 並按一下「自訂」

  2. 按一下「區段」。

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

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

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

  6. 按一下「儲存」。

主題設定 您可以透過佈景主題設定來自定線上商店的顏色和字體。您也可以建立您的社群媒體帳戶連結、編輯購物車設定,並新增 favicon。

Boundless 包括以下的佈景主題設定:

  • 顏色
  • 印刷樣式
  • 購物車
  • 社交媒體
  • Favicon
  • 結帳

顏色

您可以指定線上商店內各部分的顏色。

調整顏色設定

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

  2. 按一下「佈景主題設定」。

  3. 按一下「顏色」。

  4. 根據每種內容類型按一下顏色樣本,即可使用顏色挑選器。

    佈景主題編輯器內的顏色挑選器

- 「最近選擇」區域會顯示您最近為佈景主題選擇過的顏色。 - 「目前使用」區域會顯示您佈景主題其他部分目前正在使用的顏色。

若要將顏色設定為透明,請按一下「」。

  1. 按一下「儲存」。

印刷樣式

您可以指定線上商店裡文字的字型風格和大小。

自訂您的字體設定

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

  2. 按一下「佈景主題設定」。

  3. 按一下「字體」。

  4. 根據每一種文字類型按一下「變更」即可使用字形挑選器:

    字形挑選器上的「變更」按鈕

  5. 您可以使用搜尋欄位或按一下「載入更多」查看有哪些字形。

    如果想檢視全部可用的字形,請看 Shopify 字形庫

  6. 按一下要使用的字體名稱。

  7. 若要變更粗體或斜體等字形風格,請按一下「標準」。然後找到您想使用的風格,按一下旁邊的「選擇」:

    字形挑選器可以挑選字體的粗細。

  8. 按一下「儲存」。

購物車

Boundless 可讓您透過選擇購物車類型並啟用客戶的訂單備註,來自訂購物車頁面。

Boundless 佈景主題援 2 種購物車類型:

  • 將商品加入購物車時,「頁面」會將客戶重新導向至您的購物車頁面。

  • 當商品加入購物車時,「導覽匣」會開啟頁面側邊的導覽匣,並提示使用者進入結帳頁面。

Boundless 還可允許您的客戶在訂單中傳送特別指示給您

如要在 Brooklyn 中設定購物車選項:

  1. 按一下「佈景主題設定」。

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

  3. 在「購物車類型」清單中選擇購物車類型。

  4. 如果要讓客戶在結帳時提供訂單備註,請勾選「啟用訂單備註」。

  5. 按一下「儲存」

社交媒體

您可以為產品和部落格貼文加入社交分享按鈕,以及指向您的社交媒體帳戶的連結。

如要自訂社交媒體設定:

  1. 找到 Boundless 並按一下「自訂」

  2. 按一下「佈景主題設定」。

  3. 按一下「社交媒體」。

  4. 如要上傳社交分享圖片,請在「社交分享圖片」區域中,按一下「選擇圖片」或「探索免費圖片」。

  5. 如要新增指向您社交媒體帳號的連結,請前往「帳號」區域,在提供的欄位中輸入指向您帳號的連結。輸入完整的連結,例如 https://instagram.com/shopifyhttps://twitter.com/shopify

    指向您社交媒體帳戶的連結會顯示在您線上商店的頁尾。

  6. 如要在您的產品和部落格貼文中新增社交分享按鈕,請在「分享選項」區域中勾選任一或所有核取方塊。

    您可以加入以下的分享按鈕:

- 分享至 Facebook - 在 Twitter 上發佈推文 - 在 Pinterest 上收藏為釘圖 (不適用於部落格貼文分享)

  1. 按一下「儲存」

Favicon

您可以上傳收藏的圖示或 Favicon,並在以下位置顯示您的標誌,協助您塑造線上商店的品牌形象:

  • 您的網路瀏覽器分頁
  • 您的網路瀏覽器的歷程記錄
  • 您桌面上的圖示
  • 線上商店名稱旁邊 (如果線上商店已加入書籤的話)。

如要上傳 Favicon:

  1. 按一下「佈景主題設定」索引標籤。

  2. 按一下「Favicon」。

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

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

秘訣:建議的 Boundless 大小為 32 x 32 像素。

  1. 按一下「儲存」

結帳

此區段可讓您自訂商店的結帳流程。按一下此處進一步瞭解商店結帳頁面的詳細資訊。

在動作列中設定子選單

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

在建立動作列的商品系列連結前,請先建立您的商品系列。或者,您可以連結至「所有產品」頁面,直到您建立要連結的商品系列。

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

免費試用