跳至正文
帮助
简体中文
店面构建器

颜色、字体与品牌形象

配置您的全局配色方案、字体角色、页面宽度、徽标、网站图标和背景图片。

这些设置在哪里

这些设置是按市场分别配置的,在同一个市场内它们会同时影响每一个页面。打开构建器,用左侧边栏的市场选项卡(国旗图标)选择一个市场,然后点击设置选项卡(齿轮图标)。更改会应用到您当前选中的市场,并在您点击发布后生效。要查看每一项设置的完整列表,请参阅构建器设置参考

配色方案

Storeep 使用最多 9 套配色方案组成的调色板。您店铺中的每个区块、模块和组件都通过编号(1 到 9)引用其中一套方案。更改某套方案的颜色会立即更新所有使用该方案的区块,覆盖所有页面。

每套方案中的颜色角色

每套方案定义以下颜色角色,全部以十六进制颜色值设置:

  • 背景:区块的主背景色。
  • 内层背景:一种带有微妙色调的背景色,用于区块内的卡片和嵌套内容区域。
  • 标题颜色:标题文字的颜色。
  • 正文颜色:段落文字的颜色。
  • 高亮文字颜色:一种强调用的文字颜色,用于价格、优惠标签和倒计时数值。通常是调色板中最深或最醒目的色调。
  • 链接颜色:默认的超链接颜色。
  • 链接悬停颜色:顾客将鼠标悬停在超链接上时的颜色。
  • 边框颜色:元素边框和分隔线的颜色。
  • 轮廓颜色:焦点框、键盘选择高亮以及需要比普通边框更醒目的强调轮廓的颜色。
  • 阴影颜色:盒子阴影的颜色(通常带有一定透明度)。
  • 主按钮背景:主按钮的填充颜色。
  • 主按钮文字:主按钮上的文字颜色。
  • 主按钮边框:主按钮的边框颜色。
  • 主按钮悬停背景:悬停时主按钮的填充颜色。
  • 主按钮悬停文字:悬停时主按钮的文字颜色。
  • 主按钮悬停边框:悬停时主按钮的边框颜色。
  • 次按钮背景:次按钮的填充颜色。
  • 次按钮文字:次按钮上的文字颜色。
  • 次按钮边框:次按钮的边框颜色。
  • 次按钮悬停背景:悬停时次按钮的填充颜色。
  • 次按钮悬停文字:悬停时次按钮的文字颜色。
  • 次按钮悬停边框:悬停时次按钮的边框颜色。
  • 输入框背景:表单输入框的背景颜色。
  • 输入框文字颜色:表单输入框内的文字颜色。
  • 输入框边框颜色:表单输入框的边框颜色。
  • 输入框标签颜色:表单字段上方的标签文字颜色。
  • 输入框聚焦背景:顾客聚焦或悬停在字段上时输入框的背景颜色。

打造出色配色方案的技巧

  • 在大多数区块上使用中性的浅色作为背景,把鲜明的颜色留给单独一套强调方案,用于主视觉和行动号召区块。
  • 让您的主按钮背景在视觉上与区块背景明显区分,因为按钮必须清晰突出。
  • 内层背景保持为主背景的极轻微色调,这样卡片背景既能区分又不会过于刺眼。
  • 正文颜色背景之间,以及主按钮文字主按钮背景之间,争取达到至少 4.5:1 的对比度。

字体排版

四个字体角色控制着每个页面的字体排版。每个角色对应可用字体库中的一种字体族。

  • 正文:用于段落文字和描述的主要字体。
  • 标题:用于整个店铺所有标题的字体。
  • 副标题:用于次级标题和区块小标题的字体,衔接标题与正文的风格。
  • 强调:用于价格、标签和装饰性强调的风格化字体。

可用字体包括:Inter、Helvetica、SF Mono、New York、System UI、Roboto、Open Sans、Lato、Montserrat、Poppins、Raleway、Nunito、Merriweather、Playfair Display、Lora、PT Sans、PT Serif、Quicksand、Space Grotesk、DM Sans、Syne、Manrope、Outfit、Urbanist、Oswald、Bebas Neue、Abel、Abril Fatface 和 Acme。

对于含有阿拉伯语内容的店铺,字体会自动与匹配的阿拉伯语字体配对:例如,Inter 与 Cairo 配对,Poppins 与 Tajawal 配对。您无需单独选择阿拉伯语字体。

页面宽度

全局页面宽度设置以像素为单位控制主内容网格的最大宽度。设置为页面宽度的区块会被约束到这个值;设置为全宽的区块则始终跨越整个视口,不受此限制。可用数值:900、1000、1100、1200(默认)、1300 和 1400 像素。在比所选宽度更窄的视口上,区块会自动收缩以填满屏幕的 100%。

徽标

徽标在页眉区块的徽标模块内以及页脚的关于我们模块内设置。在控制面板中点击徽标模块,然后点击+ 添加媒体+ 添加图片,从您的设备上传徽标或从媒体库中选取。上传后,设置显示宽度(20–300 像素)和高度(20–300 像素);另一个尺寸会自动缩放以保持宽高比。

网站图标

网站图标在构建器的设置 → 品牌形象中设置。点击网站图标字段并上传一张图片(建议:正方形图片)。网站图标会显示在浏览器标签页和书签中。

页面背景图片

同样在设置 → 品牌形象中:您可以选择性地为整个页面设置背景图片。配置它的缩放方式(覆盖会填满整个视口,包含会让图片完整地容纳在其中),以及它是否平铺重复,或是作为单张图片固定在滚动内容之后。

全局自定义 CSS 和 JavaScript

对于标准设置无法实现的高级自定义,设置提供了一个全局 CSS 字段(最多 1,000 个字符)和一个全局 JS 字段(最多 1,000 个字符)。在此输入的 CSS 会注入到店铺的每一个页面;在此输入的 JS 会在每个页面运行。请谨慎使用这些功能,对于针对特定页面的自定义,请优先使用自定义代码区块