Kingsman 版型使用指南

適合販售精品、服飾、傢俱、首飾、3C 類等有高清商品圖需求的商家，Kingsman 能呈現出知性的網站風格。

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

 

本篇文章將分別說明：

• 自訂網店顏色
• 自訂字型
• 在進階分頁製作特色大標題
• 商品細節頁排版建議
• 各頁面 Banner 建議尺寸
• 其他細節介紹

 

一、自訂網店顏色

1. 設定步驟

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

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

有關詳細的色彩設定方法，請參考店面級別設定｜SHOP Builder。

 

2. 配色建議

這個主題可以搭配三種顏色，若想打造不出錯的柔和視覺風格，在「主要按鈕 > 背景」可使用低飽和度的莫蘭迪色系立即提高質感。字體顏色輕鬆的選擇白色就很百搭。

 

若想製作個性感強一些的網站，也能直接使用黑色。

 

對於「頁首」、「主要按鈕」、「次級按鈕」的搭配，若想要色調單純，可以讓「頁首」、「主要按鈕」的背景以及「次級按鈕」的顏色使用同一顏色。

若喜歡稍有變化的配色，可以選擇相近色較不容易出錯。例如：將「頁首」、「主要按鈕」的背景顏色調整明度或飽和度後當作「次級按鈕」的顏色，盡量不調整色相。

若想讓顧客留下強烈的視覺印象，可使用對比色，例如：黑色與黃色。

網路上有許多優質的配色網站，不妨多嘗試看看吧！您也可參考 SHOPLINE 電商教室，瞭解更多配色技巧！

若您希望「網店目錄」的樣式（底色＆文字顏色）能單獨設定，而不想影響其他商店按鈕的樣式，可以聯繫線上顧問團隊，我們將提供合適的修改建議讓您參考。

 

3. 字型選用

黑體較適合現代、潮流的風格，宋體為襯線字，較適合經典、文青風格的網站。一旦套用，整個網站都會換成選用的字體。

 

二、在進階分頁製作特色大標題

1. SHOP Builder

SHOP Builder 暫不支援此功能。

 

2. 舊版頁面編輯器

在官網製作引人注目的 Slogan，讓顧客能聚焦您的品牌精神。

 

透過「進階分頁」中的「文字與標題」元件，相關的介紹可以參考：文字元件｜進階分頁。

 

此版型的「文字及標題」元件，只要有填寫「描述」欄位，就會顯示背景色，若只填寫「標題」欄位，不會顯示背景色。（若背景色顏色較深的話，建議勿與商品元件放置於同一行，避免顏色顯示不明顯）

背景色將抓取主題顏色 #1 底色，因此建議選擇跟他搭配的字體顏色。

 

若您覺得文字字距太近，可用 CSS 語法調整：

1. 請在編輯段落的編輯欄，選取文字後點擊 </> 按鍵。
   
   
   
2. 在第一個 <p> 的後方貼上這段語法：<span style="letter-spacing:3px;"> 並點擊確定就可以囉。
   
   
3. 可依照您想要的距離輸入數字，越大字距會越遠。

 

三、商品細節頁排版建議

商品細節頁新增了三個功能：

• 商品放大效果：顧客鼠標移到主要圖片後，出現彈跳視窗顯示「原尺寸」圖片
• 使用滑鼠捲動即可查看所有商品圖
• 商品敘述和配送方式會縮小在右側，目的是讓顧客聚焦在商品圖本身

因此在後台編輯商品說明時，建議將所有圖片集中放置在「商品主要圖片」，「商品描述」盡量簡短，版面配置才會好看喔！另外，建議上傳的商品圖尺寸不超過 1000x1000px，盡量減少記憶體耗費，網站速度才會快。

 

四、建議 Banner 尺寸

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

進階分頁：如果是頁首置頂 Banner，喜歡整個螢幕滿版圖片，可使用 1920x840px。

如果不想佔滿整個螢幕，喜歡較窄的比例，推薦使用 1920x640px，這樣在桌機約佔滿 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。

 

五、其他專屬特色

1. 置中排版、以大圖展示的 IG 版型

 

2. 特色部落格排版

首篇文章會以滿版顯示來聚焦顧客注意，其下為兩兩並排，在每次捲動時可以一次看多篇文章，節省顧客時間並提升曝光率。文章封面將抓取文內的首張圖片，建議圖片使用橫圖會有最好的呈現效果。