CSS
将 CSS 粘贴到主题编辑器中 **CHAOBROStudio Design** 区块底部的 **自定义 CSS** 字段。可只影响当前区块，或用 .pod-design-studio 作用于全店所有实例。
快速开始
- 在线商店 → 主题 → 自定义 → 打开 **商品** 模板。
- 选中 **CHAOBROStudio Design** 区块 → 滚动到 **Advanced styling → Custom CSS（自定义 CSS）**。
- 使用下方对照表中的选择器；颜色与按钮建议优先改 CSS 变量（如 --pds-confirm-bg）。
- 保存主题并刷新商品页预览。
作用域说明
每个区块根元素带有 id chaobro-pds-{blockId}（可在浏览器检查元素中查看）。用该 id 作前缀可只样式化一个区块。使用 .pod-design-studio 可样式化店铺内所有 Design Studio 实例。类名均采用 pod-design-studio__* BEM 前缀，避免与主题冲突。
/* One block only */
#chaobro-pds-abc123 .pod-design-studio__btn--confirm {
border-radius: 999px;
}
/* Every Design Studio on the store */
.pod-design-studio {
--pds-accent: #0f766e;
}CSS 变量（推荐）
在 .pod-design-studio 上设置以下变量，可在组件内统一改色与按钮样式，并兼容主题感知与区块尺寸设置。
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| --pds-accent | 主强调色 | 确认按钮、成功状态、高亮元素 | color, background, border-color |
| --pds-accent-text | 强调色上的文字 | 通常为白色或主题按钮文字色 | color |
| --pds-foreground | 主文字颜色 | 开启主题感知时继承店铺主题 | color |
| --pds-muted | 次要文字与提示 | 标签、说明、默认状态文字 | color |
| --pds-background | 面板背景 | 根容器与输入框背景 | background, background-color |
| --pds-border | 边框颜色 | 卡片、标签、输入框、图案按钮 | border-color |
| --pds-radius / --pds-radius-lg | 圆角 | 按钮、输入框、外框 | border-radius |
| --pds-font-body / --pds-font-heading | 字体 | 跟随主题或自定义字体列表 | font-family |
| --pds-confirm-bg / --pds-confirm-color | 确认设计按钮 | 可单独改确认按钮而不影响全局强调色 | background, color, border-color |
| --pds-confirm-radius | 确认按钮圆角 | 默认跟随主题按钮圆角 | border-radius |
| --pds-ui-text-scale | 面板文字缩放 | 由区块「面板文字大小」设置控制 | Read-only; use modifier classes instead |
| --pds-ui-button-scale | 按钮缩放 | 由区块「按钮大小」设置控制 | Read-only; use modifier classes instead |
| --pds-print-overlay-opacity | 印刷区域引导层 | 由「印刷区域透明度」滑块设置（0–100） | opacity (on overlay pseudo-element) |
类名与选择器对照表
布局、预览、标签、表单、图案与操作区的稳定钩子。状态类（.is-active、.is-error 等）由脚本切换。
根容器
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| .pod-design-studio | 整个设计工作室卡片 | 外边距、边框、阴影、基础字体 | padding, border, border-radius, background, box-shadow, font-size |
| #chaobro-pds-{blockId} | 单个区块实例（推荐作用域） | 每个区块带有 id chaobro-pds- 加 Shopify 区块 ID。可将样式限定在某一商品页区块。 | #chaobro-pds-xxx .pod-design-studio__btn--confirm { ... } |
| .pod-design-studio.pod-design-studio--theme-aware | 主题感知模式 | 根元素始终带有此类名 | Use with CSS variables for theme sync |
| .pod-design-studio.is-confirmed | 设计已确认后 | 保存成功后由脚本添加 | box-shadow, outline |
标题与说明
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| .pod-design-studio__title-row | 标题行 | 标题与徽章横向排列 | gap, align-items |
| .pod-design-studio__heading | 区块主标题 | 来自区块设置「Heading」 | font-size, font-weight, color |
| .pod-design-studio__studio-badge | 「Design Studio」徽章 | 标题旁小标签 | background, color, border-radius, font-size |
| .pod-design-studio__required | 必填星号 | 开启「须先确认设计」时显示 | color |
| .pod-design-studio__intro | 介绍文字 | 来自区块设置「Introduction」 | font-size, color, margin |
布局
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| .pod-design-studio__layout | 预览区与面板网格 | 桌面端双列，移动端单列 | grid-template-columns, gap |
| .pod-design-studio__preview-wrap | 实时预览列 | 包含画布容器 | padding, background |
| .pod-design-studio__panel | 控制面板列 | 标签页与表单 | padding, background, border-radius |
实时预览与画布
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| .pod-design-studio__preview-head | 预览区顶栏 | 标签与印刷区域徽章 | display, justify-content |
| .pod-design-studio__preview-label | 「实时预览」标签 | 随店铺语言翻译 | font-size, font-weight |
| .pod-design-studio__preview-badge | 「印刷区域」徽章 | 标示可印刷范围 | background, color, font-size |
| .pod-design-studio__canvas-shell | 画布外层 | 固定比例的 mockup 区域 | aspect-ratio, background, border-radius |
| .pod-design-studio__canvas | 画布元素 | 渲染 mockup、文字、图片、背景 | width, height, cursor |
| .pod-design-studio__canvas.is-draggable | 可拖拽模式 | 图层可拖动时 | cursor: grab |
| .pod-design-studio__canvas.is-dragging | 拖动中 | 正在拖动 | cursor: grabbing |
| .pod-design-studio__canvas-hint | 画布下方拖动提示 | 不需要时隐藏 | font-size, color |
标签页
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| .pod-design-studio__tabs | 标签列表容器 | 文字 / 图片 / 图案 | display, gap, flex-wrap |
| .pod-design-studio__tab | 单个标签按钮 | role=tab | padding, border, background, font-size |
| .pod-design-studio__tab.is-active | 当前选中标签 | 对应当前面板 | background, border-color, color |
| .pod-design-studio__tab-icon | 标签图标（图标样式） | SVG 图标容器 | width, height |
| .pod-design-studio__tab-label | 标签文字 | 纯图标样式下隐藏 | font-size |
| .pod-design-studio__tab-panel | 标签内容面板 | 每个标签一块；未激活时有 hidden | padding, display |
| .pod-design-studio--tabs-button | 实心按钮标签样式 | 区块设置「Tab style」 | Modifier on root |
| .pod-design-studio--tabs-square | 方形描边标签 | 区块设置「Tab style」 | Modifier on root |
| .pod-design-studio--tabs-rounded | 圆角描边标签（默认） | 区块设置「Tab style」 | Modifier on root |
| .pod-design-studio--tabs-icon | 纯图标标签 | 区块设置「Tab style」 | Modifier on root |
表单字段
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| .pod-design-studio__field | 字段容器 | 标签与控件间距 | margin, gap |
| .pod-design-studio__field-grid | 多列字段行 | 如颜色 + 字号 | grid-template-columns, gap |
| .pod-design-studio__label | 字段标签 | 所有 label 与 span 标签 | font-size, font-weight, color |
| .pod-design-studio__hint | 辅助说明文字 | 图案页提示 | font-size, color |
| .pod-design-studio__input | 文本输入框 | 自定义文字 | padding, border, border-radius, font-size |
| .pod-design-studio__textarea | 多行文本输入框 | 提示词输入 | min-height, padding, border |
| .pod-design-studio__select | 下拉选择框 | 字体、旋转等 | padding, border, appearance |
| .pod-design-studio__color | 颜色选择器 | 原生 color 输入 | width, height, border |
| .pod-design-studio__range | 滑块 | 字号、图片缩放 | accent-color, height |
| .pod-design-studio__range-value | 滑块数值显示 | 如 36 或 70% | font-size, min-width |
图片上传
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| .pod-design-studio__upload | 上传区域 | 图片标签页 | display, gap |
| .pod-design-studio__upload-btn | 上传按钮 | 关联 file input 的 label | padding, border, background |
| .pod-design-studio__upload-name | 已选文件名 | 选中文件后加 .is-selected | font-size, color |
| .pod-design-studio__file-input | 隐 藏的文件输入 | 视觉隐藏；勿改 display | position, opacity |
背景图案
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| .pod-design-studio__pattern-grid | 图案按钮网格 | 来自背景选项设置 | grid-template-columns, gap |
| .pod-design-studio__pattern | 图案缩略按钮 | 每个按钮带 data-pattern-id | width, height, border, border-radius |
| .pod-design-studio__pattern.is-active | 当前选中图案 | 高亮描边 | border-color, box-shadow |
| .pod-design-studio__pattern[data-pattern-id="dots"] | 内置圆点缩略图 | 通过 ::before 预览 | /* use data-pattern-id */ |
| .pod-design-studio__pattern--image | 图片图案缩略图 | 配置了图片 URL 时 | background-image on ::before |
页脚与按钮
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| .pod-design-studio__footer | 底部区域 | 确认、重置、状态 | margin-top, padding-top, border-top |
| .pod-design-studio__actions | 按钮行 | 确认 + 重置 | display, gap, flex-wrap |
| .pod-design-studio__btn | 基础按钮 | 所有按钮基类 | padding, border, font-size, min-height |
| .pod-design-studio__btn--confirm | 「确认设计」 | 主要前台操作 | background, color, border-radius, min-height |
| .pod-design-studio__btn--ghost | 「重置」按钮 | 次要描边样式 | background, border-color |
| .pod-design-studio__status | 状态消息 | role=status 实时区域 | font-size, color, min-height |
| .pod-design-studio__status.is-error | 错误状态 | 保存或 API 错误 | color |
| .pod-design-studio__status.is-success | 成功状态 | 设计已确认 | color |
尺寸修饰类（区块设置）
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| .pod-design-studio--ui-text-small | 小号面板文字 | 面板文字大小 = Small | --pds-ui-text-scale |
| .pod-design-studio--ui-text-medium | 中号面板文字（默认） | 面板文字大小 = Medium | --pds-ui-text-scale |
| .pod-design-studio--ui-text-large | 大号面板文字 | 面板文字大小 = Large | --pds-ui-text-scale |
| .pod-design-studio--ui-btn-small … --ui-btn-xlarge | 按钮尺寸预设 | 区块「按钮大小」设置 | --pds-ui-button-scale |
Data 属性（参考）
| 选择器 | 作用对象 | 说明 | 常用属性 |
|---|---|---|---|
| [data-pod-design-studio] | 根节点标记 | 脚本通过此属性初始化 | Do not remove |
| [data-studio-canvas] | 画布 | 预览渲染目标 | — |
| [data-confirm-design] | 确认按钮 | 触发保存到 CHAOBROStudio API | — |
| [data-reset-design] | 重置按钮 | 清除图层与 line item 属性 | — |
| [data-studio-status] | 状态文字节点 | 同 .pod-design-studio__status | — |
| [data-pattern-id] | 图案 ID | 对应背景选项中的 id | — |
| [data-tab] / [data-tab-panel] | 标签页 ID | text | image | pattern | — |
示例代码
复制到「自定义 CSS」字段后按需修改。
仅圆角确认按钮
.pod-design-studio {
--pds-confirm-radius: 999px;
--pds-confirm-bg: #111827;
--pds-confirm-color: #ffffff;
}移动端紧凑面板
@media (max-width: 749px) {
.pod-design-studio {
padding: 0.75rem;
}
.pod-design-studio__layout {
gap: 0.75rem;
}
}仅作用于单个区块
/* Replace BLOCK_ID with your Shopify block id (inspect element) */
#chaobro-pds-BLOCK_ID .pod-design-studio__heading {
font-size: 1.5rem;
letter-spacing: -0.02em;
}整体强调色
.pod-design-studio {
--pds-accent: #2563eb;
--pds-accent-text: #ffffff;
--pds-confirm-bg: #2563eb;
--pds-confirm-color: #ffffff;
}提示
- 优先使用 CSS 变量，再覆盖具体类名，升级后更不易失效。
- 除非必要请避免 !important；组件已控制合理优先级。
- 请勿隐藏 [data-confirm-design] 或破坏无障碍 role。
- 自定义 CSS 仅影响店铺前台，不改变 Shopify 后台应用界面。
- 密码保护测试店确认设计走 CHAOBROStudio API，与样式无关。