Ultra Chic 版型使用指南

Artboa2rd.png

為了讓店家打造富有變化的商店設計,我們推出了 Ultra Chic 的版型,讓您可以打造符合品牌風格的商店!

 

您可以客製化顏色


1. 自訂標題背景顏色:

_____2019-01-09___3.02.47.png

您能依照您的品牌風格,選擇網站元件底色為黑或白色。這裡控制的是 Header Menu & Footer & 購物車的顏色


黑色:Header Menu & Footer & 購物車將為黑色

  • Header Menu

_____2019-01-09___11.50.56.png

 

  • Footer

_____2019-01-09___12.03.44.png

 

  • 購物車

_____2019-01-09___12.03.36.png

 

白色:Header Menu & Footer & 購物車將為白色


  • Header Menu

_____2019-01-09___11.51.43.png

 

  • Footer

_____2019-01-09___12.01.56.png

 

  • 購物車

_____2019-01-09___12.02.57.png


2. 自訂主題顏色:

_____2019-01-09___3.02.47_2.png


您能使用色碼控制整個網站的按鍵、重點資訊、底線顏色。請務必輸入六位數的色碼
色碼可參考:https://htmlcolorcodes.com/

_____2019-01-09___11.58.27.png


*注意:「自訂主題顏色」內必須要輸入色碼,您才可以按下「保存」並「出版」哦!


 

利用小撇步,快速建立精美品牌官網!


1. 在 Banner 更大氣的呈現您的行銷廣告

Ultra Chic 首頁 Banner 採用全幅顯示。Logo、Menu 會出現在圖片上方,如果您希望文字能清楚凸顯,建議選用頂部顏色較單純的圖片作為 Banner。

如以下範例:(標題背景選用黑色,Menu 為白字)

Artboard_Copy_2.png


如以下範例:(標題背景選用白色,Menu 為黑字)

Artboard.png


若想選用配色、內容豐富的圖也沒問題!不必擔心 Menu 字顧客看不清,當顧客將網頁向下捲時,就能看到清楚的 Menu 囉!

Artboard_Copy_3.png

(此處示意標題背景選用白色,Menu 為白底。選用黑色,Menu 會是黑底喔!)

 

*小提示:

(1) 只有被設為主頁的頁面,頂部的 Banner 會以全幅顯示。

(2) 設定 Banner 時,圖片記得關閉「上下間距」及開啟「顯示全寬圖片模式」,圖片才能以全幅顯示!

設定位置:SHOPLINE 管理後台 > 目錄分頁管理 > 網店分頁 > 首頁(被標示「主頁」的分頁)點擊編輯 > 編輯頂部區塊的圖片 > 設定 > 關閉上下間距 / 勾選顯示全寬圖片模式

_____2019-01-07___3.05.45.png

 

2. 自製喜歡的 Menu 底色

如果您不喜歡 Menu 顯示在 Banner 上的設計,可在頂部自行上傳一張純色 / 花紋的圖,並關閉「上下間距」及開啟「顯示全寬圖片模式」,就可以自訂 Menu 底色!


以下使用有花紋的白底圖做示範

_____2019-01-07___3.48.15.png


於商店顯示效果:

_____2019-01-07___3.47.38.png


記得檢查手機版的底色也顯示正常喔!

_____2019-01-07___3.57.06.png

 

 

3. Footer 底色以黑色 / 淺灰色顯示(依所選標題背景色呈現)

系統將抓取 Footer 編輯器的最下一欄填滿底色。您可在此欄填寫品牌版權資訊,或依喜好拉入影片、圖片等元件。 

如以下範例,背景色為黑時,商店 Footer 會顯示黑色

_____2019-01-07___3.12.16.png

 

背景色為白時,商店 Footer 會顯示淺灰色

_____2019-01-07___3.10.01.png

 

編輯位置:Footer 要更新至新版編輯器才有支援喔!

SHOPLINE 管理後台 > 目錄分頁管理 > 網店目錄管理 > 商店頁尾點擊編輯

_____2019-01-07___3.17.33.png


請注意編輯模式是不會顯示底色的,必須切換到預覽,或實際套用才會看到效果喔!
文字、圖片記得要挑選足夠凸顯的顏色:例如黑底配白字、明亮的圖,灰底配深字... 等,視覺上才能跳脫突出。

_____2019-01-07___3.21.05.png

 

4. 標題樣式會有底線

Ultra Chic 有自訂的標題樣式,如下圖商品分類的名稱,為套用品牌色的底線文字

_____2019-01-07___4.15.05.png

 

如果您也想要用底線:

在進階分頁,只要使用「文字與標題」元件的「標題」,或將其他元件開啟「顯示標題」,都會有底線。

_____2019-01-07___4.25.41.png

_____2019-01-07___4.28.38.png

因為文字元件的預設樣式(顏色、大小等)跟商品分類長得不一樣,如果您想要使用跟「商品分類」一樣的文字樣式來統一整頁的視覺風格,這裡提供 CSS 語法:

1. 請在編輯文字的編輯欄,將字體顏色設為 #666666,字體大小為 22,並點擊 </> 按鍵。

_____2019-01-07___4.35.19.png

在 <span style="font-size:22px;"> 後貼上這段語法:<letter-spacing:"3px;"> 並點擊確定就可以囉!

_____2019-01-07___4.37.22.png

 

5. 如果您不想顯示底線?

如果您不想使用有底線的文字,請使用「文字」元件,或其他元件的「顯示描述」,就不會有底線囉!

_____2019-01-07___4.25.37.png

_____2019-01-07___4.39.40.png

 

5. 置中對齊商品細節頁的商品描述

Ultra Chic 的商品細節頁,沒有商品分類的側邊欄,商品圖片以更大的尺寸清楚呈現,能讓顧客注意力聚焦在商品介紹本身。

因為寬度較大的關係,商品描述請用置中較美觀喔!

_____2019-01-09___10.55.45.png

 

6. 將 Instagram 元件的照片尺寸變大了,試用看看吧!

我們重新設計了進階分頁裡的 Instagram 元件,在手機、桌機版呈現的效果更加精美清晰。

 

7. 如果您的 Logo 是純白色的,請新增陰影或描框

白色 Logo 在黑色版本的標題背景搭配有很好的效果,

_____2019-01-09___11.06.41.png

但當您轉貼官網連結、寄發 EDM 給顧客時,會直接抓取商店 Logo。若使用白色 Logo,在純白的背景下會看不見,如下圖於 LINE 轉發。

_____2019-01-09___11.12.59.png

所以建議將純白 Logo 描邊或加上陰影,才能讓顧客看見喔!

_____2019-01-09___11.17.12.png

還有其他問題?提交請求

評論

由 Zendesk 提供支援