跳至正文
帮助
简体中文
店铺编辑器

如何更改我的店铺颜色、字体、标志和网站图标?

在构建器的设置标签中,按市场设置你的配色方案、字体角色、页面宽度、标志、网站图标和页面背景图。

这些设置在哪里

品牌是按市场配置的,而在一个市场内它会同时影响每个页面。打开构建器,用左侧栏顶部的市场按钮(国旗)选择一个市场,然后打开 设置 标签(齿轮图标)。设置有自己的子标签,顺序如下:品牌颜色字体布局动画自动化输入框图标禁用项结账结账表单维护页面自定义 CSS自定义 Javascript。更改会应用到你已选择的市场,并在你点击 发布 时上线。切换市场会重新加载该市场自己的颜色、字体和布局。

配色方案

颜色 标签最多容纳 9 个配色方案。一旦达到上限,添加卡片会变成一个禁用的计数徽章,如 9/9。每个板块、模块和组件都通过编号引用一个方案,因此更改某个方案的颜色会立即重新设置所有页面上使用它的每个板块的样式。右键点击方案卡片可复制或删除它。

每个方案中的颜色角色

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

  • 背景:板块的主背景。
  • 内层背景:用于板块内部卡片和嵌套内容的着色背景。
  • 标题:标题文字颜色。
  • 文字:段落和正文文字颜色。
  • 重要文字:强调文字,例如价格和突出显示的值。
  • 链接悬停链接:超链接在正常和悬停状态下的颜色。
  • 边框:元素边框和分隔线。
  • 轮廓:焦点环和强调轮廓,必须比边框更突出。
  • 阴影:盒阴影颜色(通常为半透明)。
  • 主按钮:背景、文字和边框,每项都有自己单独的悬停颜色(共 6 个值)。
  • 次按钮:背景、文字和边框,每项都有自己单独的悬停颜色(共 6 个值)。
  • 输入框 的背景、文字、边框和标签:表单字段的样式。
  • 输入框悬停背景:当购物者悬停在字段上时的输入框背景。

打造出色方案的提示

  • 在大多数板块上保持中性的浅色 背景,把大胆的颜色留给主图和行动号召板块上的某个强调方案。
  • 主按钮背景 与板块 背景 明显区分,这样按钮才会突出。
  • 内层背景 设置为主 背景 的轻微着色,让卡片在不刺眼的情况下读起来是独立的。
  • 力求文字与其背景之间至少达到 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。对于含有阿拉伯语内容的商店,每个字体都会自动配上一个匹配的阿拉伯语对应字体,因此你无需单独选择阿拉伯语字体。

页面宽度

布局 标签有一个 页面宽度 滑块,用于设置主内容网格的最大宽度,从 900 到 1400 px,步长为 100(即 900、1000、1100、1200、1300 或 1400;默认为 1200)。设置为 页面 宽度的板块会被约束到此值;设置为 全宽 的板块无论如何都会横跨整个视口。在窄于所选宽度的视口上,板块会收缩以填满屏幕的 100%。

标志

标志在两个地方设置:页眉 板块内的 标志 模块,以及页脚中的 关于我们 模块。点击该模块,然后使用它的 标志 图片选择器从你的媒体库中选择图片或上传新图片。选好后,设置显示的 宽度高度(每项 20 到 300 px);另一个尺寸会自动缩放以保持纵横比。页眉标志默认为 120 px 宽、50 px 高,你可以设置它的水平位置(左、中或右)和内边距。默认情况下页眉标志会链接到首页;你可以通过关闭 禁用项 标签中 页眉 分组下的 标志重定向到首页 开关,使其纯粹作为装饰。

网站图标

品牌 标签中设置网站图标。点击 选择网站图标 并选择一张 PNG、JPEG、WEBP 或 ICO 图片(推荐尺寸 32x32 或 16x16 px)。它会显示在浏览器标签页和书签中。

页面背景图

同样在 品牌 标签中,你可以选择性地在整个商店后面设置一张 页面图片(PNG、JPEG 或 WEBP)。一旦选择了图片,会出现两个控件:尺寸覆盖 填满视口,必要时裁剪;包含 适配整张图片)和 重复(开启时图片平铺并随页面滚动;关闭时单张图片固定在视口中,内容在其上滚动)。请使用高度压缩的图片,以避免拖慢页面加载。

自定义 CSS 和 JavaScript

对于标准设置无法实现的更改,自定义 CSS 标签和 自定义 Javascript 标签各自接受最多 1,000 个字符,这些内容会被注入到商店的每个页面并在其上运行。请谨慎使用它们。对于仅限单个板块的样式,每个板块在其控制面板中也有自己的 自定义 CSS 标签,这比全站字段更安全。