Doris Bien 版型使用指南

1.SHOPLINE_________png.png

blobid0.jpg

Doris Bien 版型隆重推出,風格簡約細緻,適合販售化妝品、甜點、首飾、質感選物、婚紗類等,有高清商品圖或是有在經營部落格的商家。

Doris Bien 提供黑白兩種背景色選擇,讓不同商家類型做更適合的搭配,如:
淺白色特別適合少女系化妝品、甜點、首飾、文創設計品、家居、婚紗;
深黑色特別適合男性運動用品、潮流服裝、手錶等。

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

 

 

一、依照品牌形象客製網店顏色

1.自訂背景顏色

你能選擇網站佈景色,並將會控制整個網站的色系為整體深黑或淺白色。
編輯位置:管理後台 > 商店設計 > 設計 > Doris Bien 的設定 > 店面版型

blobid2.png

 

若設為深黑色,示意如圖: dark_home_copy.png

 

若設為淺白色,示意如圖:

light_home_w.png

 

2.自訂主題顏色與文字顏色

blobid3.png


使用色碼可以控制整個網站的按鍵、重點資訊、底線顏色,請使用 HEX 六位數色碼(避免使用淺淡的顏色,以提高可讀性)
色碼參考:https://htmlcolorcodes.com/


blobid4.png


 
二、讓顧客聚焦在商品介紹的設計感商品細節頁

Doris Bien 的商品細節頁沒有商品分類的側邊欄,因此商品圖片以更大的尺寸清楚呈現,商家可以利用更多精美的行銷圖文做搭配來介紹、 行銷商品。
商品描述、了解更多、送貨及付款方式的版型設計整齊、簡約且特別規劃出更多面積讓資訊或圖文更好閱讀!以下有四點特色小簡介:

 

1.商品訂購欄位

線條裝飾讓介面優雅簡約亦富設計感 Hubble_______.png

 

2.商品描述欄位

因為寬度較大,商品描述用置中對齊較美觀 mceclip0.png

 

3.了解更多欄位

可以擺放更多商品相關的大圖來增加資訊豐富度 blobid7.png
 

4.送貨及付款方式欄位

左右兩欄設計,幫助資訊區分好讀

Screenshot_2020-07-07_at_10.30.35_AM.png

 

 

三、建議 Banner 尺寸

請記得使用圖片壓縮工具,讓大圖不會佔用顧客太多網路流量導致網站讀取速度過慢,推薦使用:https://tinypng.com/

1.進階分頁

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

 

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

 

2.商品列表頁

提供上傳全寬的 Banner ,讓商家可以利用此區塊營造各個不同分類的情境和豐富度( SHOPLINE 優質網店範例),建議 Banner 高度不超過 640 px,讓顧客在一進入商品列表頁時,能稍微看到第一排商品。blobid9.png
 

Banner 採用全寬顯示,特別適合精品類型的產品展示。light_PLP_with_no_banner_2.png

 

 

四、體驗更好更活潑的部落格版型設計

Doris Bien 部落格版型為響應式設計,文章會自動使用文章內文的第一張圖作為封面,並依照文章標題和封面長短比例調整高度和排版,一屏網頁裡可以呈現更多文章。 不需擔心不會網頁排版,因為 Doris Bien 已預先設計好如何呈現,讓商家可以更輕鬆自由的產出文章來豐富網店!
light_Blog_list_page_3.png
 
以上是 Doris Bien 的特色介紹,立即試用看看吧! 

 

 

 

 

 

還有其他問題?提交請求

評論