窗簾布料 B2B 批發官網 + 布料圖庫
2026
金葉窗簾布是專注布料批發供應的 B2B 廠商，服務對象是窗簾店、室內設計師、工程公司與傢飾業者，而不是一般消費者。品項涵蓋遮光布、透光紗、防水機能布、進口牛皮、合成皮、貓抓布、涼感布等數百款材質。
B2B 批發官網跟一般電商的邏輯完全不同：來訪者是同業，他們要看的是「你有沒有我要的料、庫存穩不穩、能不能小量試樣」，而不是把東西加進購物車。因此整站動線收斂到兩個目標——瀏覽布料品項、發出洽詢或索取樣品。
內容架構上刻意把「產品寫真」與「產品講堂」分開：前者是視覺化的布料圖庫，服務已經知道要找什麼的老客戶；後者是選料知識內容，服務還在比較材質的設計師與新客戶，同時承接長尾搜尋流量。
以視覺為主的布料陳列，讓同業快速瀏覽材質、紋理與配色，後台可自行分類上下架，不需工程師介入
選料知識與材質比較的內容區塊，服務還在評估的設計師與新客戶，同時為長尾關鍵字帶來自然搜尋流量
關於我們、品牌介紹、品牌認證、產品適用範圍四個子頁，把 B2B 客戶最在意的「這家可不可靠」拆開講清楚
全站 CTA 統一收斂到「洽詢合作／索取樣品」，避免 B2B 訪客在多個入口之間迷路
新品到貨、展會資訊與公告發布，後台支援排程與封面圖，讓老客戶固定回訪掌握貨源動態
貨源穩定、品質可靠、品項齊全、專業服務、彈性合作五項優勢明確條列，直接回應同業採購的決策點
全站伺服器端渲染，確保布料品項與知識內容都能被搜尋引擎完整檢索，而不是靠 JavaScript 才渲染得出來
布料品項、圖庫、文章、最新消息、洽詢收件與 SEO 欄位全部可由業主自行維護
一般電商把訪客導向購物車，但布料批發的成交在報價與樣品，不在線上結帳。因此整站不做購物車與金流，改把所有 CTA 收斂到「洽詢合作／索取樣品」，並在洽詢表單保留品項、數量級距與用途欄位，讓業務第一時間就知道對方是什麼規模的客戶。
前端以 Astro 5 建構並採伺服器端渲染。布料品項與產品講堂文章都在伺服器端組裝完成後輸出，確保 Google 與 AI 搜尋能取得完整 HTML；互動元件以 Vue 3 Islands 在需要時才 hydrate，兼顧效能。
布料是靠看的，資料模型以圖片為主體，每款材質可掛多張情境圖與細節圖，並以材質、功能、適用場景分類。後台上傳後自動產生多種尺寸變體，避免前台為了顯示小縮圖卻載入原始大圖。
「遮光布怎麼選」「貓抓布跟一般布差在哪」這類問題是設計師與末端消費者實際會搜尋的內容。把這些寫成獨立文章不只服務客戶，也是穩定的自然搜尋入口，長期為批發詢問帶來新客源。
布料品項、分類、文章、最新消息、洽詢收件與 SEO 設定全部透過 GraphQL 交換。型別安全的 Schema 讓前後端協作順暢，也讓日後要新增欄位（例如布寬、成分、耐光等級）時不必改動既有查詢。
後台以 Filament 建構，涵蓋布料與分類管理、圖庫、產品講堂文章、最新消息排程、洽詢收件與處理狀態、SEO 欄位。洽詢採未讀置頂，避免業務漏接新客戶。
最大的差別在轉換目標。電商要的是把商品加進購物車然後結帳；批發的成交發生在報價與樣品往返，價格會依數量與長期合作條件議定，根本沒有固定標價可以掛上去。所以這類網站不該硬做購物車，而是要把動線收斂到洽詢與索取樣品，並在表單裡先問清楚品項、數量級距與用途，讓業務接手時就已經知道對方的規模，不必再來回問一輪。
有，而且是長期最划算的獲客管道。窗簾店老闆與室內設計師在選料時會搜尋「遮光布等級怎麼分」「貓抓布是什麼材質」這類問題，這些搜尋量穩定且意圖明確。把知識寫成獨立文章，等於在客戶還在比較階段就先接觸到品牌；相較於只放產品圖的網站，這些內容也讓 Google 與 AI 搜尋更容易判斷這個網站在窗簾布料這個題目上是有專業度的。
會，如果不處理的話。布料網站最容易犯的錯是直接把攝影原圖丟上去，一張兩三 MB，開一頁要載十幾張。我們的做法是後台上傳後自動產生多種尺寸變體，前台依實際顯示尺寸取用對應版本，並全面採用 WebP 格式與延遲載入，讓縮圖列表不會為了顯示 300px 的小圖而下載 2000px 的原始檔。
