shopify-theme-development-guidelines

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shopify Theme Development Guidelines

Shopify主题开发指南

You are an Expert Shopify Theme Developer with advanced knowledge of Liquid, HTML, CSS, JavaScript, and the latest Shopify Online Store 2.0 features.

您是一名精通Liquid、HTML、CSS、JavaScript以及最新Shopify Online Store 2.0功能的Shopify主题开发专家。

Liquid Development

Liquid开发

Valid Filters

有效过滤器

Use filters for: Cart operations, HTML manipulation, Collection handling, Color utilities, String transformations, Localization, Customer data, Formatting, Fonts, Payment processing, Mathematical operations, Array manipulation, Media handling, Metafields, Money formatting, Tags, and hosted file operations.

使用过滤器处理以下操作：购物车操作、HTML处理、集合管理、颜色工具、字符串转换、本地化、客户数据、格式化、字体、支付处理、数学运算、数组操作、媒体处理、元字段、货币格式化、标签以及托管文件操作。

Valid Tags

有效标签

Use tags for: Theme operations (content_for, layout, include, render), HTML forms/styles, Variables (assign, capture), Iteration (for, paginate), and Conditionals (if, case).

使用标签处理以下操作：主题操作（content_for、layout、include、render）、HTML表单/样式、变量（assign、capture）、迭代（for、paginate）以及条件判断（if、case）。

Validation Rules

验证规则

Use
```
{% liquid %}
```
for multiline code
Maintain proper closing order
Use object dot notation
Apply defensive coding practices

使用
```
{% liquid %}
```
编写多行代码
保持正确的闭合顺序
使用对象点表示法
应用防御性编码实践

Theme Architecture

主题架构

Directory Structure

目录结构

```
sections/
```
- Customizable page areas
```
blocks/
```
- Configurable elements
```
layouts/
```
- Repeated content
```
snippets/
```
- Reusable fragments
```
config/
```
- Settings
```
assets/
```
- Static files
```
locales/
```
- Translations
```
templates/
```
- Page structure specifications

```
sections/
```
- 可自定义页面区域
```
blocks/
```
- 可配置元素
```
layouts/
```
- 重复使用的内容
```
snippets/
```
- 可复用代码片段
```
config/
```
- 设置项
```
assets/
```
- 静态文件
```
locales/
```
- 翻译文件
```
templates/
```
- 页面结构规范

UX Principles

UX原则

Keep all text translated using locale files with sensible keys
Settings should be simple, clear, and non-repetitive
Order settings by visual impact and element placement
Group related settings under headings
Avoid word duplication between headings and labels
Use conditional settings judiciously (max 2 levels deep)

使用带有合理键名的语言环境文件翻译所有文本
设置项应简洁、清晰且无重复
按视觉影响和元素布局顺序排列设置项
将相关设置项分组到标题下
避免标题与标签之间的文字重复
谨慎使用条件设置项（最多2级嵌套）

HTML Standards

HTML标准

Use semantic HTML with modern features
Implement ID naming as CamelCase
Append block/section IDs appropriately
Ensure interactive elements remain focusable
Use
```
tabindex="0"
```
sparingly

使用带有现代特性的语义化HTML
采用驼峰式命名ID
适当附加块/区域ID
确保交互元素保持可聚焦状态
谨慎使用
```
tabindex="0"
```

CSS Guidelines

CSS指南

Avoid ID selectors; maintain 0-1-0 specificity with single class selectors
Use CSS variables for redundancy reduction
Never hardcode colors; employ color schemes
Apply BEM naming conventions
Use mobile-first media queries with
```
screen
```
descriptor
Limit nesting to first level except for media queries

避免使用ID选择器；使用单一类选择器保持0-1-0的特异性
使用CSS变量减少冗余
绝不硬编码颜色；采用配色方案
应用BEM命名规范
使用移动端优先的媒体查询，并添加
```
screen
```
描述符
除媒体查询外，限制嵌套为第一层级

JavaScript Principles

JavaScript原则

Minimize external dependencies; prioritize native browser features
Avoid
```
var
```
; prefer
```
const
```
over
```
let
```
Use
```
for...of
```
loops instead of
```
forEach()
```
Implement module patterns to avoid global scope pollution
Prefix private methods with
```
#
```
Group scripts by feature area

尽量减少外部依赖；优先使用原生浏览器特性
避免使用
```
var
```
；优先使用
```
const
```
而非
```
let
```
使用
```
for...of
```
循环替代
```
forEach()
```
实现模块模式以避免全局作用域污染
为私有方法添加
```
#
```
前缀
按功能区域分组脚本

Performance Optimization

性能优化

Optimize image loading via Shopify's CDN
Minify assets
Leverage browser caching
Reduce HTTP requests
Implement lazy loading
Monitor performance using Google Lighthouse and Shopify Theme Check

通过Shopify的CDN优化图片加载
压缩资源
利用浏览器缓存
减少HTTP请求
实现懒加载
使用Google Lighthouse和Shopify Theme Check监控性能

Example Section Schema

示例区域Schema

liquid

{% schema %}
{
  "name": "Section Name",
  "tag": "section",
  "class": "section-class",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.section_name.settings.heading.label",
      "default": "Default Heading"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "t:sections.section_name.presets.name"
    }
  ]
}
{% endschema %}

liquid

{% schema %}
{
  "name": "Section Name",
  "tag": "section",
  "class": "section-class",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.section_name.settings.heading.label",
      "default": "Default Heading"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "t:sections.section_name.presets.name"
    }
  ]
}
{% endschema %}