自定义 CSS

改之前先知道

这里写的样式会加载到买家看到的每一个页面上。写错了整站都受影响， 而且不会有任何报错 —— CSS 写错只是那一条不生效，或者悄悄把别的东西弄坏。

它在哪

后台 → 站点管理 → 站点设置 → 高级 → 自定义 CSS

只有主账号能改

「高级」这一页的两个字段（自定义 CSS、自定义 head 脚本）会直接注入 C 端页面， 所以只有超级管理员可编辑。子账号看不到也改不了。

什么时候用它

先问一句：这件事能不能在别处配？

想做的事	正确做法
换主色调	站点设置 → 品牌 → 主色（不要写 CSS）
换 Logo / favicon	站点设置 → 品牌
改商品详情页的排版	商品的富文本详情里改
首页放一段促销文字	首页装修加一个富文本楼层

自定义 CSS 是最后的手段 —— 上面这些都做不到时才用它。因为： 系统升级时页面结构可能变，你写死的选择器会静默失效，而没人会想起来回来改。

怎么写

直接写标准 CSS，不要带 <style> 标签。

/* 商品卡片的圆角改小一点 */
.product-card img {
  border-radius: 8px;
}

/* 页脚多留一点空 */
footer {
  padding-bottom: 48px;
}

想改暗色模式

页面会跟随访客系统的深浅色。要分别处理：

/* 只在浅色模式下生效 */
@media (prefers-color-scheme: light) {
  .promo-banner { background: #f5f5f7; }
}

/* 只在深色模式下生效 */
@media (prefers-color-scheme: dark) {
  .promo-banner { background: #1c1c1e; }
}

千万别写死颜色

只写 color: #333 的话，深色模式下就是深灰字压在深色底上，等于看不见。 要么两套都写，要么用系统自带的颜色变量：

.my-box {
  background: var(--apple-surface);   /* 卡片底色，自动跟随深浅 */
  color: var(--apple-text-primary);   /* 正文色 */
  border: 1px solid var(--apple-card-border);
}

可以用的颜色变量

变量	用途
--apple-bg	页面底色
--apple-surface	卡片 / 次级区块底色
--apple-text-primary	正文
--apple-text-secondary	次要文字
--apple-card-border	分隔线 / 卡片边框
--brand	你在「品牌」里配的主色
--on-brand	压在主色上的文字色（系统按对比度自动算的）

手机上要单独处理

/* 只在窄屏生效 */
@media (max-width: 640px) {
  .promo-banner { font-size: 14px; }
}

怎么找到要改的那个选择器

1. 在商城页面上右键 → 检查（Chrome / Edge）
2. 点开发者工具左上角的箭头，再点你想改的那块
3. 右边 Styles 面板里能看到它现在的类名和样式

类名不稳定的部分别碰

形如 .css-1a2b3c 或一长串随机字母的类名是构建时生成的，下次更新就变了。 优先用 <header>、<footer>、.product-card 这类语义清楚的。

常见问题

写了没生效？

按这个顺序查：

1. 保存成功了吗 —— 翻到页面顶部看有没有红色报错
2. 等 5 秒再刷新 —— 站点配置有几秒缓存
3. 强制刷新 —— Ctrl + F5（Mac 是 Cmd + Shift + R），浏览器可能缓存了旧样式
4. 选择器优先级不够 —— 在开发者工具里看你那条是不是被划掉了（删除线）。 是的话在选择器前面多加一层，例如 body .product-card img { … }

别用 !important 硬顶

它能让这一条生效，但会让以后所有想覆盖它的样式都失效，包括系统升级带来的修复。 真需要提高优先级，加一层父选择器（body .xxx）比 !important 干净得多。

把整站弄坏了怎么办

把这个框清空、保存就回到原样了。它不会影响任何数据。