介绍在线商店2.0:对开欧宝体育官网入口首页发者的意义

Shopify在欧宝体育官网入口首页线商店

今天在Shopify Unite上,我们宣布了迄今为止最大的更新之一:在线商店2.0。欧宝体育官网入口首页

欧宝体育官网入口首页在线商店2.0为开发人员为Shopify商家开发主题和应用程序提供了大量机会。我们从头开始重建了在线商店的体验,并欧宝体育官网入口首页引入了一套新的开发工具,帮助您为商家和购物者创造惊人的体验。

在本文中,我们将研究这些新工具和特性,以了解它们如何影响您的工作,以及它们所呈现的可能性。我们还会解释的需求将您的主题和应用程序更新到在线商店2.0标准。欧宝体育官网入口首页

让我们开始吧。

1.升级的主题架构

我们已经升级了在线商店的主题架构,为商家提供了更简单、更灵活的定制选项。欧宝体育官网入口首页对于开发者来说,也有新的机会来构建主题和集成,商家可以很容易地定制这些主题和集成,以满足他们的需求。

每页都有章节

到目前为止,商家在如何在Shopify上展示他们的业务方面受到了限制,部分的灵活性仅限于主页。为了在其他页面上实现类似的效果,我们需要进行代码编辑、精心设计的区块工作区或自定义应用程序。

每一页都有不同的章节。现在,商家可以在所有页面上添加分区,而不仅仅是首页,这为个性化商店的各个方面提供了一系列新机会。

每一页的各个部分是如何工作的

这些变化是通过店面呈现模板的新方法实现的。现在可以使用JSON模板文件呈现每种页面类型,该文件列出了该页面的各个部分,并存储与商家添加或编辑的任何其他部分相关的设置数据。商店可以有多个模板文件映射到不同的产品、收藏页面、自定义页面、博客文章等,允许商家在同一商店中轻松拥有不同的产品、收藏和其他页面。

在新的JSON模板文件中,您可以定义主题第一次安装时默认应该出现哪些部分,以及它们应该以何种顺序出现。一旦添加了JSON模板,商家就可以导航到主题编辑器,并添加包含预设的任何部分——就像您以前向主页添加动态部分一样。

要查看如何设置的模型,请查看/模板我们的新主题目录,黎明,在GitHub回购,或浏览我们的JSON模板的开发人员文档

请参见下面的模板演示。

主题应用程序扩展与应用程序块

随着主题架构的更新,应用程序与店面集成的方式也得到了更新。目前,还没有一种结构化的端到端解决方案可以让应用程序轻松地与主题集成。开发人员只能自己为每个现有主题和主机资产构建集成逻辑,这使得很难构建跨所有主题一致工作且在世界任何地方都快速运行的功能。

为了解决这些挑战,我们引入面向开发者的主题应用扩展,允许你通过应用程序块将应用程序扩展到商家的主题。

Shopify在欧宝体育官网入口首页线商店:更新后的主题编辑器的动图,显示一个应用程序块被添加到产品页面。用户选择“添加块”,并从下拉列表中选择应用程序。
中正在添加到产品页面的应用程序块更新的主题编辑器

内置的模块化

应用程序块代表了应用程序包含在主题中的方式的根本性变化。应用程序开发人员现在可以构建UI组件,这些组件可以直接通过主题编辑器进行添加、删除和配置,而无需触及主题的代码。这意味着卸载也更干净,幽灵代码会自动删除。

主题应用扩展可以从Shopify CLI轻松创建、发布和更新(带有版本控制),就像其他应用扩展一样。

这种模块化意味着您不再需要为每个现有主题构建集成逻辑。由于不再需要打开主题代码来手动安装应用程序,您不必担心引入的破坏性更改。这意味着与用户进行故障排除的时间更少。

要确定商家使用的主题是否与您的主题应用程序扩展兼容,您应该使用主题API而且资产的API.了解商家使用的主题类型将有助于你为商家提供最佳的登录体验,以便将应用程序集成到他们的主题中。

托管和管理资产

您还可以将应用程序的支持资产添加到您的主题应用程序扩展中,通过Shopify的CDN进行快速托管,并轻松地从您的主题扩展的应用程序块中引用这些资产。

Shopify在欧宝体育官网入口首页线商店:显示应用程序块和主题应用程序扩展如何交互的流程图。
主题应用扩展中包含的应用程序块的示例。

若要构建您的第一个主题应用程序扩展并使您的应用程序与在线商店2.0兼容,请访问欧宝体育官网入口首页我们文档中的迁移信息

2.灵活的存储内容

使用在线商欧宝体育官网入口首页店2.0,开发人员不必将元字段硬编码到主题中,也不必依赖api来更改产品页面。主题开发人员现在可以使用动态源插入标准元字段和已知资源属性作为设置默认值。

元字段的改进

更新的主题编辑器是否允许商家添加metafields和属性,而无需使用api或代码。这意味着商家将能够在产品页面上添加他们需要的内容,比如为买家提供一个空间,让他们列出尺寸表或成分表。任何不太可能出现在核心商店编辑器中的东西现在都可以通过元字段添加进去。

在开发方面,我们在三个关键方面改进了元场:

  • 更灵活的:Metafields现在有一个更加灵活的类型系统,随着时间的推移,它将变得更加适合商业数据。
  • 标准metafields:我们正在引入标准的元字段,这使得自定义主题在不同垂直市场的商店中开箱即用变得更加简单。ob欧宝娱乐app下载地址
  • 报告提示:你现在可以在元字段中添加表示提示,允许Storefront API和Liquid用户以商家想要的方式呈现商家数据,而定制代码要少得多。

了解更多关于元场的信息在文档中,并观看下面的演示。

文件选择器

元字段现在支持图像或PDF文件等媒体。元字段文件选择器可以轻松地在产品页面上上传和选择媒体,而不是将资产硬编码到主题中。保存的所有图像设置/文件部分立即可供使用。

例如,如果商家希望在产品页面上提供产品保修或尺寸图可供下载,那么文件选择器可以通过简单的UX轻松选择该文件,并将其插入文件元字段所在的主题。

文件API

开发人员还可以访问的内容设置/文件通过新的文件API。这个GraphQL API允许应用程序上传或选择现有的媒体内容设置/文件.应用程序现在可以从访问管理的这个区域中受益,包括用内容填充媒体元字段。

这为应用程序使用此空间存储与产品没有直接关联的文件和图像提供了机会,包括主题中使用的图像。了解更多关于文件API的信息在文档中

3.主题编辑器的增强

为了使商家能够利用这些改进和更新,并使开发人员更容易导航,我们还对主题编辑器进行了大量增强。

编辑器现在不需要深入到不同的部分,而是在侧边栏中显示页面上所有内容的树状视图。在这个边栏中,商家可以隐藏大多数区块,除了页眉和页脚(它们可以包含可以移动或隐藏的区块,但不能隐藏本身)。这些变化让商家可以轻松地更新页面的层次结构。

Shopify在欧宝体育官网入口首页线商店:更新后的主题编辑器的动图,显示如何轻松地移动部分。
更新的主题编辑器正在运行。

液体输入设定

主题编辑器的另一个更新是新的Liquid输入设置,允许商家直接从编辑器向页面添加自定义Liquid代码。Liquid设置类似于HTML设置类型,除了它将允许访问Liquid变量,这意味着商家将能够访问全局和模板特定的Liquid对象。

这一设置将减少商家手动更改主题代码的需求,特别是在为使用Liquid的应用程序添加代码时。开发人员可以学习如何将此设置添加到部分或块中在我们的开发者文档中,或视图我们的新主题“黎明”号的custom-liquid部分这是如何实现的一个例子。

这些更改使商家可以更轻松地使用在线商店2.0的新功能,并在不与开发人员接触的情况下就其在线商店做出决策——将您的时间解放出来,专注于构建创造性的集成和解欧宝体育官网入口首页决方案。

4.新的开发工具

欧宝体育官网入口首页在线商店2.0为开发人员提供了一种全新的方式来为Shopify商家开发应用程序和主题。为了支持这一变化,我们引入了一套新的开发工具无缝集成到Shopify,并协助开发、测试和部署您的主题。

随着Shopify GitHub集成的引入,更新的Shopify CLI工具和主题检查,您将体验到更健壮的主题开发与版本控制,更好的沙盒环境在本地开发主题,并通过实时linter优化Shopify主题简化开发。

下面,我们来看看这些工具对你意味着什么。

Shopify Github集成

我们正在与GitHub进行新的集成,使主题开发和维护更容易跟踪和管理。通过将您的GitHub用户帐户或组织连接到在线商店,更改将被推送和拉入到始终与所选主题的当前状态同步的GitHub回购。欧宝体育官网入口首页

通过引入版本控制的本地支持,GitHub与主题的集成将允许开发人员在编辑主题时安全地协作。当在商家的商店工作时,开发人员现在可以实现这样的工作流程:在填充到活动主题之前,对主题的更改必须在GitHub上进行审查和合并。

对于那些在部署到在线商店之前使用CI执行检测、测试和文件转换(例如运行主题检查或将SCSS编译为CSS)的人来说,Github集成可以与Git子树结合使用,以同步生产就绪的文件。欧宝体育官网入口首页查看更多相关信息在文档中,并观看下面的GitHub集成演示。

Shopify CLI

我们还对现有的Shopify CLI工具.应用程序开发人员一直在使用CLI快速生成Node.js和Ruby on Rails应用程序和应用程序扩展,但我们现在已经扩大了该工具的范围,包括主题。

Shopify CLI加速您的主题开发,因为它现在可以:

  • 在开发主题中安全地开发、预览和测试对主题的更改
  • 由于新的开发服务器,CSS和Liquid部分在开发过程中会发生变化
  • 使用我们的新主题初始化一个新的主题项目,黎明作为起点OB欧宝娱乐APP
  • 从命令行推送和发布主题
  • 运行主题检查关于你的主题
  • 为您的主题填充测试数据,包括产品、客户和草案订单

发展的主题

开发主题是临时的、隐藏的主题,连接到您用于开发的Shopify商店。当你打电话时Shopify主题服务, Shopify CLI会自动在你正在开发的商店内创建一个开发主题,并且每次都会重用该主题Shopify主题服务随后运行。您不需要担心其他人查看或对其进行编辑,因为开发主题在管理/主题页面。

开发主题不计入您的主题限制,七天不活动后将从商店中删除。当你逃跑时,它们也会被摧毁shopify-logout,所以如果你需要一个预览链接,当你退出时不会被破坏,你应该把你的主题推到商店。

开发主题可用于实时查看对您正在本地开发的主题的更改,并使用主题编辑器与主题交互和自定义主题。

这些工具旨在使您的开发过程更容易,并使您快速启动和运行在线商店2.0。欧宝体育官网入口首页

主题检查

Theme Check是一个针对Liquid和JSON的语言服务器,它可以扫描主题的错误,并突出Shopify主题和Liquid的最佳实践。该工具可以与Visual Studio Code等文本编辑器集成,并识别主题代码中的几种类型的问题,包括Liquid语法错误、缺少模板、性能问题等等。

为了帮助您快速调试主题问题,错误消息包括指向失败检查文档的链接。Theme Check还与Shopify CLI工具捆绑在一起,所以你不需要单独安装它。请查看我们的开发人员文档以了解在测试主题时如何安装和使用主题检查。

请参见下面的新代码编辑器运行视频。

5.一个新的参考主题

伴随着在线商店2.0的推出,我们都推出了一个全新的默认欧宝体育官网入口首页主题,将上述所有功能联系在一起。我们叫它黎明。

Dawn是Shopify的第一个源代码可用的参考主题,具有OS 2.0的灵活性和对速度的关注。它是用HTML和CSS的语义标记构建的,而不是依赖于填充程序和外部库,在所有浏览器上都能创造出色的体验。它的设计最大化了灵活性,同时最小化了复杂性,这意味着在固执己见的设计和允许商家做出他们认为适合他们业务的改变之间取得平衡。

在创建Dawn时,我们一直强调速度,结果是无论如何,Dawn的默认速度都很快——它的加载速度比现在超过一半的商家使用的主题处女作快35%。

Shopify在欧宝体育官网入口首页线商店:黎明的视觉,Shopify的新主题。
Dawn, Shopify的第一个源代码可用的参考主题。

由于Dawn已经为其所有页面提供了JSON模板,您可以在解锁自己主题的部分时使用它作为模型。它最终将取代Debut,成为所有新店的新默认主题。

通过阅读我们的文章了解更多关于我们如何构建Dawn的信息在Shopify UX博客上

关于使用最少的JavaScript

可以说,黎明号最大的追求是我们探索了你能走多远仅按需使用javascript的开发方法.这是因为我们比以往任何时候都更重视速度,为增加商家商店快速加载的可能性提供了快速基础。

我们知道,用最少的JavaScript构建意味着我们不会在商家和买家的用户体验上妥协。在某些情况下,JavaScript是必要的,即使它不是性能最好的选择。但在有意义的地方,我们依赖于原生浏览器特性,而不是JavaScript库和填充程序。

我们鼓励开发者尽可能利用本地浏览器的功能来呈现HTML和CSS布局。

6.Shopify主题商店重新开业

我们很高兴地宣布,除了在线商店2.0的改进之外,我们还将重新开放欧宝体育官网入口首页Shopify主题商店2021年7月15日。在那一天,你将能够提交你的新主题进行审查,批准的主题将开始发布。

更好的是,在9月份,我们将取消你在Shopify主题商店每年赚取的前100万美元的所有收入分成。这意味着如果你的收入低于100万美元,你将支付0%的收入分成,而且这些数字每年都会重置。当你的收入超过100万美元时,你仍然只需要支付增量收入的15%。

向Shopify主题商店提交的每个账户将收取99美元的一次性提交费,外加2.9%的所有交易手续费。我们很快就会有关于这次更新的更多信息。

随着数以百万计的商家使用Shopify来经营业务,现在是时候为这些全球企业家建立主题了。Shopify主题商店自2018年以来一直关闭,所以这是一个早期进入并建立自己作为值得信赖的主题开发者的机会。

了解更多关于最新指南的信息提交您的主题到Shopify主题商店。如果你还没有,请在下面注册Shopify合作伙伴帐户,并开始构建你的第一个主题。OB欧宝娱乐APP

7.更新主题和应用程序

为了充分利用这些改进,您应该计划尽快将您的主题和应用程序迁移到在线商店2.0的更新要求—特别是当商家开始期望OS 2.0提供的灵活性时。欧宝体育官网入口首页

到今年年底,Shopify主题商店中的所有主题和Shopify应用程序商店中的应用程序都将被要求使用新的基础设施。商家现有的主题将在今年之后继续工作,但要通过主题编辑器访问新的在线商店2.0功能,商家需要确保他们的主题与在线商店2.0兼容。欧宝体育官网入口首页

了解更多将您的主题迁移到OS 2.0而且构建主题应用扩展使您的应用程序与OS 2.0主题兼容。

更新的文档

为了帮助您更新您的主题和应用程序,我们已经彻底检查了在线商店的开发者文档。欧宝体育官网入口首页我们的文档现在包括:

  • 开发人员工作流程和主题流程的指南
  • 具有语义web最佳实践的商业组件的最佳实践
  • 应用程序应该如何与新的在线商店架构集成,包括如何让你的应用程序与传统主题兼容欧宝体育官网入口首页

访问我们的新文档了解有关更新应用程序和主题的更多信息。通过加入我们每月的“开发者新消息”时事通讯,随时了解Shopify所有开发内容的更新。

模板图标

为商业的未来而建

欧宝体育官网入口首页在线商店2.0标志着对Shopify主题构建方式的端到端彻底改革。每个页面上的部分,应用程序驱动的块,灵活的数据存储,以及强大的开发人员工具,在Shopify上构建主题的过程比以往任何时候都更容易。为应用程序开发者提供的可扩展性意味着有更多机会为商家构建集成,并直接在在线商店中展示您的解决方案。欧宝体育官网入口首页

更新主题而且为你的应用程序创建主题应用程序扩展充分利用这些更新,继续为世界各地的商家建设。

了解更多信息,请访问:Shopify伙伴

主题:

通过Shopify合作伙伴计划发展您的业务

了解更多