Pop

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

使用 Pop 的線上商店範例

佈景主題編輯器

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

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

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

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

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

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

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

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

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

Pop包括以下的靜態區段:

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

動態區段

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

Pop包括以下的動態區段:

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

產品頁面

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

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

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

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

  2. 按一下「區段」

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

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

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

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

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

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

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

  10. 按一下「儲存」

電子報

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

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

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

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

  2. 按一下「區段」

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

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

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

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

  7. 按一下「儲存」

影片

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

如要為首頁新增影片:

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

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

  2. 按一下「區段」。

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

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

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

  6. 按一下「儲存」。

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

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

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

顏色

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

調整顏色設定

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

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

  3. 按一下「顏色」。

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

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

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

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

  1. 按一下「儲存」。

印刷樣式

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

自訂您的字體設定

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

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

  3. 按一下「字體」。

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

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

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

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

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

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

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

  8. 按一下「儲存」。

社交媒體

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

如要自訂社交媒體設定:

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

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

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

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

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

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

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

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

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

  1. 按一下「儲存」

在側邊欄中加入子選單

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

最佳商店標誌尺寸

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

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

理想的格式為 PNG。

在行動裝置上放大標誌尺寸

首先,為了在任何版面配置中讓標誌顯得更大,在將檔案上傳至 Shopify 前,請務必修剪標誌圖案周圍的所有負空間或透明像素。

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

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

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

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

一旦您知道標誌由於其包含的負空間而沒有變得更小,您就可以調整行動裝置標頭的高度,讓標誌有展開的空間。如此一來,您的標誌就會變大。

請前往「佈景主題編輯器」,在「標頭和導覽」區段中,提高「調整大小 > 行動裝置選單高度」的值。

在側邊欄中放大標誌尺寸

首先,為了在任何版面配置中讓標誌顯得更大,在將檔案上傳至 Shopify 前,請務必修剪標誌圖案周圍的所有負空間或透明像素。

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

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

以下顯示上傳到 Pop 佈景主題且包含負空間的標誌:

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

一旦您知道標誌由於包含負空間而沒有變小,您就可以調整側邊欄的寬度,以便讓標誌有展開的空間。如此一來,您的標誌就會變大。

前往佈景主題編輯器,在「標頭和導覽」區段中,提高「調整大小 > 電腦選單寬度」的值。

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

在移除由標誌上方和下方由 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 銷售商品了嗎?

免費試用