Shopify 主题安装与 Theme Editor 教程

Shopify 主题的安装和自定义都在后台「在线商店 > 主题」完成。安装主题只需要从 Theme Store 添加或上传主题文件，而日常的页面调整则通过「自定义」按钮进入主题编辑器（Theme Editor），用拖拽分区和填写设置的方式完成，整个过程不需要写代码。掌握编辑器的分区、区块、主题设置和模板这几个概念，就能搭建出大部分页面。

安装主题

1. 进入「在线商店 > 主题」，当前对外展示的主题在最上方，叫做「当前主题」。
2. 在页面下方的「主题库」中点击「添加主题」，可以选择「访问 Theme Store」挑选主题，或「上传 zip 文件」安装购买自其它渠道的主题文件。
3. 新主题会出现在主题库中，但不会立即对外发布。你可以先点击「自定义」配置好内容，再点击「发布」把它设为当前主题。
4. 发布前建议对旧的当前主题点击「操作 > 复制」做一份备份，这样随时可以回退。

主题库最多可以保存多个未发布的主题，具体数量以 Shopify 官方说明为准。做大的改动时养成先复制再修改的习惯。

认识主题编辑器

点击「自定义」进入编辑器，界面分三部分：

• 左侧面板：当前页面的分区（Section）和区块（Block）结构，以及页面顶部的「页眉」和底部的「页脚」分区组。
• 中间预览：实时预览，可以切换桌面、移动端视图，也可以在预览中点击元素直接定位到对应设置。
• 右侧 / 下方设置：选中分区或区块后显示它的具体设置项。
• 顶部的页面选择器：切换要编辑的页面类型，例如首页、商品页、系列页、博客、自定义页面、结账等。

分区与区块

• 分区（Section）：页面上的一个横向模块，例如幻灯片、精选系列、图文、多列、视频、新闻订阅。点击「添加分区」可从主题提供的列表中选择，拖动可以排序，眼睛图标可以隐藏。
• 区块（Block）：分区内部的子元素，例如幻灯片里的每一张图、多列模块里的每一列、商品页里的标题、价格、变体选择器、加购按钮、描述等。区块同样可以增删和排序。

Online Store 2.0 主题支持在所有页面类型上添加分区，所以商品页、系列页和博客页都可以像首页一样自由组合。

主题设置

左侧面板底部的「主题设置」是全局样式的入口，包括：

• 颜色：定义颜色方案（Color schemes），每个分区可以选用不同的方案，用于实现深浅背景交替。
• 字体：选择标题和正文字体，Shopify 提供大量免费的网络字体，也支持系统字体以提升速度。
• Logo 与网站图标、布局宽度与间距、按钮与卡片样式、社交媒体链接、购物车类型（抽屉式、页面式、弹窗式）等。

先调好主题设置，再去调整各页面，可以避免重复劳动。

模板：给不同商品不同的页面

默认情况下，所有商品共用一个商品模板。如果某些商品需要特殊布局（例如带尺码表的服饰、带参数表的电子产品），可以在页面选择器中点击「创建模板」，基于默认模板新建一个并调整，然后在商品编辑页右侧的「主题模板」中给对应商品选择它。系列、页面、博客文章也支持同样的多模板机制。

动态源与元字段

在区块的文本、图片等设置旁有一个「连接动态源」图标，可以把这个位置绑定到商品的元字段、商品描述或系列信息。例如在商品页加一个文本区块，绑定到「材质」元字段，每个商品就会自动显示自己的材质。配合 Shopify 商品与系列（Collection）设置指南 中提到的元字段定义，不写代码就能扩展页面内容。

App Blocks 与应用嵌入

安装支持 Online Store 2.0 的 App 后，可以在「添加区块」或「添加分区」的「应用」分类下找到它们，像普通区块一样放到页面任意位置；另一类 App 功能通过左侧的「应用嵌入」开关启用。详细操作见 Shopify App Embed 应用嵌入启用方法。

保存、预览与发布

编辑器中的修改点击「保存」后会立即生效在你正在编辑的那个主题上。如果编辑的是当前主题，客户会马上看到；如果编辑的是未发布主题，可以通过「预览」链接分享给同事审核，确认后再发布。

什么时候需要找服务商

主题编辑器能覆盖布局、文案、颜色这些层面的调整，但做不到的事情也很明确：新增主题没有提供的分区类型、改变区块的交互逻辑、调整结账以外的页面结构、精细控制样式细节。这些就需要修改主题代码。创意时空作为 Shopify Plus Partner，提供从主题配置指导到 Liquid 定制开发的完整服务，如果你在编辑器里卡住了，可以 联系我们。