CSS 可以改变店铺的外观:颜色、间距、尺寸等等。您可以在建站工具中的两个地方添加自己的 CSS:作用于整个店铺,或只作用于一个版块。
整个店铺的自定义 CSS
点击齿轮图标,打开自定义 CSS标签。输入框名为CSS 代码:应用于整个店铺。您的 CSS 会在您正在编辑的市场的每个页面上加载,预览会显示效果。
它适用于必须在所有地方生效的规则,例如在所有页面上隐藏某个元素,或更改所有按钮的样式。例如,h1 { text-transform: uppercase; } 会把每个页面的主标题显示为大写字母。
单个版块的自定义 CSS
在版块标签中选择一个版块。在其设置底部,打开自定义 CSS标签。它的CSS 代码输入框显示仅应用于此版块。大多数版块都有它,包括页头、页脚、主视觉、产品信息和结账。
这是更安全的选择。Storeep 会在您的每个选择器前面加上该版块,所以您的规则不会改变版块之外的任何内容。
h2 { letter-spacing: 2px; }只会改变此版块内的标题。- 使用
&为版块本身设置样式:& { border-top: 1px solid #000; }。 @media规则可以使用。其中的规则同样只作用于该版块。@keyframes动画会按您编写的原样保留。
版块 CSS 属于该页面上的该版块。对版块使用应用到所有页面,即可把版块连同它的 CSS 一起复制到包含它的其他页面。请参阅应用到所有页面。
使用哪一个
- 某个版块看起来不对:使用该版块的自定义 CSS。
- 所有地方都需要同样的更改:使用“自定义 CSS”设置标签。
- 编写 CSS 之前,先检查是否已有设置能做到:颜色在配色方案中,字体在字体设置中,圆角和阴影来自您的主题。
CSS 不生效时
- 检查是否缺少
}或;。一个错误就可能让后面的规则失效。 - 您的规则可能比主题规则的优先级低。请让选择器更具体。
- 在版块 CSS 中,不要以
body或html开头写选择器。它们位于版块之外,所以规则不会匹配。 - 如果页面看起来坏了,请删除最近一次更改并发布,然后逐条把规则加回去。
小贴士
- 自定义 CSS 属于您正在编辑的市场。请在每个需要的市场中重复添加。
- 更换主题可能会改变类名和布局,所以更换主题后请检查您的自定义 CSS。
- 点击发布后更改才会上线。
- 关于页面中的 HTML 和代码,请参阅自定义代码。