首页分享 Shopify开发入门Shopify发入门一、前言在开始Shopify主题开发之前，您可能已经完成了账号注册和环境准

Shopify开发入门Shopify发入门一、前言在开始Shopify主题开发之前，您可能已经完成了账号注册和环境准

来源：花匠小妙招时间：2024-12-07 23:11

本文是关于 Shopify 开发入门的介绍，包括主题结构和代码讲解。主题结构方面，阐述了主题编辑器的头部和侧边栏，以及各目录的作用和所含文件类型。代码讲解涉及文件类型、json 和 liquid 文件详解等。还介绍了定制商店的优点及 Hydrogen 框架，为开发者提供了全面的入门指导。

关联问题: Shopify开发难不难？主题开发要学多久？ Hydrogen框架怎么用？

Shopify开发入门

一、前言

在开始Shopify主题开发之前，您可能已经完成了账号注册和环境准备工作。如果您对这些步骤还不熟悉，可以参考Shopify开发入门-保姆级教程一文，本文将不再赘述。

在此，我们主要探讨主题开发部分

二、Shopify主题结构概述

在进行主题开发之前，了解Shopify的主题结构是非常重要的。以下内容部分引用自电商系统Shopify二次开发01：初识Shopify。

Shopify主题结构讲解

在开始熟悉主题结构之前，首先我们要打开主题编辑器。可以点击Debut – learning – 2022-01-12主题Actions按钮下拉选项中的Edit Code，这里读者会首次看到代码编辑器。

代码编辑器可以分成两部分：

头部侧边栏头部

可以在页面的上方看到头部区域，这里包含主题名称，左边的箭头可以退出编辑器，右侧有三个按钮：

Preview Customize theme Expert theme help Preview

第一个按钮是预览，通过它我们可以快速预览所操作的副本主题及所做出的修改。虽然现在的预览只包含占位内容，但下方有一个preview bar：

在预览页面底部有一个预览栏，左侧显示所预览的主题，右侧包含3个按钮：

Close preview按钮自动关闭副本主题的预览，跳转回到线上主题的首页。 Share preview按钮会调起一个弹窗，可将其分享给其他人一览我们所做的调整。虽然获取链接的任何人都可以访问这个主题的各个页面，但是无法完成购买或者进入结账页面。另外，自动生成的预览链接仅能使用14天，也就是说14天后需要重新分享以供他人查看。预览栏的最后一个按钮是Hide bar，通过名称可知，借助它可以隐藏预览栏，在预览的同时不会出现视觉阻挡。但在刷新页面后预览栏会自动出现。 Customize theme

头部区域的第二个按钮是自定义主题按钮，这会打开另一种编辑器-主题编辑器。在这一编辑器中，我们可以更新一些主题配置，比如字体、颜色、图片链接以及管理一些前台的版块。

Expert theme help

最后一个按钮Expert theme help，店主可以通过Shopify伙伴项目发布任务，在学完这一系列文章，你可能就是那个接单的Shopify专家。

侧边栏

代码编辑器的第二部分就是侧边栏，列出了所有我们将要使用到的文件和目录，现在我们看不到所有的目录。点击Layout和Templates收起目录就可以看到了：

收起这两个目录后，目录图标中的箭头会消失，同时出现其它5个目录，点击即可查看其中的内容。Shopify主题包含如下目录：

Layout Templates Sections Snippets Assets Config Locales Layout

Layout目录是主题的主目录，其中包含店铺所要使用的一些基本文件。这个目录通常最多包含4个文件，我们称之为主题布局模块，说明如下：

gift_card.liquid

gift_card.liquid是包含礼品卡页面代码的模板文件，在顾客购买礼品卡后会通过通知邮件进行发送。

password.liquid

password.liquid模板文件对应的是在开发模式下顾客访问店铺时所看到密码保护页面。前文中我们讲到密码保护功能。

为进一步了解密码保护页面，我们可以预览下效果。可以使用店铺 URL拼接进入到密码保护页面，即**my-store-name.myshopify.com加上/password**。

可以，密码保护页面仅包含最基础的信息。但对其的设计就是在开发店铺期间不让人们访问里面的内容。

在密码保护页面的右上角，可以发现有一个按钮ENTER USING PASSWORD，点击后会进一个可供店铺所有者登录的页面，登录后进入管理后台：

如果只想输入密码预览主题的页面前台的话，以上表单中所需填写的密码为启用密码保护页面时所设置的密码。我们选择了开发店铺选项，这一密码会由系统自动生成。

获取密码在浏览器中访问https://my-store-name.myshopify.com/admin，然后点击左边栏Sales Channel下的Online store，然后点击Preferences，其中有一块名为Password protection，此处即可找到访问前台所需的密码（也可点击 Home 下的See store password 直接进入）：

这时如果回到密码保护页面输入刚刚查看的密码。密码保护页面就会暂时隐藏，根据一开始所打开的页面将我们重定向到主题预览或线上前台。

theme.liquid

回到代码编辑器，下一项是theme.liquid，这是主布局文件，后面学习到所有其它模板文件及元素都通过它进行渲染。

checkout.liquid

最后一个文件是checkout.liquid，在当前的开发店铺中不可见。这一布局文件仅对购买了Shopify Plus订阅计划的店铺所有者可见。

通常，每个主题会包含一组预定义选项，用于对结账页面做基础的样式调整。但是有了checkout.liquid布局文件之后，我们就可以对结束页面做一些更为复杂的修改。

注意即便是有了checkout.liquid文件，我们还是无法修改结账页面的流程，这是出于安全的考虑。我们只能做一些不影响结账业务流的基础修改。

我们需要向Shopify客服提交申请才能启动Shopify计划。在对申请进行审核后，他们会为我们的店铺生成一个自定义报价。

即使是为店铺开启了Shopify Plus方案，checkout.liquid文件也不会立即可见。我们需要向Shopify客户提交申请才能在店铺中包含这一特殊文件。

基于这些原因，我们不会过多地讲解checkout.liquid文件。但会讲解布局文件所包含的基于元素以及如何使用，这样就可以了解布局文件。更多有关编译结构文件的详情，请参见shopify.dev/themes/arch…

Templates

主题目录中的下一项是Templates，包含一种我们可以创建、修改各个页面外观的文件。Templates包含两类文件：

Templates中的第一类文件是**.json文件，是Shopify中新增的内容。使用.json类型模板，我们可以通过主题编辑器轻松控制任意页面的布局。但暂时我们先不讲细节。在后面的文章中会更进一步讲解.json**的作用。第二类文件是**.liquid**文件，是一种简单标记文件类型，在后面的学习中我们会逐步熟悉。

实践表明每个主题对每个页面类型都会提供一个模板文件，如product.liquid，系统会自动将其分配给我们当前或未来所创建的产品页面。因为Shopify是基于模板文件的，对某一模板的任意修改都会影响到此前使用到这一模板的所有页面。但是Shopify也允许我们为每个页面类型创建额外的模板文件，进而在不调整原始模板文件布局的情况下进行自定义。

我们可以通过点击位于模板目录下方的Add a new template按钮来新建模板文件，点击后会弹出页面让我们选择类型以及新模板文件的名称：

成功新建模板文件之后，就可以将新建的模板指定给具体页面了。可以在管理后台中根据所创建页面模板的类型打开任意页面，在Theme template下拉菜单中选择新模板名。

Theme template只能读取当前线上主题的值，也就是说新创建的模板文件需要在发布主题副本之后才能使用，要么就得在线上主题中创建一个同样的模板文件。

Sections and snippets

目录列表中的下一个为Sections，这是另一类模板文件，在与前面的模板文件相结合后，可以实现真正的自定义功能，这也是Shopify得以成名的一个原因。注意在section中创建的变量在section之外是不可使用的，反之亦然。唯一的特例是在其包含snippets时会提供一个单向通讯。

Snippets让我们通过引用Templates/Sections名称来复用重复性的代码块。除了复用代码块之外，Snippets也让我们可以访问父元素中的变量，只要以参数将这些变量传递给snippet即可。

Assets

通过名称可以知道，Assets中包含主题所使用的资源文件，包含图片、字体文件、JavaScript、CSS文件等，在主题的文件中可以轻松地进行使用。

Config

Config目录在主题中至关重要。在这一目录中，我们可以管理主题的全局JSON值。该目录中包含两个主要文件：

通过settings_schema.json我们可以创建、管理主题编辑器中的内容，在所有的主题文件中均可使用。另一个文件settings_data.json，记录所有schema文件中定义的选项并保存它们的值。可以把它看作主题的数据库，通过它可查看当前的JSON值，通过修改其中的值来更新主题编辑器。 Locales

最后一个目录为Locales，包含主题的本地化文件，用于翻译模板中的内容。这个目录下的文件数量不定。可以使用默认文件en.default.json，或是根据前台需要用到语言包含多个文件。

Shopify主题代码讲解

在使用Shopify构建主题时，理解代码结构是至关重要的。以下是我对Shopify主题代码的个人见解，如有不当之处，敬请指正。

文件类型概述

在template目录下，我们会发现主要有两种文件类型：json和liquid。

而每个页面只能有一个，相同前缀的json和liquid是不允许的！

例如，404页面只能有一个404.json或404.liquid文件。

需要注意的是，某些页面可能只支持特定的文件类型。

更多详情请参考官方主题文档。

json文件详解本地化语言json

Locales目录下的本地化语言json文件，用于处理以t:开头的翻译键。例如：

label: "t:settings_schema.logo.settings.logo_image.label" name: "t:settings_schema.logo.name"

这里的t:前缀表示这是一个翻译键，它对应于当前语言的本地化json文件。

配置json

配置json文件包括但不限于config文件和liquid文件内部的{% schema %}标签包裹的配置项。关于配置项的详细信息，请先阅读官方文档-设置部分。

配置项有不同的类型，例如输入设置、样式设置和边栏设置。以下将以输入设置为例进行讲解。

输入设置标准属性

输入设置包含以下标准属性，但根据输入类型的不同，可能会有额外的属性，或者某些属性可能不适用：

属性描述必填type设置类型，可以是基本输入设置或特殊输入设置。是id设置ID，用于访问设置值。是label设置标签，显示在模板编辑器中。是default设置的默认值。否info设置的相关信息文本。否

重点关注type和id属性，id用于访问设置项，而type指定了设置项的类型。具体类型描述和返回值类型请查阅官方主题文档-输入设置部分。

模板json

模板json文件可以包含多个liquid文件，并且允许商家通过拖动来改变内容的顺序，从而自由调整布局顺序。

liquid文件详解

对于liquid文件的理解，强烈建议阅读Shopify Liquid文档。需要注意的是，设置项的type中可能包含liquid的全局对象类型，具体对象字段请参考Shopify Liquid对象文档。

通过以上讲解，希望您能对Shopify主题的代码结构有更深入的理解。

请注意 Shopify主题开发如果基于现有的主题小调整，建议通过上面的官方主题模板开发，如果你有极高的定制化需求，建议使用无头商务定制商店，下面为无头商务定制商店简短介绍

定制商店

自定义店面是构建无头商务的模型，其中店面的前端和后端相互独立。您构建前端。商家在其定制店面体验背后使用 Shopify 的商务引擎。

优点 灵活性：Storefront API 与设备和平台无关。您可以使用任何编程语言构建自定义店面，这使您的工作流程更加灵活。定制：您可以构建一个随着商家业务的增长和调整而变化的解决方案。随着客户趋势和交互的变化，商务解决方案可以快速适应客户获取方面的长期市场变化。集成：带来您自己的工具、技术堆栈和经验，并将您的自定义后端与 Shopify 商务数据集成。 Hydrogen

Hydrogen 是用于构建Shopify 自定义店面的前端 Web 开发框架。它包括您入门所需的结构、组件和工具，因此您可以花时间设计和设计功能，使您的品牌独一无二。