在 Shopify 主题开发中，template 文件是核心部分，它们定义了店铺中不同页面的布局和结构。下面将详细介绍 Shopify 主题中的 template 模板。
一、template 文件结构
在 Shopify 主题中，templates 文件夹包含了所有用于生成店铺页面的模板文件，使用两种不同的文件类型：JSON 和 Liquid。这些文件通常按照页面类型进行组织，例如：
layout：定义全局布局，如头部、底部和侧边栏等。index：首页模板。collection：集合页面模板，用于展示产品集合。product：产品页面模板，用于展示单个产品。blog：博客页面模板，包括博客列表和博客文章页面。page：自定义页面模板，用于创建如关于我们、联系我们等页面。customer：客户账户相关页面模板，如登录、注册、订单历史等。
二、liquid模板文件解析
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 引入 CSS 文件 -->
{{ 'product.css' | asset_url | stylesheet_tag }}
</head>
<body>
<!-- 引入头部布局 -->
{% include 'header' %}
<!-- 产品页面内容 -->
<div class="product-page">
<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>
<!-- 显示产品价格 -->
<p>Price: {{ product.price | money }}</p>
<!-- 添加购物车按钮 -->
<form action="/cart/add" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="{{ product.id }}" />
<input type="hidden" name="return_to" value="{{ request.url }}" />
<button type="submit">Add to Cart</button>
</form>
</div>
<!-- 引入底部布局 -->
{% include 'footer' %}
</body>
</html>三、json模板文件解析
/*
* ------------------------------------------------------------
* "layout":指定页面使用的布局模板文件名为theme.index.custom
*
* "sections":这个部分定义了页面上要显示的不同区块（sections）及其配置。每个区块都有其独特的类型（type）和一系列的配置项（settings和blocks）
*
* "order":指定了页面上区块的显示顺序,首先显示image_banner区块，然后是featured_collection区块
* ------------------------------------------------------------
*/
{
"layout": "theme.index.custom",
"sections": {
"image_banner": {
"type": "image-banner",
"blocks": {
"heading": {
"type": "heading",
"settings": {
"heading": "Browse our latest products",
"heading_size": "h1"
}
},
"button": {
"type": "buttons",
"settings": {
"button_label_1": "Shop all",
"button_link_1": "shopify:\/\/collections\/all",
"button_style_secondary_1": true,
"button_label_2": "",
"button_link_2": "",
"button_style_secondary_2": false
}
}
},
"block_order": [
"heading",
"button"
],
"settings": {
"image_overlay_opacity": 40,
"image_height": "large",
"desktop_content_position": "bottom-center",
"show_text_box": false,
"desktop_content_alignment": "center",
"color_scheme": "scheme-3",
"image_behavior": "none",
"mobile_content_alignment": "center",
"stack_images_on_mobile": false,
"show_text_below": false
}
},
"featured_collection": {
"type": "featured-collection",
"settings": {
"title": "Featured products",
"heading_size": "h2",
"description": "",
"show_description": false,
"description_style": "body",
"collection": "all",
"products_to_show": 8,
"columns_desktop": 4,
"full_width": false,
"show_view_all": true,
"view_all_style": "solid",
"enable_desktop_slider": false,
"color_scheme": "scheme-1",
"image_ratio": "adapt",
"image_shape": "default",
"show_secondary_image": true,
"show_vendor": false,
"show_rating": false,
"quick_add": "none",
"columns_mobile": "2",
"swipe_on_mobile": false,
"padding_top": 44,
"padding_bottom": 36
}
}
},
"order": [
"image_banner",
"featured_collection"
]
}