在Shopify主题中，不同类型的页面（如首页、产品列表页、产品详情页、about单页面、blog列表页及详情页）由不同的模板文件来定义。这些模板文件通常位于templates目录中，并且可以通过Liquid模板语言进行定制。以下是如何定义这些页面的具体细节：

1. 首页 (Home Page)

• 文件路径：templates/index.liquid

• 功能：定义商店的主页。可以使用各种sections来创建灵活的布局。

liquidCopy code<!-- templates/index.liquid -->
{% section 'header' %}
{% section 'featured-products' %}
{% section 'collection-list' %}
{% section 'footer' %}

2. 产品列表页 (Collection Page)

• 文件路径：templates/collection.liquid

• 功能：显示某个产品集合中的所有产品。

liquidCopy code<!-- templates/collection.liquid -->
{% section 'collection-header' %}
{% section 'collection-products' %}
{% section 'collection-footer' %}

3. 产品详情页 (Product Page)

• 文件路径：templates/product.liquid

• 功能：显示单个产品的详细信息。

liquidCopy code<!-- templates/product.liquid -->
{% section 'product-details' %}
{% section 'related-products' %}
{% section 'reviews' %}

4. about 单页面 (About Page)

• 文件路径：templates/page.about.liquid

• 功能：显示关于我们或自定义的静态内容页面。

liquidCopy code<!-- templates/page.about.liquid -->
{% section 'about-us' %}

5. blog 列表页 (Blog List Page)

• 文件路径：templates/blog.liquid

• 功能：显示所有博客文章的列表。

liquidCopy code<!-- templates/blog.liquid -->
{% section 'blog-header' %}
{% section 'blog-articles' %}
{% section 'blog-footer' %}

6. blog 详情页 (Blog Post Page)

• 文件路径：templates/article.liquid

• 功能：显示单个博客文章的详细内容。

liquidCopy code<!-- templates/article.liquid -->
{% section 'article-header' %}
{% section 'article-content' %}
{% section 'article-footer' %}

定制和配置

在这些模板文件中，您可以插入sections和snippets，以便重用和组织代码。例如，一个section文件可能如下：

liquidCopy code<!-- sections/featured-products.liquid -->
<div class="featured-products">
  <h2>Featured Products</h2>
  {% for product in collections.frontpage.products %}
    <div class="product">
      <a href="{{ product.url }}">
        <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
        <h3>{{ product.title }}</h3>
        <p>{{ product.price | money }}</p>
      </a>
    </div>
  {% endfor %}
</div>

使用Shopify的模板系统

Shopify使用Liquid模板语言来生成动态内容。您可以通过Liquid语法在模板文件中嵌入动态数据。例如：

liquidCopy code<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>
<img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
<p>{{ product.price | money }}</p>

这些文件和代码结构使得Shopify主题高度可定制，开发者可以根据商店的需求来设计和实现各种页面布局和功能。通过编辑这些模板文件，您可以创建一个完全自定义的Shopify商店体验。

在theme.liquid模板判断如果当前时首页就显示标签如下：

{% if template == 'index' %}

{% endif %}

在全局标签调用如下：

{{shop.primary_domain}}/{{ 'indexcpbg.png' | asset_url | stylesheet_tag }}