Pop

簡約式佈景主題的設計旨在提供方便存取的內容。Pop 適用於擁有中小型庫存的商店,採用大型側邊欄導覽設計,讓客戶可輕鬆存取內容。

使用 Pop 的線上商店範例

佈景主題編輯器

使用佈景主題編輯器來自訂您的佈景主題。使用佈景主題編輯器時,透過新增和編輯佈景主題區段,即可編輯要顯示在商店中的內容。您也可以用佈景主題設定變更商店外觀、風格和功能。

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

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

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

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

Pop包括以下的靜態區段:

  • 標誌和選單
  • 公告列
  • 頁尾
  • 產品頁面
  • 商品系列頁面
  • 商品系列清單頁面
  • 文章

動態區段

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

Pop 包括以下的動態區段:

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

產品頁面

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

  • 產品品牌或廠商
  • 圖片縮放
  • 相關產品
  • 數量選擇器
  • 動態結帳按鈕
  • 社交分享圖示

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

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

  2. 點擊「區段」。

  3. 按一下「產品頁面」。

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

  5. 如要允許客戶透過將滑鼠游標懸停在產品圖片上方來放大圖片,請勾選「啟用圖片縮放」。

  6. 如要在頁面底部顯示一系列相關產品,請勾選「顯示相關產品」。產品所屬的商品系列決定顯示的相關產品。如要顯示相關產品,您需要為產品建立商品系列,或將其新增至現有商品系列中。如果產品不是商品系列的一部分,就不會顯示相關產品。

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

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

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

  10. 點擊「儲存」。

電子報

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

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

  1. 點擊「區段」。

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

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

  4. 在「子文字」欄位中,輸入訂閱電子報的副標題預設文字為「促銷活動、新產品和特賣消息,直接送到您的收件匣。」

  5. 按一下「背景顏色」色樣並選擇顏色,以設定訂閱電子報區段的背景顏色。

  6. 點擊「儲存」。

影片

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

如要為首頁新增影片:

  1. 點擊「區段」。

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

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

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

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

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

  5. 點擊「儲存」。

自訂 HTML

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

將自訂 HTML 區段新增至首頁

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

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

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

  4. 點擊「儲存」。

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

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

  • 色彩
  • 字體
  • Favicon
  • 購物車頁面
  • 社交媒體
  • 結帳

色彩

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

調整顏色設定

  1. 按一下「佈景主題設定」。
  2. 按一下「顏色」。
  3. 若要開啟顏色選擇器,請點擊您要變更的內容類型顏色色樣。「最近選取項目」區域會顯示您最近為佈景主題選取過的顏色。「目前使用項目」區域會顯示您佈景主題其他部分目前正在使用的顏色。

    若要設定特定十六位進位顏色代碼,請點擊文字欄位以輸入顏色。

    若要將顏色設為透明,請在文字欄位中刪除十六進位代碼值。

  4. 點擊「儲存」。

字體

您可以指定線上商店裡文字的字型樣式和大小。您可以選擇系統字型或自訂字型。

建議您在商店使用系統字型。使用系統字型可避免系統將新字型下載到顧客的電腦,下載字型可能會對於商店載入速度帶來負面影響。在您顧客電腦上顯示的字型會依其操作系統而定。深入瞭解系統字型

自訂您的字體設定

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

  2. 按一下「字體」。

  3. 根據每一種文字類型點擊「變更」,即可使用字形選擇器:

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

    如果想查看全部可用的字形,請前往 Shopify 字形庫

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

  6. 若要變更字型字形風格,點擊目前的字型風格名稱,然後從下拉式選單中選擇新的字型樣式。

  7. 按一下「選擇」。

  8. 點擊「儲存」。

社交媒體

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

如要自訂社交媒體設定:

  1. 點擊「佈景主題設定」。

  2. 點擊「社交媒體」。

  3. 如要上傳社群分享圖片,請在「社群分享圖片」區域中,點擊「選擇圖片」或「探索免費圖片」。

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

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

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

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

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

  1. 點擊「儲存」。

在側邊欄中加入子選單

如要在主選單中加入下拉式選單,您需要在導覽頁面上建立選單。我們會在本文逐步引導您完成該流程。

最佳商店標誌尺寸

由於您的標誌是顯示在側邊欄中,因此比例簡潔的標誌在 Pop 佈景主題中顯示效果最佳。相對較低而寬的橫幅式標誌在此種佈景主題中顯示效果不佳。

標誌的最大寬度為 450 像素,最大高度為 200 像素。上傳標誌檔案時請調整尺寸,以符合這些限制。

理想的格式為 PNG。

減少側邊欄標誌周圍的空白

在移除由標誌上方和下方由 Pop 佈景主題增加的邊距前,請務必裁剪可能來自圖片本身的邊距。在將檔案上傳至 Shopify 前,您需要裁剪標誌圖案周圍的負空間或透明像素。

以下這個標誌的周圍有很多負空間:

以下為同一個標誌裁剪後 — 裁剪掉所有負空間後:

以下顯示在 Pop 佈景主題中使用未裁剪的標誌:

以下顯示在 Pop 佈景主題中使用已裁剪的標誌:

將裁剪過的標誌上傳至佈景主題資源後,您可以前往佈景主題編輯器以調整側邊欄的寬度。在「標頭和導覽」區段中,按照您的喜好提高「調整大小 > 電腦選單寬度」的值。

如果要減少標誌上方和下方的邊距,請按照下列步驟完成最後一個不受支援的做法:

  1. 在「資產」下方,按一下 timber.scss.liquid,在線上程式碼編輯器中開啟佈景主題樣式表,或前往此 URL

  2. 在檔案底部加入以下內容:

```sass {% comment %}以下媒體查詢功能會產生此內容:@媒體螢幕和 (最小寬度:1025 像素) {...} 僅在寬度 > 1025 像素時顯示側邊欄。{% endcomment %}

@include at-query ($min, $large) { .header-logo{ margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. 儲存您的檔案。

編輯產品頁面的設定

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

  • 產品品牌或廠商
  • 圖片縮放
  • 相關產品
  • 數量選擇器
  • 動態結帳按鈕
  • 社交分享圖示

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

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

  2. 點擊「區段」。

  3. 按一下「產品頁面」。

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

  5. 如要允許客戶透過將滑鼠游標懸停在產品圖片上方來放大圖片,請勾選「啟用圖片縮放」。

  6. 如要在頁面底部顯示一系列相關產品,請勾選「顯示相關產品」。產品所屬的商品系列會決定顯示的相關產品。如要顯示相關產品,您需要為產品建立商品系列,或將其新增至現有商品系列中。如果產品不是商品系列的一部分,就不會顯示相關產品。

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

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

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

  10. 點擊「儲存」。

Pop 的最佳產品圖片類型

較高解析度的照片在 Pop 佈景主題中會看起來更加精緻而專業,因此我們建議您提供至少寬 1024 高 1024 像素的圖片。必要時會自動縮減圖片,因此最好挑選品質較佳的圖片。

如果使用「圖片縮放」功能,更需要使用高解析度的照片,因為您可以在「產品頁面」區段的「佈景主題編輯器」中啟用更高解析度的照片。

理想情況下,您產品的精選圖片會使用相同的寬高比,以便在商品系列頁面上呈現最佳視覺效果。

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

免費試用