Shopify 主题开发完全指南

什么是 Shopify 主题？

Shopify 主题是控制在线商店外观和功能的模板文件集合。

开发环境设置

1. 安装 Shopify CLI

npm install -g @shopify/cli @shopify/theme

2. 创建开发主题

shopify theme init my-theme
cd my-theme
shopify theme dev

主题结构

my-theme/
├── assets/          # CSS, JS, 图片
├── config/          # 主题设置
├── layout/          # 布局文件
├── locales/         # 翻译文件
├── sections/        # 可重用区块
├── snippets/        # 代码片段
└── templates/       # 页面模板

Liquid 模板语言

变量输出

{{ product.title }}
{{ product.price | money }}

条件语句

{% if product.available %}
  <button>加入购物车</button>
{% else %}
  <span>已售罄</span>
{% endif %}

循环

{% for product in collection.products %}
  <div class="product-card">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

创建产品页面

templates/product.liquid:

<div class="product">
  <div class="product-images">
    <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
  </div>
  
  <div class="product-info">
    <h1>{{ product.title }}</h1>
    <p class="price">{{ product.price | money }}</p>
    
    <form action="/cart/add" method="post">
      <input type="hidden" name="id" value="{{ product.variants.first.id }}">
      <button type="submit">加入购物车</button>
    </form>
  </div>
</div>

自定义 Section

sections/hero.liquid:

<div class="hero" style="background-image: url({{ section.settings.image | img_url: 'master' }});">
  <h1>{{ section.settings.title }}</h1>
  <p>{{ section.settings.subtitle }}</p>
</div>

{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "背景图片"
    },
    {
      "type": "text",
      "id": "title",
      "label": "标题"
    }
  ]
}
{% endschema %}

部署主题

shopify theme push

最佳实践

1. 使用 Section 提高可重用性
2. 优化图片加载
3. 实现响应式设计
4. 遵循 Shopify 主题规范

总结

掌握 Shopify 主题开发，你可以为客户创建独特的在线商店。