适合贩售精品、服饰、家具、首饰、3C 类等有高清商品图需求的商家，Kingsman 能呈现出知性的网站风格。
注意：若您目前的商店方案為正式方案，且僅有「社群購物」方案，將無法變更商店版型。
以下将分别说明：
一、开放定义三种主题颜色及字型
1. 自订主题颜色 #1 底色与文字颜色
底色：会套用在网站页首、手机侧边选单及所有按键底色。（避免使用浅淡的颜色，以提高可读性）
文字颜色：会套用在显示于「主题颜色 #1 底色」上的文字颜色，例如目录上的文字、按键上的文字。
如下图：目录与购物车按键，这里的「主题颜色 #1 底色」设为绿色，「文字颜色」设为白色。
2. 自订主题颜色 #2
会套用在价格的文字及白背景上的按键、icon 上。
比方商品细节页的商品价格、数量按键。
3. 配色建议
这个主题可以搭配三种颜色，若想打造不出错的柔和视觉风格，在「主题颜色 #1 底色」可使用低饱和度的莫兰迪色系立即提高质感。字体颜色轻松的选择白色就很百搭。
若想制作个性感强一些的网站，也能直接使用黑色。
而「主题颜色 #1＋主题颜色 #2＋字体色」的搭配，若想要色调单纯，可以让「主题颜色 #1 底色」和「主题颜色 #2」使用同一颜色。
若喜欢稍有变化的配色，可以选择相近色较不容易出错。例如：将「主题颜色 #1 底色」仅调整明度或饱和度作为「主题颜色 #2」，尽量不调整色相。
若想让顾客留下强烈的视觉印象，可使用对比色，比方黑色与黄色。
网路上有许多优质的配色网站，不妨多尝试看看吧！特别推荐此网站的 TOP 50 网站配色方案。
4. 字型选用
黑体较适合现代、潮流的风格，宋体为衬线字，较适合经典、文青风格的网站。一旦套用，整个网站都会换成选用的字体。
二、在进阶分页制作特色大标题
在官网制作引人注目的 Slogan，让顾客能聚焦你的品牌精神。
如何制作？
透过「进阶分页」中的「文字与标题」元件，相关的介绍可以参考：文字元件｜进阶分页。
此版型的「文字及标题」元件，只要有填写「描述」栏位，就会显示背景色，若只填写「标题」栏位，不会显示背景色。（若背景色颜色较深的话，建议勿与商品元件放置于同一行，避免颜色显示不明显）
背景色将抓取主题颜色 #1 底色，因此建议选择跟他搭配的字体颜色。
如果觉得文字字距太近，可用 CSS 语法调整：
1. 请在编辑段落的编辑栏，选取文字后点击 </> 按键。
2. 在第一个 <p> 的后方贴上这段语法：<span style="letter-spacing:3px;"> 并点击确定就可以啰！
3. 可以依照想要的距离输入数字，越大字距会越远。
三、商品细节页排版建议
商品详情页主要功能及特色：
- 图片放大检视：将滑鼠移到主要图片上即可放大局部检视；点击主要图片则会另外弹出视窗，显示原尺寸图片。
- 浏览所有商品图：点选左侧图片列下方的箭头，可查看所有主要商品图。
- 版面配置：商品叙述、配送方式等于右侧缩小呈现，让顾客的视觉焦点聚焦在商品图片本身。
因此建议编辑商品说明时，将图片集中放在「商品主要图片」，「商品描述」则尽量精简，版面呈现会更好看。此外，建议上传的商品图尺寸控制在 1000x1000px 以内，有助于减少页面载入负担、提升网站速度。
＊注意：如左侧图片列总高度大于右侧资讯总高度，切换规格选项时，左侧图片列可能产生些微闪动。
四、建议 Banner 尺寸
请记得使用图片压缩工具，让大图不会占用顾客太多网路流量导致网站读取速度过慢，推荐使用：https://tinypng.com/。
进阶分页：如果是页首置顶 Banner，喜欢整个荧幕满版图片，可使用 1920x840px。
如果不想占满整个荧幕，喜欢较窄的比例，推荐使用 1920x640px，这样在桌机约占满 3/2 画面范围
在商品列表页的 Banner，建议高度不超过 640 px，让顾客在一进入商品列表页时，能稍微看到第一排商品。
五、其他专属特色
置中排版、以大图展示的 IG 版型
特色部落格排版
首篇文章会以满版显示来聚焦顾客注意，其下为两两并排，在每次卷动时可以一次看多篇文章，节省顾客时间并提升曝光率。文章封面将抓取文内的首张图片，建议图片使用横图会有最好的呈现效果。
评论