使用应用
外观
外观页面可一次性设置店铺中所有尺码表的样式，使它们都与您的品牌保持一致。页面上的实时预览会即时显示每一处更改。
点击顶部栏中的保存即可应用更改。店铺中所有已启用的尺码表都会立即更新——无需逐个重新保存尺码表。想让某个尺码表看起来不一样？请参阅为单个尺码表设置独立外观。
尺码表窗口
| 设置 | 作用 |
|---|---|
| 宽度 | 窄（适合三到四列）、中（默认）、宽（宽表格无需横向滚动）或特宽（适合在尺码表旁显示产品照片）。 |
| 圆角半径 | 0–24 px。默认 8 px。 |
| 内边距 | 0–48 px。默认 24 px。图表边缘与内容之间的间距。 |
页眉
弹窗或抽屉顶部的栏。
| 设置 | 作用 |
|---|---|
| 显示产品名称 | 在弹窗顶部显示打开它的产品名称。隐藏后，屏幕阅读器仍会朗读该名称。 |
| 页眉背景 | 留空则使用尺码表背景。 |
| 标题颜色 | 留空则使用文字颜色。 |
| 标题对齐 | 左或居中。 |
| 关闭按钮 | 简单 ✕，或实心圆中的 ✕。 |
| 图标颜色 | ✕ 本身的颜色。留空则使用标题颜色。 |
| 圆形颜色 | 用于实心圆样式。 |
产品照片
| 设置 | 作用 |
|---|---|
| 在尺码表旁显示产品照片 | 在尺码表旁显示产品本身的照片，并提供箭头浏览。在较大的屏幕上仅在弹窗中显示——抽屉太窄。建议搭配特宽窗口使用。 |
| 在手机上也显示 | 在手机上，无论是弹窗还是抽屉，照片都会显示在尺码表上方。关闭后，手机上只显示尺码表。 |
背景
| 设置 | 作用 |
|---|---|
| 背景颜色 | 尺码表的底色。默认为白色。 |
| 文字颜色 | 正文颜色——使用深色背景时请一并修改，以保持尺码表清晰易读。 |
| 背景图片 | 显示在整个尺码表后面的图片。 |
| 图片适应方式 | 填满尺码表、完整显示图片或重复（平铺）。 |
| 图片位置 | 居中、顶部或底部。 |
| 叠加层 | 0–90%。用背景颜色淡化图片，使文字保持清晰。0% 时图片原样显示。 |
注意: 内嵌尺码表显示在模板自身的页面背景上，除非您设置了背景图片或白色以外的背景颜色。
表格
| 设置 | 作用 |
|---|---|
| 列标题背景 | 默认为浅灰色。 |
| 列标题文字 | 默认为接近黑色。 |
| 网格线 | 行与单元格之间线条的颜色。 |
| 交替行底色 | 每隔一行加上底色，让宽表格更易于横向阅读。 |
单个表格可以在编辑器的样式选项中覆盖这些颜色。
文字
| 设置 | 作用 |
|---|---|
| 标题颜色 | 尺码表中的标题，以及单位开关中当前单位、键盘焦点轮廓等强调元素。 |
| 基础大小 | 11–20 px。默认 14 px。标题和文字都以此为基准缩放。 |
行为
| 设置 | 作用 |
|---|---|
| 点击外部时关闭 | 默认开启。关闭后，只能通过关闭按钮关闭尺码表。Esc 键始终有效。 |
自定义 CSS
用于上述选项无法覆盖的情况。CSS 会添加到所有显示尺码表的地方。请以 .plug-sc 作为选择器的开头，这样它们只会影响尺码表，而不会影响模板的其他部分。
常用类名：
| 设置 | 作用 |
|---|---|
| .plug-sc__trigger | 尺码表链接或按钮。 |
| .plug-sc__dialog | 弹窗或抽屉窗口。 |
| .plug-sc__heading | 弹窗顶部的标题。 |
| .plug-sc__table | 每个尺寸表格。 |
| .plug-sc__units | 表格上方的单位开关。 |
| .plug-sc__float | 悬浮按钮。 |
| .plug-sc__inline | 内嵌在页面上的尺码表。 |
/* 缩小店铺中的表格文字 */
.plug-sc .plug-sc__table {
font-size: 13px;
}
/* 在手机上隐藏悬浮按钮 */
@media (max-width: 749px) {
.plug-sc .plug-sc__float { display: none; }
}重要: 自定义 CSS 不会进行错误检查。如果修改后显示异常，请清空输入框并保存，即可恢复为标准样式。
重置
恢复默认值会将表单中的每个选项恢复为默认值。在您点击保存之前，店铺中不会有任何变化。