为了让店家打造富有变化的商店设计，我们推出了 Ultra Chic 的版型，让您可以打造符合品牌风格的商店！
- 我能自定义哪些颜色 - 自订标题背景颜色
- 我能自定义哪些颜色 - 自订网站主题色
- 特色全版 Banner 来呈现大气版面
- 自制喜欢的页首，及各页面 Banner 建议尺寸
- Footer 页尾设计指南
- 自制/取消文字段落、标题下的底线
- 商品细节页排版建议
- 其他细节介绍
一、可以依照品牌客製化网站颜色了！
1. 自订标题背景颜色：
前往 SHOPLINE 「商店后台 > 网店设计 > 设计」，点选 Ultra Chic 的店面版型，下滑至「标题背景颜色」。
您能依照您的品牌风格，选择网站元件底色为黑或白色。这里控制的是「页首、页尾、购物车」的颜色。
若设为黑色：「页首、页尾、购物车」将为黑色
- 页首
- 页尾
- 购物车
若设为白色：「页首、页尾、购物车」将为白色
- 页首
- 页尾
- 购物车
2. 自订主题颜色：
您能使用色码控制整个网站的按键、重点资讯、底线颜色。（避免使用浅淡的颜色，以提高可读性）
＊注意：「自订主题颜色」内必须要输入色码，您才可以按下「保存」并「出版」哦！
二、利用小撇步，快速建立精美品牌官网！
1. 在 Banner 更大气的呈现您的行销广告
Ultra Chic 首页 Banner 採用全幅显示。Logo、目录 会出现在图片上方，如果您希望文字能清楚凸显，建议选用顶部颜色较单纯的图片作为 Banner。
如以下范例：（标题背景选用黑色，目录文字为白色）
如以下范例：（标题背景选用白色，目录文字为黑色）
若想选用配色、内容丰富的图也没问题！不必担心 Menu 字顾客看不清，当顾客将网页向下捲时，就能看到清楚的目录囉！
（此处示意标题背景选用白色，目录为白底。选用黑色，目录会是黑底喔！）
- 只有被设为主页的页面，顶部的 Banner 会以全幅显示。
- 设定 Banner 时，图片记得关闭「上下间距」及开启「显示全宽图片模式」，图片才能以全幅显示！
2. 自製喜欢的 Menu 底色
如果不喜欢「目录」显示在 Banner 上的设计，可在顶部自行上传一张纯色 / 花纹的图，并关闭「上下间距」及开启「显示全宽图片模式」，就可以自订页首目录底色！
以下使用有花纹的白底图做示范
于商店显示效果：
记得检查手机版的底色也显示正常喔！
Ultra Chic 版型的特性是 logo & 目录 会显示在首张图片上（也就是会压在进阶分页的第一个图片元件上），若您不想要 logo & 目录 与首个「图片元件」重叠，可在最上方加入空白没有内容的「文字元件」，让它形成一个空元件就行了喔！
3. 建议 Banner 尺寸
请记得使用图片压缩工具，让大图不会占用顾客太多网路流量导致网站读取速度过慢。
进阶分页：
如果是页首置顶 Banner，喜欢整个萤幕满版图片，可使用 1920x1080px。
如果不想占满整个萤幕，喜欢较窄的比例，推荐使用 1920x720px，这样在桌机约占满 3/2 画面范围
在商品列表页的 Banner，建议高度不超过 640 px，让顾客在一进入商品列表页时，能稍微看到第一排商品。
4. Footer 底色以黑色 / 浅灰色显示（依所选标题背景色呈现）
系统将抓取页尾编辑器的最下一栏填满底色。您可在此栏填写品牌版权资讯，或依喜好拉入影片、图片等元件。
如以下范例，背景色为黑时，商店页尾会显示黑色
背景色为白时，商店页尾会显示浅灰色
＊请注意，编辑模式是不会显示底色的，必须切换到预览，或实际套用才会看到效果喔！文字、图片记得要挑选足够凸显的颜色：例如黑底配白字、明亮的图，灰底配深字... 等，视觉上才能跳脱突出。
5. 标题样式会有底线
Ultra Chic 有自订的标题样式，如下图商品分类的名称，为套用品牌色的底线文字
如果你也想在标题下加底线：
在进阶分页，只要使用「文字与标题」元件的「标题」，或将其他元件开启「显示标题」，都会有底线。
因为文字元件的预设样式（颜色、大小等）跟商品分类长得不一样，如果您想要使用跟「商品分类」一样的文字样式来统一整页的视觉风格，这裡提供 CSS 语法：
1. 请在编辑文字的编辑栏，将字体颜色设为 #666666，字体大小为 22，并点击 </> 按键。
2. 在 <span style="font-size:22px;"> 后贴上这段语法：<letter-spacing:"3px;"> 并点击确定就可以囉！
6. 如果您不想显示底线？
如果您不想使用有底线的文字，请使用「文字」元件，或其他元件的「显示描述」，就不会有底线囉！
7. 置中对齐商品细节页的商品描述
Ultra Chic 的商品细节页，没有商品分类的侧边栏，商品图片以更大的尺寸清楚呈现，能让顾客注意力聚焦在商品介绍本身。
因为宽度较大的关係，商品描述请用置中较美观喔！
8. 将 Instagram 元件的照片尺寸变大了，试用看看吧！
我们重新设计了进阶分页裡的 Instagram 元件，在手机、桌机版呈现的效果更加精美清晰。
9. 如果您的 Logo 是纯白色的，请新增阴影或描框
白色 Logo 在黑色版本的标题背景搭配有很好的效果，
但当您转贴官网连结、寄发 EDM 给顾客时，会直接抓取商店 Logo。若使用白色 Logo，在纯白的背景下会看不见，如下图于 LINE 转发。
所以建议将纯白 Logo 描边或加上阴影，才能让顾客看见喔！
评论