Supply

Supply 是一款簡潔且易於導覽的佈景主題,非常適合擁有大量庫存和多個商品系列的商家。其特色包括醒目的導覽區、多個首頁商品系列、側邊欄篩選,以及與產品評論應用程式輕鬆整合。

使用 Supply 的線上商店範例

Supply 適用於符合以下條件的客戶:

  • 超過 50 種產品
  • 超過 5 個商品系列
  • 大型選單。

佈景主題編輯器

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

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

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

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

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

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

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

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

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

Supply 包括以下的靜態區段:

  • 標頭
  • 頁尾
  • 產品頁面
  • 商品系列頁面
  • 商品系列清單頁面
  • 文章頁面

動態區段

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

Supply 包括以下的動態區段:

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

標頭

Supply 可為您商店的標頭提供一些獨特的設定。您可以選擇要在標頭中顯示的選單、上傳標誌以及向客戶顯示訊息:

如要自訂標頭:

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

  2. 按一下「標頭」

  3. 從「選單」清單中選擇要顯示的選單。

商標

您可以使用 Supply,在商店的標頭中加入標誌。如果您使用自訂標誌,最佳格式為包含透明底色的 .png 檔。

Supply 搭配 400 像素寬的標誌可呈現最佳視覺效果。您可以使用「自訂標誌寬度」欄位變更圖片的寬度。請勿將值提高到超出標誌圖片原本的寬度。否則可能會導致圖片失真和畫質減損。

訊息

您可以使用 Supply,在商店的標頭中輸入最多 55 個字元的訊息。此訊息會顯示在搜尋列上方:

例如,您可以輸入問候訊息、宣傳特賣或新的商品系列,或通知客戶運送延誤。

如要新增標頭訊息:

  1. 在「訊息」區域中,輸入標頭訊息。

  2. (選用) 對部分文字套用粗體或斜體樣式。

  3. 按一下「儲存」

頁尾

您可以在頁尾區段中編輯顯示在商店每一頁底部的內容。您可以在頁尾加入以下功能:

  • 社交媒體圖示
  • 付款圖示
  • 橫向選單
  • 訂閱電子報
  • 自訂文字
  • 快速連結

顯示快速連結選單、聯絡資訊、電子報訂閱、橫向選單、版權文字和付款圖示的網站頁尾區段。

如要自訂頁尾區段:

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

  2. 按一下「區段」

  3. 按一下「頁尾」。

  4. 勾選「顯示社交媒體圖示」,以便在頁尾顯示社交媒體圖示。從社交媒體佈景主題設定中選擇要連結的帳戶。

  5. 勾選「顯示付款圖示」,以便在頁尾新增付款圖示 (例如 Mastercard 或 PayPal)。

  6. 從「法律選單」區域將橫向選單加入頁尾底部。如要編輯預設選單,請按一下「編輯選單」。如要變更為其他選單,請按一下「變更」,然後選擇現有選單或按一下「建立選單」。

  7. 在「內容」區域的頁尾最多可新增九個內容區塊:

- 按一下「新增內容」以新增內容區塊。從以下選項中選擇區塊的類型: - 選單 - RTF 文字 - 訂閱電子報

- 按一下 ⁞⁞ 圖示以移動內容區塊並將區塊拖曳至其他位置。 - 若要移除內容區塊,請依序按一下區塊和「移除內容」。 - 若要自訂內容區塊,請按一下區塊並編輯設定。

  1. 按一下「儲存」

產品頁面

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

  • 圖片縮放
  • 數量選擇器
  • 庫存資訊
  • 產品品牌或供應商
  • 省錢資訊
  • 相關產品
  • 動態結帳按鈕
  • 社交分享圖示
  • 客戶評論

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

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

  2. 按一下「區段」

  3. 按一下「產品」。

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

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

  6. 如要在庫存不足時顯示剩餘庫存,請勾選「現貨少於 10 項時顯示庫存」。您需要為產品啟用庫存管理功能才能顯示此訊息。

  7. 如要顯示售罄產品何時會有現貨供應的訊息,請勾選「在售完時顯示即將調貨的訊息」。訊息中會顯示以下內容:「(日期) 後會有現貨」。您需要為產品建立調貨功能才能顯示此訊息。

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

  9. 如要顯示客戶省下的金額,請勾選「顯示省下金額」。省下金額是產品定價與售價之間的差額。省下的金額會無條件捨去為最接近的整數美元。例如,如果價差 25.51 美元,則省下的金額為「25 美元」。如要顯示已省下的金額,您需要設定產品的售價。

  10. 如要顯示售價,請勾選「顯示售價」。

  11. 若要在頁面底部顯示一系列相關產品,請勾選「顯示相關產品」。畫面顯示的相關產品會視產品所屬商品系列而定。若要顯示相關產品,您需要為產品建立商品系列,或將其加入現有的商品系列。如果產品不屬於任何商品系列,就不會顯示相關產品。

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

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

  14. 如要顯示產品的客戶評論,請勾選「啟用產品評論」。如要顯示評論,您需要安裝免費的 Shopify 產品評論應用程式並接收產品評論。

  15. 如要設定變體選擇器、「加入購物車」按鈕和動態結帳按鈕的尺寸,請從「變體選擇器和按鈕尺寸」下拉式選單中選擇尺寸。

  16. 按一下「儲存」

商品系列頁面

您可以使用 Supply,在商品系列頁面側邊欄選單中指定商品系列的排序方式。您可以選擇按照產品標籤或篩選群組進行排序。

  1. 在您商店的佈景主題編輯器預覽中,開啟商品系列頁面。

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

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

  4. 從「每列產品數」下拉式清單中,選擇要在每一列中顯示的產品數量。

  5. 從「每頁列數」下拉式清單中,選擇要顯示的列數。

  6. 在「側邊欄產品篩選」下,選擇按產品標籤或按篩選群組來排序商品系列。

  7. 如要在商品系列中的產品降價時顯示售價,或者要與競爭對手的價格進行比較,請勾選「顯示售價。」

  8. 如要顯示產品降價時客戶省下的金額,請勾選「顯示省下金額」。

  9. 如要允許在商品系列頁面上顯示產品評論,請勾選「啟用產品評論」。

  1. 按一下「儲存」

精選商品系列

使用「精選商品系列」區段,選擇在您的首頁上顯示最多 6 個產品的商品系列。客戶按下首頁的精選商品系列後,畫面就會顯示該商品系列的精選產品。如果沒有精選產品,就會顯示該商品系列中的第一張產品圖片。

如要在首頁顯示精選商品系列:

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

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

  3. 在「內容」區域中,按一下「商品系列」。

  4. 從「商品系列」下拉式清單中,選擇要顯示的商品系列。

  5. 繼續新增商品系列,直到已選擇所有要顯示的商品系列。

  6. 按一下「儲存」

投影片輪播

您可以使用「投影片輪播」區段,上傳用於投影片輪播的圖片。您可以選擇是否要自動旋轉投影片輪播中的圖片,並且可以設定圖片旋轉的頻率 (以秒為單位)。

秘訣:如果投影片輪播中的圖片包含文字,請設定較慢的轉場速度,讓您的客戶有足夠的時間可以看清楚每張投影片。

您可以使用 Supply 為首頁選擇最多 6 張投影片的圖片。您可以為每張投影片加入一個 URL 連結,讓客戶可以按一下該連結以開啟商店的頁面。

建議每張投影片的圖片寬 1000 像素,高 500 像素。如果投影片輪播使用具有不同高度的圖片,在投影片轉場時可能會出現圖片跳片或不連貫的情形。

如要自訂投影片輪播內容:

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

  2. 按一下「幻燈片」

  3. 如果要自動旋轉投影片的圖片,請在「設定」區域中勾選「自動旋轉投影片」。

  4. 從「轉場時間」下拉式清單中,選擇旋轉頻率 (以秒為單位)。

如要新增圖片投影片:

  1. 在「內容」區域中,按一下「圖片」。

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

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

  1. 如果要將加入投影片的連結,請執行以下操作:

- 如要將投影片上的文字連結到商店的頁面,請按一下「連結 URL」欄並選擇頁面。 - 如果要將投影片上的文字連結到網站,請將網站的 URL 貼在「投影片連結」欄位中。

  1. 按一下「儲存」

電子報

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

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

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

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

  2. 按一下「區段」

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

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

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

  6. 按一下「儲存」

影片

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

如要為首頁新增影片:

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

  2. 按一下「區段」

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

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

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

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

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

  6. 按一下「儲存」

自訂內容

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

若要為首頁新增自訂內容:

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

  2. 按一下「區段」。

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

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

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

  6. 按一下「儲存」。

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

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

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

顏色

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

調整顏色設定

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

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

  3. 按一下「顏色」。

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

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

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

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

  1. 按一下「儲存」。

印刷樣式

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

自訂您的字體設定

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

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

  3. 按一下「字體」。

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

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

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

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

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

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

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

  8. 按一下「儲存」。

Favicon

您可以使用 Supply,在商店中加入 Favicon。Favicon (收藏圖示) 是代表您網站的小圖示,並在此圖示出現時提供快速鍵,例如:

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

使用 Favicon 有助於塑造您商店的品牌形象並為您的網站提供精美外觀。建議 Supply 的 Favicon 尺寸為 16 x 16 像素。

如要新增 Favicon:

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

  2. 按一下「Favicon」。

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

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

  1. 按一下「儲存」

購物車

您可以使用 Supply,自訂購物車頁面以納入訂單備註,並從四種購物車頁面樣式中選擇。

如要存取購物車設定:

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

  2. 按一下「購物車」。

啟用訂單備註

您可以使用 Supply,在購物車頁面上提供一個讓客戶填寫訂單備註的欄位,以作為贈禮訊息、特殊要求和配送指示。

購物車類型

Supply 提供四種購物車類型:

  • 如果使用導覽匣購物車類型,從頁面頂端向下滑動即可開啟購物車。當購物車關閉時,購物車內容會顯示折疊狀態:
  • 翻轉式購物車類型與導覽匣購物車類型類似,只是在購物車開啟和關閉時會出現翻轉動畫:
  • 互動視窗購物車類型是顯示在頁面內容頂端的彈出式視窗。按一下「X」或彈出式視窗外面即可關閉彈出式視窗。
  • 頁面式購物車類型是採用線上商店中的頁面。客戶可以按一下標頭中的購物車連結或將商品加入購物車來存取購物車頁面。

社交媒體

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

如要自訂社交媒體設定:

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

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

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

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

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

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

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

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

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

  1. 如要變更分享按鈕的樣式,請從「按鈕樣式」選單中選擇樣式。

  2. 按一下「儲存」

價格格式

您可以使用 Supply 來選擇產品價格在商店中的顯示方式。

如要在 Supply 中設定價格格式選項:

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

  2. 按一下「價格格式」。

  3. 如果您以使用美分的貨幣來進行銷售,請勾選「將美分顯示為上標」即可以上標顯示價格:

結帳

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

圖片秘訣

Supply 的最佳產品圖片類型

解析度較高的照片在 Supply 中看起來會更加精緻且專業,因此建議您提供的圖片寬度和高度至少都須達 1024 像素。系統會按照需要自動縮小圖片。

如果勾選「啟用圖片縮放」,更需要使用高解析度的照片,因為您可以在佈景主題編輯器預覽中開啟產品頁面,然後按一下「區段」索引標籤的「產品」,來啟用更高解析度的照片。

產品照片的最佳寬高比為正方形。

縮小標頭

您可以透過幾種方法縮減頁面的頂端區段。

如果標誌太大,可以在佈景主題設定中調整最大寬度來縮小尺寸。縮減標誌寬度也會降低高度,因為 Shopify 會在縮小標誌時維持原始比例。使用佈景主題編輯器,在「標頭」區段中調整「自訂標誌寬度」的數值。預設像素值為 305。使用較小的像素值可縮減標誌的大小,從而降低標頭的高度。

您的標誌可能還包含不可見或白色像素,這些像素會加入上下的空白中。您可以使用 Photoshop 等程式來裁剪標誌圖片中的這些像素。標誌裁剪後,請使用佈景主題編輯器重新上傳標誌。裁剪標誌圖片中的這些空白區域可明顯降低標頭的高度。

縮小投影片輪播

請使用橫向圖片,亦即寬度大於高度的圖片。

雖然佈景主題編輯器建議上傳寬 1000 像素、高 500 像素的圖片,但您可以使用較小的圖片。建議寬度為 1000 像素,以便在較大畫面顯示投影片時,左右兩側不會有任何留白。在投影片輪播中,寬度較小的圖片則會置於畫面中央:

導覽秘訣

以下秘訣可協助您在使用 Supply 時改善商店的導覽功能。

新增下拉式選單

如要在主選單中加入下拉式選單,您需要在導覽頁面上建立選單

主選單最佳作法

如果「主選單」的項目太多而無法置入同一行中,最後無法置入的連結就會加入「更多」下拉式選單中。

這項操作並未受「主選單」連結數量的嚴格限制,但建議最好將連結數量維持在五或六個。若要納入更多連結,您可以:

  • 找到「佈景主題設定」索引標籤,減少「印刷樣式」中「主選單字體大小」,即可縮小導覽連結。
  • 每個連結使用較少的字元。例如,您可以將「常見問題集」變更為「FAQ」,將「聯絡我們」更改為「聯絡」,將「商家目錄」更改為「商店」,並將所有的「和」更改為「&」。

導覽區中包含太多項目可能會造成您的網站太難使用。而且選單項目太多,客戶可能會略過重要項目。請試著將導覽區限制在五或六個項目。如果要讓客戶存取超過六個頁面,請使用下拉式選單。

常見的錯誤是在「主選單」中加入每個商品系列的連結。請試著改為在「商店」或「目錄」連結下方的下拉式選單中列出商品系列。您也可以將商品系列細分為不同群組,再為每個群組設定一個下拉式選單。或者,您可以使用產品標籤來建立產品的子類別

移除側邊欄

若要移除商店的側邊欄,您必須在兩個佈景主題檔案中加入一些程式碼。

  1. 「區段」目錄中,按一下 collection-template.liquid

  2. 在檔案中搜尋 has_sidebar,刪除以下幾行程式碼:

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. 按一下「儲存」

  2. 「區段」目錄中,按一下 collection-list-template.liquid

  3. 在檔案中搜尋 has_sidebar,刪除以下幾行程式碼:

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. 按一下「儲存」

產品秘訣

以下祕訣可協助您使用 Supply 展示產品。

使用進階群組篩選

如果您擁有多項產品,不妨啟用子群組來協助您的客戶對產品進行分類:

  1. 定義群組。在上圖中顯示了「品牌」、「焦距」和「解析度」這三個群組。

  2. 將所有產品轉存為 .csv

  3. 使用「群組_標籤名稱」的格式在所有現有標籤前面加上您希望其所屬群組的名稱。例如可能將標籤改為以下格式:品牌_Canon焦距_18-55mm 以及解析度_12 MP。底線的左邊是群組名稱,右邊是產品的標籤。底線的兩側都可能包含空格。

  4. 儲存您的 .csv 檔並將產品匯入商店。請確認您在上傳檔案時已勾選「取代目前具有相同識別代號的產品」,以免重複建立相同產品。

  5. 在佈景主題編輯器預覽中開啟商品系列頁面。在「區段」索引標籤中,按一下「商品系列」,然後勾選「依群組」選項。

重新排序篩選群組和標籤

群組會按字母順序排序,群組內列出的標籤也會按字母順序排列。Shopify 專家可以協助您自訂順序。

定價秘訣

以下秘訣可協助您在使用 Supply 時設定定價。

停用銷售額的捨入功能

  1. 在左側的「資產」下方,按一下 timber.scss.liquid 連結,在線上程式碼編輯器中開啟佈景主題樣式表。

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

.sale-tag sup {
   display: inline;
   top: 0;
   font-size: 100%;

   &:before {
    content: '.';
   }
 }
  1. 按一下「儲存」

購物車秘訣

當您在 Supply 中加入 JavaScript 時,以下秘訣可確保您的商店購物車正常運作。

變更購物車類型,以便執行進階的 JavaScript

在 Supply 中,您加入 cart.liquid 的任何 JavaScript 都不會在導覽匣或互動視窗購物車中執行。只有在您將 /cart 附加到商店的 URL 時才會執行。例如:http://your.store.url/cart

如果要將以下任一功能新增至購物車頁面,請務必將購物車類型設定為「頁面」:

  • 運費計算機
  • 多種貨幣
  • 禮品包裝
  • 購物車屬性驗證
  • 日期選擇器
  • 「我同意接受條款」核取方塊。

如要將購物車類型變更為「頁面」:

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

  2. 按一下「購物車」。

  3. 從「購物車類型」下拉式清單中,選擇「頁面」。

  4. 按一下「儲存」

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

免費試用