回部落格
網路開店版型商品頁設計套版客製

小店也能調版面:一行幾個、商品頁、購物車——不用工程師的套版客製

Kogio 編輯團隊7 分鐘閱讀

套版太死、builder 太難?自有店的店面設計提供區塊策展設定:首頁一行幾個、列表風格、圖比例、對齊,商品頁的圖庫排列 / 字級 / 描述展開,購物車縮圖比例,全部是下拉與開關、即時預覽,不用工程師、也不是拖拉畫布。誠實列出必填欄位 / 金額 / 金流物流不可調的鎖死邊界。

一句話總結

在「套版太死」和「builder 太難」之間有第三條路:自有店的店面設計已可使用區塊策展設定——首頁區塊的一行幾個(2 / 3 / 4)、列表風格、圖比例、間距、對齊,商品頁的圖庫排列 / 圖比例 / 資訊欄位置 / 字級 / 描述展開 / 加購鈕文字,購物車列縮圖比例。全部是下拉與開關、改了即時預覽,不用寫程式、也不是拖拉畫布;必填欄位、金額、金流物流這些交易相關的地方誠實鎖死、不給亂改。

調版面這件事,小店老闆常卡在兩個極端:一種是套版模板,選好一套就幾乎不能動,每家看起來都差不多;另一種是拖拉式的網站 builder,自由是自由,但要花時間學、還容易排出破版。多數人要的其實是中間:不用工程師、不用學 builder,但「一行幾個、圖怎麼放」這種常見的東西能自己調。這篇談自有店怎麼做到這個中間解。

「一行幾個」終於能自己調

過去版面「一行顯示幾個商品、卡片間距、圖片比例」這些,全綁死在你選的那套版型裡,賣家碰不到。現在每個首頁區塊多了一小組「版面設定」:主打商品這類區塊,可以逐區塊調一行幾個(2 / 3 / 4)、列表風格(格線 / 雜誌 / 輪播)、圖片比例(正方 / 直式 / 橫式)、間距(緊湊 / 一般 / 寬鬆)、對齊(靠左 / 置中);全店的商品頁格線也能設一行幾個。同一套版型、同一批商品,光靠逐區塊微調就能排出很不一樣的樣子。

  • 一行幾個:桌機主斷點設 2 / 3 / 4;手機由系統自動降階,你不用煩惱響應式會不會破版。
  • 列表風格:主打商品可切格線 / 雜誌 / 輪播三種既有排法。
  • 圖比例 / 間距 / 對齊:正方 / 直式 / 橫式、緊湊 / 一般 / 寬鬆、靠左 / 置中,各有固定檔位。
  • 每個設定都有「跟隨版型」的預設:不選就是沿用版型原本的樣子,不怕動壞。

商品頁也能排:圖怎麼放、字多大、描述展不展開

商品頁(單獨商品頁)是最影響轉單的一頁,現在也能調。可用的設定包括圖庫排列(主圖加縮圖列 / 大圖直落)、商品圖比例、資訊欄相對圖庫的位置(並排 / 圖片下方)、標題與內文字級、大價格的風格、加入購物車鈕的文字(從白名單選,例如「立即購買」「預購」),以及商品描述要全展開還是「看更多」摺疊。全都是下拉選單,改了左邊預覽即時反映。

商品頁可調的版面設定(全為下拉,即時預覽)
可調項選項(示意)備註
圖庫排列主圖 + 縮圖列 / 大圖直落cosmetic,不動規格選擇器結構
圖片比例正方 / 直式 / 橫式與規格圖正交,決定怎麼裁顯示
資訊欄位置與圖並排 / 圖片下方版面佈局,不動內容模型
字級 / 價格風格字級 S / M / L、價格數檔風格覆寫呈現樣式,不改金額
加購鈕文字白名單文字(立即購買 / 預購…)只改 idle 文字,鈕的行為不可改
描述顯示全展開 / 看更多摺疊純呈現,不動描述內容

購物車:能調的地方調,不能動的地方誠實說

購物車和結帳是全站最該謹慎的一面——它牽動金額計算、必填的收件資料、金流與物流。所以這裡我們把「可調」畫得很收斂,誠實告訴你哪些不能動:購物車目前可調的是列的縮圖比例(純外觀);至於必填欄位、金額、付款與運送方式,由系統統一、不開放賣家調整。這不是功能少,是刻意守住交易安全與資料最小化的邊界——會影響下單正確性與買家個資的地方,不該用版面設定去動它。

誠實邊界:所有版面設定都是下拉與開關、沒有拖拉畫布、沒有自由數值 / 自由 CSS(這是刻意的套版護欄,不是做不到);手機響應式由系統自動降階,不給賣家逐斷點調,以免排出破版。加入購物車鈕只改 idle 文字、行為不可改;購物車必填欄位 / 金額 / 金流 / 物流由系統統一,不可調整。店面設計(含逐區塊版面設定)自 Brand 完整版方案起提供,Store 輕量版為少數版型。自有店線上付款為搶先(部分帳號)。

這是「套版」和「builder」的中間解

刻意不做拖拉式 builder,是因為對一人或小團隊經營的店來說,自由畫布代表更長的學習曲線、更多破版風險,以及上線後更難維護。改用「有限選項的策展設定」,你拿到的是夠用的彈性——一行幾個、圖怎麼放、描述展不展開——又不必承擔 builder 的複雜與風險。而且店面設計的預覽和實際店面同源,改設定當下所見即所得,不會發生「後台看起來對、上線卻跑版」的落差。

延伸閱讀:自有品牌店

同主題文章

常見問題

不會寫程式,可以自己調一行顯示幾個商品嗎?

可以。首頁的主打商品這類區塊,可以逐區塊用下拉調一行幾個(2 / 3 / 4)、列表風格、圖比例、間距、對齊;全店商品頁的格線也能設。全部是下拉選單、改了即時預覽,不用寫程式。手機的排版由系統自動降階,你不必處理響應式。

商品頁和購物車能調到什麼程度?

商品頁可調圖庫排列、圖比例、資訊欄位置、字級、價格風格、加購鈕文字、描述展開與否(全是下拉、即時預覽)。購物車目前只開放列的縮圖比例(純外觀);必填欄位、金額、付款與運送方式由系統統一、不可調整——這是刻意守住交易安全與個資最小化的邊界。

這算是拖拉式的網站 builder 嗎?

不是。我們刻意不做自由拖拉畫布,而是提供「有限選項的策展設定」(全部下拉與開關、沒有自由數值或自由 CSS)。目的是給你夠用的彈性又不必承擔 builder 的學習成本與破版風險,對一人或小團隊經營的店比較養得起,上線後也比較好維護。

幾分鐘,多開一間免抽成的自有店

蝦皮繼續拉新客,自有店承接回頭客、免市集抽成,訂單與問答同一個後台管。這是多一條自己的通路,不是離開任何現有平台。