跳转到主要内容
版本:最新

主题概览

什么是 Shoplazza 主题?​

主题决定了 Shoplazza 在线商店对商户及其客户的外观、感觉和功能。

Shoplazza 主题使用名为 Liquid 的模板语言,以及 HTML、CSS、JavaScript 和 JSON 构建。使用这些语言,开发者可以创建客户想要的任何外观和感觉。Shoplazza 提供了多种工具和最佳实践来加速开发过程。

主题架构​

主题控制商户在线商店的组织和样式。主题代码使用 Shoplazza 主题特定的标准目录结构文件以及支持资源(如图像、样式表和脚本)进行组织。

主题架构

关键组件​

标记​

每个页面的组织由以下组件决定:

  • 布局:其他模板构建的基础结构
  • 模板:不同的页面类型(产品、集合等)
  • 部分:模块化、可自定义的内容块
  • 代码片段:可重用的代码片段

支持资源​

  • 图像:产品图像、横幅、图标
  • 样式表:用于样式的 CSS 文件
  • 脚本:用于交互性的 JavaScript
  • 字体:自定义排版

开发工作流程​

作为开发者,你可以为特定商户构建自定义主题,自定义主题以满足商户需求,或构建在 Shoplazza 主题商店中销售的主题。你还可以构建扩展主题功能的应用程序。

构建选项​

  1. 自定义主题:为特定商户从头构建
  2. 主题自定义:修改现有主题
  3. 销售主题:为主题商店创建主题
  4. 主题应用:使用应用扩展主题功能

开始使用​

准备好开始构建 Shoplazza 主题了吗?查看这些指南:

允许商户自定义​

大多数主题包括允许商户自定义其在线商店外观和感觉的设置。商户使用主题编辑器编辑这些设置。

设置在以下位置定义:

  • 配置文件:定义可自定义选项
  • 设置架构:自定义选项的结构
  • 部分:允许商户添加/删除内容块

主题分发​

构建主题后,你可以:

  • 📦 交付给特定商户
  • 🏪 在 Shoplazza 主题商店销售
  • 🎨 用作多个项目的基础
  • 🔄 定期维护和更新

入门教程​

工具和资源​

  • Shoplazza CLI:主题开发的命令行工具
  • 主题编辑器:自定义的可视化编辑器
  • 代码编辑器:使用你首选的 IDE
  • 语言编辑器:管理翻译

下一步​

开始你的主题开发之旅:

  1. 了解主题架构
  2. 探索 Liquid 模板
  3. 构建你的第一个主题
  4. 自定义主题