Varm 版型使用指南

Varm 版型採用簡潔且富有摩登時尚感的設計，更加大氣、乾淨，幫助您打造網店的時尚新潮風格，適合販售家居園藝、烹飪廚具、手錶飾品、潮流鞋款、運動用品類等，追求商品圖細節展現與有呈現大量商品資訊需求的店家。

在商品細節頁面，只要將滑鼠輕移至商品圖片上方即可放大查看圖片，讓所有細節一覽無遺，展現商品魅力，滿足顧客瀏覽需求。

＊注意：若您目前的商店方案為正式方案，且僅有「社群購物」方案，將無法變更商店版型。

• 自訂網店顏色
• 商品細節頁特色介紹
• 各頁面 Banner 建議尺寸

一、自訂網店顏色

前往「商店後台 > 網店設計 > 網店分頁」，點按「＋進階分頁」創造新的分頁，或點按任一支援 SHOP Builder 的既有分頁旁的「編輯」按鈕。

前往「店面級別設定 > 色彩」，您可以針對進階分頁的不同區塊自訂適合的顏色。各區塊的預設顏色為您原本設定的顏色。

使用色碼可以控制整個網站的按鍵、重點資訊、底線顏色，請使用 HEX 六位數色碼（請避免使用淺色以提高可讀性）。色碼參考：https://htmlcolorcodes.com/。有關詳細的色彩設定方法，請參考店面級別設定｜SHOP Builder。
＊注意：若您使用非 SHOP Builder 的頁尾，頁尾背景色可前往「SHOP Builder > 店面級別設定 > 色彩 > 頁尾」中更改。

二、商品細節頁特色介紹

1. 在商品細節頁一次只顯示一張商品圖，顧客可點擊左側上下箭頭瀏覽其他圖片。

2. 滑鼠懸浮圖片放大鏡效果：將滑鼠輕移至商品圖片上方，顧客即可放大查看圖片細節。若想更近一步瀏覽，點擊圖片右下角放大按鈕可以全螢幕檢視商品圖片。

3. 以分頁呈現商品描述、送貨及付款方式與顧客評價等資訊，讓顧客可以快速找到所需資訊，並專注於閱讀內容。

三、各頁面建議 Banner 尺寸

請記得使用圖片壓縮工具，讓大圖不會佔用顧客太多網路流量導致網站讀取速度過慢。

（推薦使用：https://tinypng.com/）

1. 進階分頁

如果是頁首置頂 Banner，喜歡整個螢幕滿版圖片，可使用 1920 x 800 px。

如果不想佔滿整個螢幕，喜歡較窄的比例，推薦使用 1920x640px，會在桌機約佔滿 3/4 畫面範圍並露出一些下方資訊吸引用戶往下捲動。

注意：

• 若為 SHOP Builder 所建立的進階分頁，請透過「輪播元件」新增圖片，並開啟「同高第一張輪播圖」功能，以避免裁切狀況。
  
  
• 若為 SHOP Builder 所建立進階分頁，圖片請參照以下建議比例。
  • 桌機版建議圖片比例
    • 長方形 - 長寬比 2：1。單圖建議尺寸 2000 × 1000px。
    • 長方形 - 長寬比 3：4。單圖建議尺寸 1500 × 2000px 。
    • 正方形 - 長寬比 1：1。單圖建議尺寸 2000 × 2000px。
  •  手機版建議圖片比例
    • 長方形 - 長寬比 2：1。單圖建議尺寸 1080 × 540px。
    • 長方形 - 長寬比 3：4。單圖建議尺寸 810 × 1080px。
    • 正方形 - 長寬比 1：1。單圖建議尺寸 1080 × 1080px。

2.商品列表頁

以上是 Varm 版型的特色介紹，立即試用看看吧！