Part 4
圖片相關控制：④ 圖片寬度（隱藏／50%／66%／100%） ⑤ 圖片縮放（放大鏡）與縮圖位置。版面（輪播↔網格）在同一區切換。
輪播 Carousel ＋ 50%（預設）：一張大圖＋底部縮圖列，點縮圖切換。適合大多數商品。
網格 Grid ＋ 100%：所有圖片攤成 2 欄大圖並排，顧客一次看完全部細節。適合圖多、想展示多角度的商品。
自訂面板 A：圖片與版面（切換對照）
商品頁最影響第一印象的就是圖片怎麼呈現。這一章逐項講「自訂」面板的圖片與版面控制，並用切換前後對照圖讓你一眼看懂每個選項的差別。這些是全站商品頁共用的設定。
路徑：商品頁 › 編輯 › 自訂 › 點商品 › 圖片寬度／版面／縮放
A. 這一章要調的四個控制
| 控制 | 可選值 | 效果 |
|---|---|---|
| 圖片寬度 | 隱藏 / 50% / 66% / 100% | 商品圖占版面左側的寬度；隱藏＝不顯示圖 |
| 圖片版面 | 輪播 Carousel / 網格 Grid | 多圖用左右輪播＋縮圖，或攤成網格全部並列 |
| 圖片間距（網格） | 無 / 小 / 中 / 大 | 網格模式下圖與圖的間隙 |
| 欄數（網格） | 1 / 2 | 網格一排幾張 |
| 圖片縮放 | 無 / 懸停放大鏡 / 點擊彈窗 / 兩者 | 顧客看細節的方式 |
| 縮圖位置 | 左側 / 底部 | 輪播模式縮圖列的位置 |
B. 對照：版面 × 寬度
最有感的是「版面＋寬度」。左邊是預設（輪播＋50%，圖在左、縮圖在下），右邊改成（網格＋100%，四張圖攤成 2 欄大圖）：
💡 怎麼選圖片不多或想版面精簡 → 輪播 50/66%；圖片多、想氣勢（服飾、家具多角度）→ 網格 100%。改一次全站商品頁一起套用。
1
切換圖片寬度
在面板「圖片寬度」點四個圖示之一（隱藏／50%／66%／100%），頁面即時變化。選「隱藏」時整個商品頁沒有圖，只剩文字（適合純服務型商品）。
2
切換版面：輪播 ↔ 網格
在同一區把版面從「輪播」改「網格」。網格模式會多出「間距」與「欄數」兩個子選項，可調圖與圖的間隙與一排張數。
3
設定圖片縮放（看細節）
「圖片縮放」決定顧客怎麼看清楚材質細節：懸停放大鏡（滑鼠移上去局部放大）、點擊彈窗（點圖開大圖燈箱）、或兩者都要。輪播模式還能設「縮圖」在左側或底部。
💡 網格搭點擊彈窗網格版面的圖已經很大，縮放建議用「點擊彈窗」看原圖；輪播版面則常用「懸停放大鏡」看局部。
⚠️ 注意事項
- 這些是全站設定：改版面/寬度會套用到每一個商品頁，不是只有目前這件。
- 「網格」需要商品有多張圖才好看（Part 6）；只有一張圖時網格與輪播差別不大。
- 選「圖片寬度＝隱藏」會讓所有商品頁沒有圖，除非你賣的是無需圖片的服務，否則別誤選。
如何查到
商品頁 › 編輯 › 自訂 › 點商品 ›「圖片寬度／圖片縮放／縮圖」。版面（輪播↔網格）在同一區；網格的間距、欄數為其子選項。
評分
暫時沒有留言。
成為第一個留言的人。