Shopify主题开发教程

2026-01-18 09:18:02作者：滑思眉Philip

1. 项目的目录结构及介绍

Shopify主题项目的目录结构通常包含以下几个主要部分：

assets/: 存放主题所需的所有静态资源文件，如CSS、JavaScript、图像等。
config/: 包含主题的配置文件，如settings_data.json和settings_schema.json。
layout/: 存放主题的布局文件，如theme.liquid。
locales/: 包含主题的国际化文件，用于多语言支持。
sections/: 存放主题的自定义区块文件。
snippets/: 存放可重用的代码片段。
templates/: 存放主题的模板文件，如产品页面、集合页面等。

2. 项目的启动文件介绍

在Shopify主题中，主要的启动文件是layout/theme.liquid。这个文件是所有页面的基础布局文件，它包含了页面的基本结构和引入其他资源文件的代码。

<!doctype html>
<html lang="en">
  <head>
    <title>{{ page_title }}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {{ content_for_header }}
    {{ 'theme.css' | asset_url | stylesheet_tag }}
  </head>
  <body>
    <main role="main">
      {{ content_for_layout }}
    </main>
    {{ 'theme.js' | asset_url | script_tag }}
  </body>
</html>

3. 项目的配置文件介绍

Shopify主题的配置文件主要存放在config/目录下，其中最重要的两个文件是：

settings_data.json: 包含主题的默认设置和用户自定义设置的数据。
settings_schema.json: 定义了主题设置的结构和选项，用于在Shopify后台的主题编辑器中显示。

settings_data.json

{
  "current": {
    "color_primary": "#000000",
    "color_secondary": "#ffffff",
    "font_primary": "Arial, sans-serif",
    "font_secondary": "Georgia, serif"
  },
  "presets": {
    "Default": {
      "color_primary": "#000000",
      "color_secondary": "#ffffff",
      "font_primary": "Arial, sans-serif",
      "font_secondary": "Georgia, serif"
    }
  }
}

settings_schema.json

[
  {
    "name": "Colors",
    "settings": [
      {
        "type": "color",
        "id": "color_primary",
        "label": "Primary Color",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "color_secondary",
        "label": "Secondary Color",
        "default": "#ffffff"
      }
    ]
  },
  {
    "name": "Fonts",
    "settings": [
      {
        "type": "font_picker",
        "id": "font_primary",
        "label": "Primary Font",
        "default": "Arial, sans-serif"
      },
      {
        "type": "font_picker",
        "id": "font_secondary",
        "label": "Secondary Font",
        "default": "Georgia, serif"
      }
    ]
  }
]