跳到主要内容

自定义主题

作为 theme 开发者,您可以为 Shoplazza 商家自定义 theme。这些自定义工作的范围可大可小,从细微调整到完整重新设计都有可能。

本教程将带您使用 Shoplazza CLI 为商家自定义 theme,并与商家共享进度。

您将学到什么

完成本教程后,您将实现以下目标:

  • 获得商家商店的访问权限
  • 搭建本地开发环境
  • 下载商家 theme 的副本
  • 进行修改并预览效果
  • 与商家共享您的修改
  • 发布修改内容

前置要求

  • 您要操作的商店 URL,例如 your-store.myshoplaza.com

安装 Shoplazza CLI 的系统要求

安装和运行 Shoplazza CLI 的要求取决于您的操作系统:

第一步:申请访问商家商店

要为商家修改 theme,您需要申请访问其商店。在商家商店中操作 theme,可以使用商家的真实商品和其他资源进行测试。

📘 注意

您也可以通过其他账号和凭证访问 theme。了解更多

第二步:安装 Shoplazza CLI

如果尚未安装,请先安装 Shoplazza CLI。Shoplazza CLI 是帮助您构建 Shoplazza theme 的命令行工具,支持在本地开发时预览、测试和共享 theme 变更。请按照以下说明在 macOS、Windows 或 Linux 上安装。

npm install -g shoplazza-cli

第三步:下载商家的 theme 代码

如果本地没有 theme,需要先下载一份 theme 代码副本以便在本地操作。

  1. 运行以下命令获取商店中所有 theme 的列表:
shoplazza theme pull
  1. 从列表中选择一个 theme,其内容将下载到当前文件夹或指定文件夹。

📘 提示

如果您尚未登录,运行 pull 命令时会提示您登录 Shoplazza。请确保使用已获得该商店访问权限的账号登录。如果当前登录的账号没有相应权限,可以运行 shoplazza logout 退出登录。

第四步:进行自定义修改

下载商家 theme 后,您可以对 theme 代码进行任何必要的修改。例如,调整 theme 的 CSS 来改变其外观。

如需探索更多功能教程,请参阅后续步骤

第五步:预览修改效果

修改 theme 后,运行 shoplazza theme serve 即可在浏览器中与 theme 进行交互。Shoplazza CLI 会将该 theme 作为开发主题上传至您连接的商店。

该命令会返回一个 URL,支持对 CSS 和 section 的本地修改进行热重载,让您可以使用商店真实数据实时预览变更。此预览仅在 Google Chrome 中可用。

  1. 在终端中,导航到您的工作目录。
  2. 运行以下命令启动 theme 服务:
shoplazza theme serve
  1. 为开发主题生成预览链接以及主题编辑器链接。

第六步:与商家共享修改

要与商家共享修改,需要将 theme 变更上传至商家商店。系统会提示您选择要更新的 theme。

shoplazza theme push

第七步:发布更新后的 theme

商家确认修改后,您可以发布 theme,使其在商家商店中上线。如果尚未将修改推送至商店,请先执行推送再发布。

  1. 输入以下命令:
shoplazza theme publish
  1. 从列表中选择要发布的 theme。
  2. 选择确认发布指定 theme。

theme 发布成功,现已成为商店的当前激活主题。

后续步骤