Shopify 知识库 · 指南
店面布局：全宽背景、居中内容与商品网格
店面布局 CSS：用三列 Grid 实现全宽背景与居中内容，用 auto-fit 构建商品卡片网格，并给出宽度决策与小屏检查方法。
店面布局先回答两个问题：背景需要延伸到哪里，内容需要限制在多宽。把这两个边界分开，Hero、图文区域与产品网格就可以保持一致的内容对齐。
全宽背景与居中内容
用三列 Grid 表达左右边距与中央内容区。下面是独立的教学 CSS，类名不依赖 Dawn 或 Horizon；它不是对某个主题源码版本的复刻。
.content-band {
display: grid;
grid-template-columns: minmax(1rem, 1fr) minmax(0, 72rem) minmax(1rem, 1fr);
}
.content-band > * {
grid-column: 2;
min-width: 0;
}
.content-band > .full-width {
grid-column: 1 / -1;
}
让背景属于外层区域，普通内容位于中央列，需要铺满时才跨越全部列。minmax 的轨道边界与 Grid 列定义参见MDN。
卡片网格
商品或文章卡片需要在不同宽度下自动排列。RAM（Repeat、Auto、Minmax）写法组合重复轨道与最小卡片宽度；下面额外用 min() 限制最小值不超过容器，避免窄容器被固定最小宽度撑开。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
这里只展示布局规则，不包含完整商品卡片逻辑。卡片的图片、标题和按钮仍需要分别定义内容和交互。
将视觉决定写成可验证条件
| 决定 | 检查方法 |
|---|---|
| 内容宽度 | 大屏上正文是否过长，小屏是否超出容器 |
| 图片比例 | 不同比例的素材是否被错误裁切或变形 |
| 文案长度 | 长标题、翻译后的按钮、无空格字符串是否撑开布局 |
| 颜色 | 文字、链接、焦点与状态是否能辨认 |
| 交互区域 | 键盘能否到达，聚焦时是否可见 |
品牌色、背景色和状态色可以作为颜色命名思路，但不是 Shopify 规定的统一 token。第三方 UI 库的颜色名称也不能直接推导为主题配置名称。
应用到主题时
先检查现有主题是否已有宽度、边距和配色配置，再决定是否新增样式。复制一段全局选择器可能影响其他分区；优先在明确范围内验证。本文提供通用 CSS 示例，不声称已在具体商家主题中完成视觉验收。
继续阅读页面内容组合。