Philia 版型使用指南

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

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

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

• 自訂網店主題顏色與字型
• Philia 版型特色介紹
• 各頁面 Banner 建議尺寸

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

1. 自訂主題顏色

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

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

2. 自訂主題字型

前往「店面級別設定 > 文字」，您可以設定標題、內文的字型以及字體大小。

＊注意：

• 使用色碼可以控制整個網站的按鍵、重點資訊、底線顏色，請使用 HEX 六位數色碼（請避免使用淺色以提高可讀性）。色碼參考：https://htmlcolorcodes.com/。
• 有關色彩、文字的設定方法，請參考店面級別設定｜SHOP Builder。

3. Logo 調整

Philia 支援較大的 Logo 顯示，滿足您的行銷需求。

前往「頁首 > Logo」可以調整 Logo 的尺寸（1 至 10）。若您想釋放更多版面方便顧客瀏覽，可以再選擇關閉「固定頁首」開關，增進瀏覽體驗。

二、Philia 版型特色介紹

1. 商品列表頁面

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

2. 商品細節頁面

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

3. 商品圖

• 商品圖版型比例為 3:4。
• 若希望自動裁剪商品圖片，可以前往「SHOPLINE 後台 > 網店設計 > 店面級別設定 > 商品 > 商品列表頁」，開啟「自動裁剪商品圖」按鈕並儲存設定。

建議商品圖片尺寸：825px (寬) x 1100px（高）

三、各頁面建議 Banner 尺寸

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

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

1. 進階分頁

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

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

2.商品列表頁

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