OS 3.0 主题介绍（抢先体验阶段）
SHOPLINE推出全新的 OS 3.0 主题，支持全新的组件组织结构、灵活的布局排版设置、独立的移动端设计和全新的模板引擎，为您提供了更强大的功能支持，帮助您轻松打造一个性能极佳且符合品牌形象的在线商店。无论是桌面端还是移动端，您都可以享受到更流畅、更精细化的页面设计体验。
|
备注：OS 3.0 主题正在进入抢先体验阶段，其与 OS 2.1 主题版本差异详见后文部分。您可以对比了解和体验后再选择合适的主题进行装修设计、预览及发布。 |
OS 3.0 主题亮点
1.全新的组件结构
OS 3.0 主题对组件的组织结构进行了全新的设计，您可以在一个组件中添加更多细分层级的 block，从而实现更为精细的页面设计。通过这种方式，您可以在同一页面中灵活构建和排列不同类型的内容模块，打造出更加丰富、层次感强的页面布局，操作步骤：
- 进入主题编辑器，打开组件列表
- 在任意需要添加下级元素的 section/block 右侧点击「添加内容图标」，即可添加下级元素
- 选择要添加的 block，即可添加下级元素
2.灵活的布局样式设置
您可以通过简单的设置调整页面中元素的位置、间距、对齐方式等，使得页面排版更加符合设计需求。在处理复杂的布局时，能更精确地调整元素的样式和排列，操作步骤：
- 选中需要调整布局排版的 section/block
- 在操作栏对排版、边距、尺寸，进行精细化调整
（1）排版：
| 排版设置 |
操作 |
效果 |
| 排布方向 |
有多个元素进行排列时，可以通过排布方向调整。 例：商品详情页中的图片与商品信息位置。 |
|
| 自动换行 | 当排列元素超出容器的宽度/高度时，自动进行换行展示。 | |
| 对齐方式与展示位置 |
用于控制元素在整体容器中的相对位置。 例：文本信息在轮播图上的位置。 |
|
| 间距 |
同一层级元素之间的行间距、列间距。 例如:商品卡片中图片、标题、价格之间的间距。 |
（2）边距
当前选中的容器自身的内边距。
（3）尺寸
当前选中元素的绝对宽高，或相对于父级容器的相对大小。
3.移动端调整与预览
排布、边距、尺寸内容，支持针对电脑端、移动端分别调整样式。
当该设备单独调整样式后，对应的配置项将出现下划线提示。
移动端支持选择常见的设备进行预览。
OS 3.0 与 OS 2.1 主题版本差异对比
| 对比维度 | OS 2.1 | OS 3.0 |
| 模板语法与渲染性能 | Handlebars | Sline（更高渲染性能，更快渲染速度） |
| 主题编辑能力全面提升 |
仅支持两级结构级别； 仅支持section维度的移动，灵活度有限
|
可编辑组件维度更精细，新增至多 5 级结构； Block 插入与调整更加灵活 |
| 配色方案数量 |
仅支持单一配色方案 |
支持多个配色方案 |
| 布局效果 | 不支持组件的自由调整，布局灵活度有限 | 可以通过调整多元素排布方向、调整同一层级元素之间的行间距、列间距使页面排版更加符合设计需求 |
| 页头页脚 |
相对固定； 支持国家选择器、语言选择器 |
支持灵活调整； 未支持国家选择器、语言选择器（即将上线） |
| 开发者效率工具：VSCODE 插件、Theme Check 等 | 已经支持 | 未支持（预计 7 月进入抢先体验阶段） |
| 高阶组件库插件 | 支持所有组件 |
支持大部分组件。对比 OS 2.1 主题，未支持组件如下：
|
| 插件兼容性 | 大部分插件支持 |
部分插件未支持或未完全兼容。建议先添加为草稿主题进行体验测试，以实际效果为准。 以 Bottle 主题为例，以下插件未完全兼容：
|
使用 OS 3.0 主题的操作步骤
- 在 SHOPLINE 后台【渠道】 >【在线商店】>【店铺设计】>【主题商城】，查找 Bottle 主题或直接点击主题介绍页面。
- 点击【免费使用】，装修设计并检查无误后可以点击发布。