為了讓店家打造富有變化的商店設計，我們推出了 Ultra Chic 的版型，幫助你打造符合品牌風格的商店！
＊注意：若您目前的商店方案為正式方案，且僅有「社群購物」方案，將無法變更商店版型。
一、自訂網店顏色
前往「商店後台 > 網店設計 > 網店分頁」，點按「＋進階分頁」建立新的分頁，或點按任一支援 SHOP Builder 的既有分頁旁的「編輯」按鈕。
前往「店面級別設定 > 色彩」，您可以針對進階分頁的不同區塊自訂適合的顏色。各區塊的預設顏色為您原本設定的顏色。
使用色碼可以控制整個網站的按鍵、重點資訊、底線顏色，請使用 HEX 六位數色碼（請避免使用淺色以提高可讀性）。色碼參考：https://htmlcolorcodes.com/。有關詳細的色彩設定方法，請參考店面級別設定｜SHOP Builder。
二、利用小撇步，快速建立精美品牌官網！
1. 在 Banner 更大氣的呈現行銷廣告
Ultra Chic 首頁 Banner 採用全幅顯示。Logo、目錄 會出現在圖片上方，如果希望文字能清楚凸顯，建議選用頂部顏色較單純的圖片作為 Banner。
如以下範例：（標題背景選用黑色，目錄文字為白色）
如以下範例：（標題背景選用白色，目錄文字為黑色）
若選用配色、內容豐富的圖也沒問題！不必擔心目錄文字顧客看不清，當顧客將網頁向下捲時，就能看到清楚的目錄。
（此示意圖標題背景色是選用白色，因此目錄為白底。若選用黑色，目錄會是黑底喔！）
＊注意：
- 只有被設為主頁的頁面，頂部的 Banner 會以全幅顯示。
- 設定 Banner 時，圖片記得關閉「上下間距」及開啟「顯示全寬圖片模式」，圖片才能以全幅顯示！
2. 自製喜歡的目錄底色
如果不喜歡「目錄」顯示在 Banner 上的設計，可在頂部自行上傳一張純色 / 花紋的圖，並關閉「上下間距」及開啟「顯示全寬圖片模式」，就能自訂頁首目錄的底色！
以下使用有花紋的白底圖做示範：
於商店顯示效果：
記得檢查手機版的底色也顯示正常喔！
Ultra Chic 版型的特性是 logo & 目錄 會顯示在首張圖片上（也就是會壓在進階分頁的第一個圖片元件上），若不想要 logo & 目錄 與首個「圖片元件」重疊，可在最上方加入空白沒有內容的「文字元件」，讓它形成一個空元件就行了喔！
3. 建議 Banner 尺寸
請記得使用圖片壓縮工具，讓大圖不會佔用顧客太多網路流量導致網站讀取速度過慢，推薦使用：https://tinypng.com/
進階分頁：
如果是頁首置頂 Banner，喜歡整個螢幕滿版圖片，可使用 1920x1080px。
如果不想佔滿整個螢幕，喜歡較窄的比例，推薦使用 1920x720px，這樣在桌機約佔滿 3/4 畫面範圍
在商品列表頁的 Banner，建議高度不超過 640 px，讓顧客在一進入商品列表頁時，能稍微看到第一排商品。
＊注意：
- 若為 SHOP Builder 所建立的進階分頁，請透過「輪播元件」新增圖片，並開啟「同高第一張輪播圖」功能，以避免裁切狀況。
- 若為 SHOP Builder 所建立進階分頁，圖片請參照以下建議比例。
- 桌機版建議圖片比例
- 長方形 - 長寬比 2：1。單圖建議尺寸 2000 × 1000px。
- 長方形 - 長寬比 3：4。單圖建議尺寸 1500 × 2000px 。
- 正方形 - 長寬比 1：1。單圖建議尺寸 2000 × 2000px。
- 手機版建議圖片比例
- 長方形 - 長寬比 2：1。單圖建議尺寸 1080 × 540px。
- 長方形 - 長寬比 3：4。單圖建議尺寸 810 × 1080px。
- 正方形 - 長寬比 1：1。單圖建議尺寸 1080 × 1080px。
- 桌機版建議圖片比例
4. Footer 底色以黑色 / 淺灰色顯示（依所選標題背景色呈現）
系統將抓取頁尾編輯器的最下一欄填滿底色。你可在此欄填寫品牌版權資訊，或依喜好拉入影片、圖片等元件。
如以下範例，標題背景顏色為黑時，商店頁尾會顯示黑色
標題背景顏色為白時，商店頁尾會顯示淺灰色
＊請注意，編輯模式不會顯示底色，必須點擊預覽、或套用才會看到效果喔！文字、圖片記得要挑選足夠凸顯的顏色：例如黑底配白字、明亮的圖，灰底配深字... 等，視覺上才能跳脫突出。
5. 標題樣式會有底線
Ultra Chic 有自訂的標題樣式，如下圖商品分類的名稱，為套用品牌色的底線文字
如果你也想在標題下加底線：
在進階分頁，只要使用「文字與標題」元件的「標題」，或將其他元件開啟「顯示標題」，都會有底線。
因為文字元件的預設樣式（顏色、大小等）跟商品分類長得不一樣，如果想要使用跟「商品分類」一樣的文字樣式來統一整頁的視覺風格，這裡提供 CSS 語法：
1. 請在編輯文字的編輯欄，將字體顏色設為 #666666，字體大小為 22，並點擊 </> 按鍵。
2. 在第一個 <p> 後貼上這段語法：<span style="letter-spacing:3px;"> 並點擊確定就可以囉！
6. 如果不想顯示底線？
如果不想使用有底線的文字，請使用「文字」元件，或其他元件的「顯示描述」，就不會有底線囉！
7. 置中對齊商品細節頁的商品描述
Ultra Chic 的商品細節頁，沒有商品分類的側邊欄，商品圖片以更大的尺寸清楚呈現，能讓顧客注意力聚焦在商品介紹本身。
因為寬度較大的關係，商品描述請用置中較美觀喔！
8. 將 Instagram 元件的照片尺寸變大了，試用看看吧！
我們重新設計了進階分頁裡的 Instagram 元件，在手機、桌機版呈現的效果更加精美清晰。
9. 如果 Logo 是純白色的，請新增陰影或描框
白色 Logo 在黑色版本的標題背景搭配有很好的效果，
但當轉貼官網連結、寄發 EDM 給顧客時，會直接抓取商店 Logo。若使用白色 Logo，在純白的背景下會看不見，如下圖於 LINE 轉發。
所以建議將純白 Logo 描邊或加上陰影，才能讓顧客看見喔！
評論