Varm 版型使用指南

1. EC.png

varm.png

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

Artboard.png

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

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

 

一、自訂網店顏色

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

Screenshot 2024-08-29 at 1.09.25 PM.png

 

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

 

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

 

二、商品細節頁特色介紹

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

___2020-08-18___4.13.33.png

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

___2020-08-18___4.15.20.png

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

___2020-08-18___4.20.33.png

 

 

三、各頁面建議 Banner 尺寸

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

(推薦使用:https://tinypng.com/

 

1. 進階分頁

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

1._varm_-_home_copy_8.png

 

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

1._varm_-_home_copy_7.png

 

注意:

  • 若為 SHOP Builder 所建立的進階分頁,請透過「輪播元件」新增圖片,並開啟「同高第一張輪播圖」功能,以避免裁切狀況。Screen_Shot_2023-02-15_at_4.51.31_PM.png

  • 若為 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.商品列表頁

提供上傳對齊商品的 Banner,可以利用此區塊營造各個不同分類的情境和豐富度,建議 Banner 高度不超過 400 px,讓顧客在一進入商品列表頁時,能稍微看到第一排商品。
 
___2020-08-18___4.43.10.png

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

 

 

 

 

 

還有其他問題?提交請求

評論