跳到主要内容

概述

theme 控制着商家在线商店的组织结构与视觉风格。theme 代码按照 Shoplazza theme 专属的标准目录结构进行组织，并包含图片、样式表和脚本等辅助资产。如需了解 theme 在 Shoplazza 中的定位以及如何搭建开发环境，请参阅 Shoplazza theme 概述。

内容​

theme 文件分为以下几大类：

  • 标记文件 — 这些文件控制 theme 的布局与功能，使用 Liquid 生成构成商家在线商店各页面的 HTML 标记。
  • 辅助资产 — 这些文件是 theme 中其他文件调用或使用的资产、脚本或 locale 文件。
  • 配置文件 — 这些文件使用 JSON 存储配置数据，商家可通过主题编辑器自定义这些数据。

标记文件​

以下几个部分决定了每个页面的组织结构：

编号组件描述
1layout 文件theme 的基础。使用 layout 文件承载页眉、页脚等需要在多个页面重复出现的 theme 元素。
2template控制页面显示内容的 template。每个 theme 应包含不同类型的 template，以展示不同类型的内容，例如首页和商品页。
3template 渲染的 section商家可添加到 Liquid template 中的可复用、可自定义内容模块。
4每个 section 包含的 block可添加到 section 中的可复用、可自定义内容模块，支持添加、移除和重新排序。

辅助资产​

您可以在 theme 中添加辅助资产，用于控制组件和功能的呈现方式，或存储可跨组件复用的代码片段。

例如，您需要添加资产来为 theme 定义样式。这些资产通过定义在线商店的视觉风格以及各 section 的样式来体现商家品牌特色。theme 的样式由应用于 layout、template 和 section 文件的 CSS 和 JavaScript 定义。

您希望在 theme 中复用的 Liquid、HTML、CSS 和 JavaScript 可以存放在 snippet 中。theme 的 CSS 和 JavaScript 也存储在 theme 的 assets 目录中。

此外，您还可以使用 locale 文件将 theme 翻译为不同语言。locale 文件包含 theme 中各处文本字符串的翻译内容，存储在 theme 的 locales 目录中。

支持 theme 组件的自定义​

商家可以在 Shoplazza 管理后台通过 Shoplazza 主题编辑器自定义其 theme。Theme 可以提供多种自定义选项，让商家打造理想的客户体验：

  • 您可以通过创建多个 section 和 block，使 theme template 和 layout section group 模块化。请参阅我们的 section 和 block 最佳实践，了解如何有效设计 section 和 block。
  • 您可以创建设置项，允许商家控制 theme 的外观或行为。商家可以通过动态数据源为设置项赋予动态值。

目录结构与组件类型​

Theme 必须使用以下目录结构：

.
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers

不支持上述列表以外的子目录。

📘 注意

theme 上传至 Shoplazza 的唯一必需条件是：layout 目录中包含 theme.liquid 文件。

assets​

assets 目录包含 theme 使用的所有资产，包括图片、CSS 和 JavaScript 文件。

在 theme 中引用资产时，请使用 shoplaza_asset_url Liquid URL filter。

config​

config 目录包含 theme 的配置文件。配置文件用于定义主题编辑器主题设置区域中的设置项，并存储其对应的值。

主题设置非常适合用于承载排版、颜色等通用设置。主题设置可通过 settings 对象访问。

📘 提示

您也可以为 section 和 block 创建设置项。这些设置项作为父级 section 或 block 对象的一部分定义，并与关联对象一起显示在主题编辑器中。

layout​

layout 目录包含 theme 的 layout 文件，所有 template 文件都通过 layout 进行渲染。

Layout 是 Liquid 文件，允许您将需要在多个页面类型中重复出现的内容放在同一位置管理。

此文件夹中必须存在 theme.liquid 文件，theme 才能上传至 Shoplazza。

locales​

locales 目录包含 theme 的 locale 文件，用于提供翻译内容。Locale 文件允许您在主题编辑器中提供翻译体验，为在线商店提供译文，并允许商家自定义在线商店中的文本内容。

sections​

sections 目录包含 theme 的 section。

Section 是 Liquid 文件，允许您创建商家可自定义的可复用内容模块。Section 还可以包含 block，允许商家在 section 内添加、移除和重新排序内容。

snippets​

snippets 目录包含承载较小可复用代码片段的 Liquid 文件。您可以在整个 theme 中通过 Liquid include 标签或 render 标签来引用这些 snippet。

templates​

templates 目录包含 theme 的 template 文件，用于控制每种类型页面的渲染内容。

templates/customers 目录包含面向客户的页面（如登录页及相关账户概览页）的 template 文件。

您可以使用 template 添加适合该页面类型的功能。例如，可以在商品 template 中添加额外的商品推荐内容。

template 不是必需的，但您需要为每种要渲染的页面类型提供对应的 template。例如，要渲染商品页面，至少需要一个 product 类型的 template。