Start Strong
Sell Smart
Manage with Ease
Market to Success

使用主题编辑器设计您的商店

选定心仪的商店主题后，您可以进入主题编辑器，使用 SHOPLINE 的内置工具来个性化布置您的商店。本指南将带您了解如何进入编辑器、熟悉其核心功能以及进行高级设置，帮助您快速打造一个极具吸引力的在线商店。

 

 

进入主题编辑器

选定商店主题后，请按照以下步骤进入主题编辑器并开始个性化布置您的商店：

  1. 在 SHOPLINE 管理后台，前往【在线商店】>【设计】。
    image.png

  2. 前往【我的主题】分页，在当前主题板块中点击【设计】。
    image.png

  3. 随后即可在主题编辑器中开始个性化设定您的主题。
    image.png

 

 

主题编辑器功能简介

点击当前主题上的【设计】按钮，即可进入 SHOPLINE 主题编辑器。以下是主要工具的概览：

页面选择器与预览操作

使用页面选择器和预览工具，可以快速切换布局并在发布前查看更改效果。

  • 页面选择器：在不同页面（如首页、商品详情页）之间切换，以个性化设置各个页面的布局。
    image.png

  • 预览按钮：点击右上角的【预览】，可选择：
    image.png

    • 在编辑器预览：在当前编辑器窗口中查看更改。

    • 查看在线网店：在窗口中打开已发布的在线商店。

组件侧边栏（左侧边栏）

通过组件侧边栏添加、重新排列和个性化设置页面元素，管理网站的视觉结构。

  • 添加组件：点击 添加组件 插入并配置新的页面模块。
    image.png
  • 拖拽排序：通过拖拽轻松移动 Sections 和 Blocks，调整页面结构。
    image.png

全局设置

通过配置全店的全局样式来保持品牌一致性。您可以个性化设置品牌识别（徽标 Logo 和网站图标 Favicon）、排版、颜色以及布局元素（如按钮、卡片和媒体容器），确保品牌形象的一致性。
image.png

设备预览选项

通过多种预览方式，确保您的商店在各种屏幕尺寸下都表现专业：

  • 图标切换：点击页面选择器旁的【电脑】或【手机】图标，快速切换预览视图。
    image.png
  • 预览设备选择：点击编辑器底部的【预览机型】，可选择各种流行的智能手机和平板电脑型号。
    image.png
  • 手机二维码：将鼠标悬停在二维码图标上，使用手机扫描即可直接在您的移动端设备上预览主题。
    image.png

撤销与重做：快速编辑

在个性化布置商店时，您可以轻松撤销或重做最近对布局或设置所做的更改。这让您可以大胆尝试不同的设计，并根据需要快速恢复先前的编辑或重新应用更改，且不会影响已保存的工作进度。
image.png

 

 

个性化设置商店默认文本

每个主题都附带内置的默认文本，但您可以通过【编辑语言】功能进行个性化设置。这让您可以调整在线商店的系统用词，使其更符合您的品牌语调。以下是两个常见的应用场景：

注意：如需了解所有主题管理功能的概览，请参考文章《SHOPLINE 主题介绍》。

应用场景 1：个性化设置版权信息

您可以更改系统标准的版权声明，加入您的品牌名称或特定信息。例如，将「© 2026 您的品牌名称」更改为「Copyright © 2026 您的品牌名称。保留所有权利。」

设置步骤：

  1. 在主题编辑器中，点击 [...] 图标（更多操作） 并选择【编辑语言】。
  2. 使用搜索栏查找特定信息（例如：Copyright）。
    image.png
  3. 在字段中输入您的个性化文字，然后点击【更新】。
    image.png

应用场景 2：多语言优化

如果您的商店支持多种语言，您可以切换不同的语言分页，以确保每个默认标签在不同市场都能得到自然、准确的翻译。

设置步骤：

  1. 在主题编辑器中，点击 [...] 图标（更多操作）并选择【编辑语言】。
  2. 在编辑界面的顶部，点击【切换】选择您想要优化的语言分页。点击【完成】保存更改。
    image.png
  3. 搜索您想要调整的词组（例如：error 404 message），输入本地化文字，然后点击【更新】。
    image.png

注意：

  • 在【编辑语言】中所做的更改仅适用于所选主题，不会影响您商店中的其他主题。
  • 对于使用 OS 3.0 主题的商家，当您在 Checkout & system 下编辑默认文本时，系统会引导您前往独立的【结账】页面完成更新。与其它模块不同，在此板块中所做的更改将适用于所有 OS 3.0 主题。更改只有在该页面保存后才会生效。
    4.0_CN.png

 

 

自定义与下载主题代码

对于具备技术专业知识的用户，SHOPLINE 提供了对主题结构的深度控制。您可以点击 [...] 图标（更多操作） 来访问这些进阶选项。

编辑代码

使用此功能编辑主题的源文件（HTML、CSS、JSON）进行高级自定义：

  1. 在 SHOPLINE 管理后台，前往【在线商店】>【设计】。
  2. 找到您的当前主题，点击主题卡片上的 [...] 图标（更多操作），然后选择【编辑代码】。
  3. 在代码编辑器中，从左侧边栏选择一个文件（例如：在 layout, templates, sections, 或 i18n 目录下）开始编辑。
    image.png
警告：修改代码会将主题转变为 自定义主题。自定义主题无法接收来自 SHOPLINE 的自动系统更新。

下载主题代码

image.png

使用此功能下载主题源代码的 ZIP 文件，用于本地备份：

  1. 在 SHOPLINE 管理后台，前往【在线商店】>【设计】。
  2. 找到您的当前主题，点击主题卡片上的 [...] 图标（更多操作），然后选择【下载代码】。
  3. 在弹窗中，点击【发送电子邮件】确认下载请求。下载链接随后将发送至与您的管理员账号关联的邮箱地址。
注意：虽然系统支持代码编辑，但如果您的商店目前处于 14 天试用期内，则无法下载完整的主题代码。