适合贩售精品、服饰、家具、首饰、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 版型
-
特色部落格排版
首篇文章会以满版显示来聚焦顾客注意，其下为两两并排，在每次卷动时可以一次看多篇文章，节省顾客时间并提升曝光率。文章封面将抓取文内的首张图片，建议图片使用横图会有最好的呈现效果。
评论