Philia 版型使用指南

1.CHT_________png.png

banner_copy.jpgSHOPLINE 推出了採用典雅精緻設計的 Philia 版型,推薦販售珠寶首飾、時裝精品、食品零食類等,追求商品圖細節展現與有呈現大量商品資訊需求的商家使用。

在 Philia 版型可供商家在網店頁首放置較大的 LOGO ,讓品牌視覺形象更顯眼,而更大的 LOGO 版面,也可滿足店家在 LOGO 上放置行銷活動名稱以宣傳活動的需求,且在顧客滾動頁面後會縮小頁首,不用擔心影響顧客的瀏覽範圍。

 

 

一、依照品牌形象打造網店主題顏色與字型

1. 自訂主題顏色

將會套用在網店的按鈕與標籤。可使用品牌色或自訂顏色,打造網店獨特風格。(建議避免使用淺淡的顏色,以提高可讀性)

Screen_Shot_2020-08-17_at_2.18.38_PM.png

編輯位置:管理後台 > 網店設計 > 設計 > 店面版型 > Philia 版型設定
(編輯時請使用 HEX 六位數色碼,可參考https://htmlcolorcodes.com/

 

2. 自訂主題字型

商家可根據網店品牌風格選擇套用思源宋體或是思源黑體,設定後將會套用於整個網站。

  • 思源宋體:富有古典美,莊重優雅的襯線體。
  • 思源黑體:富有現代感,簡單俐落的字體。

Screen_Shot_2020-08-17_at_2.19.09_PM.png

 

 

二、Philia 版型特色介紹

1. 商品列表頁面

  • 在 Banner 上會顯示商品分類名稱與分類路徑,突顯商品分類。
  • 為滿版響應式設計,在手機版上只顯示一列商品,讓顧客有更好的瀏覽體驗。

8._philia_-_PLP.png

 

2. 商品細節頁面

  • 提供圖片放大鏡效果,只要將滑鼠輕移至商品圖片上方即可放大查看圖片細節,且點擊圖片右下角放大按鈕可以全螢幕檢視商品圖片。
  • 以分頁呈現商品描述、送貨及付款方式與顧客評價等資訊,讓顧客可以快速找到所需資訊,並專注於閱讀內容。

philia.gif

 

3. 商品圖

  • 商品圖版型比例為 3:4。
  • 若希望自動裁切商品圖片,商家可自行在網店後台 > 網店設計 > 設計 > 進階設計設定 > 開啟「自動把商品圖片裁剪成設計預設相框的大小」功能。

建議商品圖片尺寸:827px (寬) x 1100px(高)

 

  

三、各頁面建議 Banner 尺寸

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

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

 

1. 進階分頁

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

1._philia_-_home.png

 

如果不想佔滿整個螢幕,喜歡較窄的比例,推薦使用 1920x450px,並會在桌機約佔滿 3/2 畫面範圍

1._philia_-_home_copy.png

 

2.商品列表頁

提供上傳全寬的 Banner ,讓商家可以利用此區塊營造各個不同分類的情境和豐富度,建議 Banner 高度不超過 400 px,讓顧客在一進入商品列表頁時,能稍微看到第一排商品。Banner 採用全寬顯示,特別適合精品類型的產品展示。
 

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

 

 

 

 

 

還有其他問題?提交請求

評論