Shopify的主题结构分析（一）,shopify的基本知识-ESG跨境

Shopify的主题结构分析（一）,shopify的基本知识

《购物》的主题结构分析(一)

主题模板结构

其实在修改Shopify的主题代码或者模板配置项的时候，我们并不知道主题代码的结构和Shopify的代码，所以有时候我们只知道在哪里修改什么内容。我们虽然改了，但是并不真正理解为什么要在这个位置改，甚至不知道为什么代码或者配置要这样设置。为了满足我们日益增长的需求，我们先来熟悉一下Shopify的深层结构。

平时我们更改Shopify的主题模板时，无论是Shopify自带的配置项，还是修改了Shopify的主题代码文件。我们总能看到Shopify的整个模板结构，比如下面的结构层次(图1)。最常见的模块是页眉页脚，我们可以发现基本上每一页都会出现，设置项目也很常见。

图1

我们可以打开主题的代码修改部分。我这里用的是系统默认的主题出道，每个主题模板都有不同的结构层次和编号。可以说付费主题模板的可选版块和可配置项目远比免费的多。也就是通过设置付费模板可以改变更多的东西。当然，只要你能改变代码的风格，免费模板的主题也可以比付费模板改得更好。

我们可以再看看代码部分的结构。(图12)

图12

在图12中，我们可以看到代码的主要结构分为七个部分:布局、模板、部分、代码片段、资产、配置和区域设置。所有的基本主题模板都只有这七个代码模块。

版面指的是布局，也就是总的布局风格。比如header section和footer section都是在layout下的主题中引入的，那么为什么在每一页中都能看到常见的页眉和页脚呢(图2)。

图2

模板可以理解为每一个页面，比如产品页面，购物车页面等。，通常是在布局的布局下构建的。

版块是每个功能模块，如图2中的特色收藏、幻灯片等。模板代码中的{%section%}通常会引用节。

Snippets是比Sections更小的模块。可能是Section下的少量功能模块，通常由{%include%}引入。

资产通常包含相关的导入文件，如js文件、css文件和一些图片资料。

Config是描述整个主题的一般设置。比如图22中的字体颜色，字体风格等等。与单个节相关的设置项通常写在相应的节文件下面。(图23)

图22

图23

语言环境，如果您的商店的业务目标是一些不常见的国家，并且您想将您的主题语言更改为相应的国家，那么您应该在存储相关语言模板的语言环境中进行配置。语言模板的配置详细信息将在以后更新。

通过上面的介绍，我们可以对整个主题和代码结构有一个大概的了解。如果某个位置有修改代码的需要，我们也可以准确的找到修改的位置。

特别声明：以上文章内容仅代表作者本人观点，不代表ESG跨境电商观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与ESG跨境电商联系。