Bianco 版型使用指南

1.SHOPLINE_________png.png

banner.jpg

Bianco 版型優雅登場,風格簡約細緻,適合販售精品服飾、首飾、3C電子產品、化妝保養、質感選物類等,有高清商品圖需求或是文青風格的商家,搭配左側固定目錄,快速索引顧客瀏覽商店,以滿版圖片呈現,打造符合您品牌風格的商店!

 

 

一、依品牌風格定義主題顏色及主題字型

1. 自訂主題顏色:

可以自訂主題顏色,將顯示在網店的按鈕、會員價標籤等地方,配合品牌形象,提升店鋪的美感

編輯位置:管理後台 > 網店設計 > 設計 > 店面版型 > Bianco版型設定

Group_1.jpg

可使用品牌色或自訂顏色並套用為網站的主題色,請使用 HEX 六位數色碼。(避免使用淺淡的顏色,以提高可讀性)色碼參考:https://htmlcolorcodes.com/

 _____2019-01-09___11.58.27.png

Group_4.jpg

 

2. 自訂主題字型:

提供兩種主題字型設計,思源黑體及思源宋體,套用後,整個網站都會換成選用的字體。

B2.png

黑體:較適合現代、潮流的風格,販售年輕、高貴、簡約商品的店

宋體:為襯線字,端莊大方,適合經典、文青風格,販售復古時裝、傳統商品的店

 

 

二、分頁目錄及商品細節頁功能介紹

Bianco 的商店目錄顯示在頁面側邊,商品圖片可以更大的尺寸清楚呈現,可以利用更多精美的商品圖片來介紹、 行銷商品。

 

1. 電腦版

  • 此版型的特色 - 側面目錄。無論顧客到哪個頁面,都能快速切換瀏覽其他頁面
  • 分類頁會固定顯示目錄列表,適合也在目錄中加入商品分類,讓分類可以在左側固定展示。
  • 當滑鼠游標在分頁按鈕上時,會自動展開選單,能一直往下滑動,有效顯示分層關係。

bianco-menu.gif

 

關於網店主目錄設定,請參考:網店目錄管理

 

2. 手機版

Bianco 的手機版設計也是此版型的重點之一!Bianco 採用 Bottom Navigation - 目錄置底,用戶體驗為參考手機程式的排版和操作,方便切換頁面與手指的點擊範圍,周詳考慮使用手機的顧客。
手機版與電腦版的目錄不同,會同時在選單顯示「目錄」與「分類」列表,因此如果有在目錄中加入商品分類,建議可以開啟『手機目錄選單顯示:隱藏商品分類』,讓電腦版與手機版顯示一致。
 
 bianco-mobile.gif
 

 

3. 商品細節頁功能簡介

商品主要圖片以滑動式瀏覽,顧客在瀏覽商品圖片時,不需點選圖片放大查看,直接捲動頁面。左側目錄和右側的商品資訊區都是固定位置的,讓顧客有流暢的購物體驗。

bianco-pdp.gif

 

商品描述和送貨付款方式會在主要圖片的下方,可讓顧客聚焦在商品圖本身並有更大的空間顯示商品描述內容和圖片。

bianco-pdp2.gif  

 

三、利用Banner呈現行銷廣告,創造精美官網!

在網店的首頁放置滿版 Banner 以達到品牌的衝擊感及推銷的廣告,吸引顧客的購買欲 :handbag:

B7.png

 

如何把 Banner 設為滿版:

編輯位置:管理後台 > 網店設計 > 網店分頁 > 首頁 > 編輯

使用圖片元件,上傳後可在設定裡勾選「顯示全寬圖片模式」及「關閉上下間距」;也可上傳多張以輪播圖片方式呈現


商家也可以利用「上傳手機版圖片」的功能去迎合手機用戶的顧客喔~ 圖片元件設定請參考:圖片元件|進階分頁

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

 

 

四、商品圖片建議尺寸

Bianco 版型提供的商品主要圖片會按照使用者視窗的大小而改變,以達到商品圖片觀看的最佳效果:sparkles:

若想要圖片有整齊的效果,可按照商品圖片的默認尺寸比例 3:4 做設定,由於圖片的大小會按比例縮放,所以建議的尺寸為:

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

編輯位置:商店設計 > 設計 > 進階設計設定 > 勾選「自動把商品圖片裁剪成設計預設相框的大小」

 

 

五、商品規格款式

與其他主題版型統一,Bianco 也提供不同的規格選項的款式,有助提高網店美觀度以及配合商品不同的規格的使用情境。

編輯位置:商品和分類 > 我的商品 > 編輯 > 商品規格 
點擊「編輯選項圖片」以及勾選「顯示選項圖片於商品頁面」
編輯位置:設定 > 商品設定 > 規格顯示方式 
選擇商品規格於商店的顯示方式

 相關商品規格顯示設定請參考:商品規格:選項圖片|商品

 

 

六、部落格版型設計

Bianco 部落格版型為響應式設計,文章會自動使用文章內文的第一張圖作為封面,並依照文章標題和封面長短比例調整高度和排版,文章排版順序依舊維持圖片為主的方式,由上而下,不需擔心不會網頁排版,因為 Bianco 已預先設計好如何呈現,讓商家可以更輕鬆自由的產出文章來豐富網店!

bianco-blog.gif

此版型的部落格頁的圖片也是按照視窗大小而改變,特別適合有大大美美圖片的文章。

 

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

 

 

 

 

 

還有其他問題?提交請求

評論