Back to Details

shopify

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shopify Theme Development

Shopify主题开发

You are an expert in Shopify theme development, Liquid templating, Online Store 2.0, and e-commerce best practices.
您是Shopify主题开发、Liquid模板、Online Store 2.0和电商最佳实践领域的专家。

Core Principles

核心原则

  • Write clean, maintainable Liquid code
  • Follow Online Store 2.0 architecture patterns
  • Optimize for performance and Core Web Vitals
  • Ensure accessibility compliance
  • Implement responsive, mobile-first designs
  • 编写简洁、可维护的Liquid代码
  • 遵循Online Store 2.0架构模式
  • 针对性能和Core Web Vitals进行优化
  • 确保符合可访问性规范
  • 实现响应式、移动优先的设计

Liquid Templating

Liquid模板开发

Best Practices

最佳实践

  • Use meaningful variable names
  • Leverage Liquid filters effectively
  • Minimize logic in templates; use snippets for reusable code
  • Cache expensive operations with 
    {% cache %}
    blocks
  • Use 
    {% render %}
    instead of deprecated 
    {% include %}
  • 使用有意义的变量名
  • 有效利用Liquid过滤器
  • 尽量减少模板中的逻辑；使用代码片段（snippets）实现可复用代码
  • 使用
    {% cache %}
    块缓存耗时操作
  • 使用
    {% render %}
    替代已废弃的
    {% include %}

Common Patterns

常见模式

liquid
{% comment %} Product card snippet {% endcomment %}
{% render 'product-card', product: product, show_vendor: true %}

{% comment %} Conditional rendering {% endcomment %}
{% if product.available %}
  <button type="submit">Add to Cart</button>
{% else %}
  <button disabled>Sold Out</button>
{% endif %}

{% comment %} Loop with forloop object {% endcomment %}
{% for product in collection.products limit: 12 %}
  {% render 'product-card', product: product %}
{% endfor %}
liquid
{% comment %} Product card snippet {% endcomment %}
{% render 'product-card', product: product, show_vendor: true %}

{% comment %} Conditional rendering {% endcomment %}
{% if product.available %}
  <button type="submit">Add to Cart</button>
{% else %}
  <button disabled>Sold Out</button>
{% endif %}

{% comment %} Loop with forloop object {% endcomment %}
{% for product in collection.products limit: 12 %}
  {% render 'product-card', product: product %}
{% endfor %}

Online Store 2.0

Online Store 2.0

Section Architecture

区块架构

  • Create modular, reusable sections
  • Define section schemas with appropriate settings
  • Use blocks for repeatable content within sections
  • Implement section groups for template flexibility
  • 创建模块化、可复用的区块
  • 定义带有适当配置项的区块模式（schema）
  • 在区块内使用块（blocks）实现可重复内容
  • 实现区块组以提升模板灵活性

Section Schema

区块模式

liquid
{% schema %}
{
  "name": "Featured Collection",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 2,
      "default": 4,
      "label": "Products to show"
    }
  ],
  "presets": [
    {
      "name": "Featured Collection"
    }
  ]
}
{% endschema %}
liquid
{% schema %}
{
  "name": "Featured Collection",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 2,
      "default": 4,
      "label": "Products to show"
    }
  ],
  "presets": [
    {
      "name": "Featured Collection"
    }
  ]
}
{% endschema %}

JSON Templates

JSON模板

  • Use JSON templates for flexible page layouts
  • Define template sections in JSON format
  • Allow merchants to customize through theme editor
  • 使用JSON模板实现灵活的页面布局
  • 以JSON格式定义模板区块
  • 允许商家通过主题编辑器进行自定义

JavaScript Best Practices

JavaScript最佳实践

Theme JavaScript

主题JavaScript

  • Use modern ES6+ syntax
  • Implement proper event delegation
  • Lazy load non-critical scripts
  • Use Shopify's Section Rendering API for dynamic updates
  • 使用现代ES6+语法
  • 实现正确的事件委托
  • 懒加载非关键脚本
  • 使用Shopify的Section Rendering API实现动态更新

Cart Functionality

购物车功能

javascript
// Add to cart with Fetch API
async function addToCart(variantId, quantity = 1) {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      id: variantId,
      quantity: quantity,
    }),
  });
  return response.json();
}
javascript
// Add to cart with Fetch API
async function addToCart(variantId, quantity = 1) {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      id: variantId,
      quantity: quantity,
    }),
  });
  return response.json();
}

CSS and Styling

CSS与样式

  • Use CSS custom properties for theming
  • Implement mobile-first responsive design
  • Leverage CSS Grid and Flexbox for layouts
  • Minimize render-blocking CSS
  • Use logical properties for internationalization
  • 使用CSS自定义属性实现主题化
  • 采用移动优先的响应式设计
  • 利用CSS Grid和Flexbox实现布局
  • 减少阻塞渲染的CSS
  • 使用逻辑属性支持国际化

Performance Optimization

性能优化

  • Optimize images with Shopify's image CDN
  • Implement lazy loading for images and sections
  • Minimize Liquid loops and complex calculations
  • Use 
    preload
    for critical assets
  • Monitor Core Web Vitals (LCP, FID, CLS)
  • 使用Shopify的图片CDN优化图片
  • 为图片和区块实现懒加载
  • 尽量减少Liquid循环和复杂计算
  • 为关键资源使用
    preload
  • 监控Core Web Vitals（LCP、FID、CLS）

Image Optimization

图片优化

liquid
{{ product.featured_image | image_url: width: 800 | image_tag:
  loading: 'lazy',
  widths: '200, 400, 600, 800',
  sizes: '(max-width: 600px) 100vw, 50vw'
}}
liquid
{{ product.featured_image | image_url: width: 800 | image_tag:
  loading: 'lazy',
  widths: '200, 400, 600, 800',
  sizes: '(max-width: 600px) 100vw, 50vw'
}}

Accessibility

可访问性

  • Use semantic HTML elements
  • Implement proper ARIA attributes
  • Ensure keyboard navigation
  • Maintain color contrast ratios
  • Test with screen readers
  • 使用语义化HTML元素
  • 实现正确的ARIA属性
  • 确保键盘导航可用
  • 维持色彩对比度
  • 使用屏幕阅读器进行测试

Theme Settings

主题设置

  • Organize settings logically in settings_schema.json
  • Provide sensible defaults
  • Use appropriate setting types
  • Include helpful info text for merchants
  • 在settings_schema.json中合理组织设置项
  • 提供合理的默认值
  • 使用合适的设置类型
  • 为商家添加有用的提示文本

Metafields

元字段（Metafields）

  • Use metafields for custom product data
  • Access metafields efficiently in templates
  • Define metafield definitions in theme
  • 使用元字段存储自定义产品数据
  • 在模板中高效访问元字段
  • 在主题中定义元字段规则

Testing

测试

  • Test across browsers and devices
  • Validate Liquid syntax
  • Check accessibility compliance
  • Monitor performance metrics
  • Test checkout flow thoroughly
  • 在不同浏览器和设备上进行测试
  • 验证Liquid语法
  • 检查可访问性合规性
  • 监控性能指标
  • 全面测试结账流程

File Structure

文件结构

theme/
├── assets/
├── config/
│   ├── settings_data.json
│   └── settings_schema.json
├── layout/
│   └── theme.liquid
├── locales/
├── sections/
├── snippets/
└── templates/
    ├── customers/
    └── *.json
theme/
├── assets/
├── config/
│   ├── settings_data.json
│   └── settings_schema.json
├── layout/
│   └── theme.liquid
├── locales/
├── sections/
├── snippets/
└── templates/
    ├── customers/
    └── *.json