如何用主题应用扩展升级你的应用

为了确保构建Shopify应用程序为商家和开发人员提供最佳体验，我们不断致力于新流程以改进应用程序开发。有了我们新的主题应用程序扩展，为商家的店面构建应用程序从未如此容易。

在构建与在线商店交互的Shopify应用程序时，开发人员遇到的最困难的方面之一是确保他们的应用程序安全轻欧宝体育官网入口首页松地与所有主题集成，同时商家仍然可以直接安装。

Shopify的主题应用扩展为了消除这一挑战，我们引入了一种新的简化方法，让应用程序与主题进行交互，从而改善开发者和商家的体验。主题应用程序扩展也确保应用程序与OS 2.0主题无缝集成，我们预计今年将有更多商家继续采用。

商家不应该关心代码。一般来说，他们不是技术人员，即使他们是，他们也需要把时间花在他们的业务上。实际上，我们选择推迟发布，转而使用新的主题应用扩展框架。

应用开发者已经开始采用主题应用扩展，并看到了其好处。“商家不应该关心代码。一般来说，他们不是技术人员，即使他们是，他们也需要把时间花在自己的业务上。”事实上，我们选择推迟发布，转而使用新的主题应用扩展框架。”

在本文中，我们将分析应用程序如何使用Shopify主题，使用主题应用程序扩展的优势，以及如何开始为您自己的应用程序使用这种方法。我们还将了解一些Shopify应用程序开发人员如何实现主题应用程序扩展以及他们的经验。OB欧宝娱乐APP

应用程序如何与Shopify主题集成

在Shopify Unite 2021上，我们发布了主题应用扩展作为主题应用扩展的一部分欧宝体育官网入口首页网上商店2.0对应用程序与店面的整合方式进行了重大更新。以下是对新旧方法如何工作的一个高层次的了解。

没有主题应用扩展

没有主题应用程序扩展，应用程序使用资产的API这给了他们对主题文件的完整读/写访问权限。然后，他们继续添加和修改任意数量的文件，以使他们的应用程序集成到主题中。这种方法存在许多问题:

• 开发人员需要确定将代码插入主题的确切位置，这可能因主题而异。
• 应用程序可能会无意中破坏主题或引入性能下降问题。
• 当应用程序被卸载时，添加的代码不会被删除，这将导致不再需要或可能不再工作的代码运行。
• Shopify的主题更新机制只适用于没有代码编辑的主题，所以这种方法会阻止商家接收到主题的更新，可能会阻止他们使用在线商店的最新功能。欧宝体育官网入口首页

带有主题应用扩展

有了主题应用扩展，上面列出的所有问题都得到了解决，因为应用程序开发人员不再需要直接修改主题文件。相反，Shopify提供了一种构建模块的方法，这些模块由商家在编辑器中添加到主题中，并在渲染时由平台注入。

这避免了任何潜在的集成错误，保持主题不变，并有资格更新，应用程序在卸载时自动从主题中删除，无需进一步清理。此外，您的所有主题应用程序扩展资产(液体，CSS, JS, svg)都托管在Shopify平台上，并通过我们的CDN在全球范围内提供快速性能。

积木是什么?

要了解主题应用扩展，首先需要了解主题中的区块以及商家如何与它们交互。

块是可以在节中添加、删除和重新排序的内容模块。这允许商家对其在线商店的各个方面的外观和感觉进行细粒度控制。欧宝体育官网入口首页

要了解更多关于主题中的块及其结构，请查看我们的博客文章如何使用Shopify主题块．

使用主题应用扩展的好处

这种改进的工作流程将应用程序和主题更紧密地结合在一起，对开发人员和商家都有一系列好处。通过简化与商家商店交互的方法，主题应用程序扩展简化了采用、管理和卸载应用程序的过程。

以下是采用主题应用扩展如何对商家和开发者体验产生积极影响的一些例子:

1.应用程序现在无缝集成无需修改主题文件

可以说，使用主题应用扩展的最大优势是，商家不需要手动编辑他们的主题代码来安装你的应用。这意味着商家将能够更快地启动和运行你的应用，并且使用你的应用的一般体验将得到改善，从而带来更高的满意度。

有了这种更安全的安装过程，应用开发者可以减少支持债务，因为商家在安装你的应用时遇到的问题也会更少。一般来说，不注入代码的应用会大大降低应用给商家商店带来破坏性变化的风险。这样做的积极影响将在一年中最繁忙的时候尤其明显，因为您将能够帮助更多与您的支持团队联系的商家。

此外，由于你的应用程序不会修改主题文件，商家也将能够更容易地升级他们的主题，并继续使用你的应用程序，即使他们更新到一个新版本或切换主题。

2.不再需要构建特定于主题的解决方案

应用程序开发人员不再需要构建自定义集成逻辑或发布特定说明，以允许商家将其应用程序安装到每个现有主题上。随着Shopify主题商店最近重新开放，应用程序能够以主题无关的方式集成，这对应用程序开发者来说是个好消息。

应用程序块将自动适用于所有在线商店2.0兼容的主题，而应用程序嵌入块在复古和在线商店2欧宝体育官网入口首页.0主题中都得到支持，因为它们不依赖于章节或JSON模板。有了这个模型，主题应用程序扩展不需要与特定的主题结构兼容才能安装。

采用主题应用扩展的开发者不再需要耗时的任务，如发布和更新安装说明，或在应用中创建能够识别和响应特定主题的逻辑。有了这些时间，你就可以重新投入精力来增强你的应用程序，或者为商家开发新产品。

3.不需要实现代码删除过程

以前，当商家卸载应用程序时，应用程序的代码片段将保留在一个主题上，导致代码臃肿，潜在的性能问题，并可能导致商家对应用程序不满意。为了解决这个问题，应用开发者通常需要执行手动任务，删除旧的冗余代码，这是不可靠的，因为主题代码不是标准化的。

通过使用主题应用扩展，卸载现在更干净，因为没有多余的代码留在商家的主题。这意味着应用开发者不再需要在卸载后手动执行删除代码的过程，商家将对你的应用有更积极的体验。

4.应用程序现在可以利用Shopify的CDN来获取资产

使用主题应用扩展，你的应用可以包含Javascript和CSS文件/资产子目录，然后由Shopify自己的CDN自动呈现，以便在全球范围内快速可靠地交付。这种性能提升意味着你的应用组件将为商家快速加载，同时简化你的资产加载方式。

对于应用嵌入块，你可以在性能上更进一步，利用它们只在特定页面上加载脚本的能力。

5.轻松管理版本并部署到所有商家

向商家发布新版本应用的工作流程也通过主题应用扩展得到了改进。Shopify CLI可以通过运行来上传应用程序的草稿版本Shopify扩展推送它允许您验证所有功能是否正常工作。

在成功推送之后，一旦您对新更改感到满意，CLI将生成一个到您的Partner Dashboard的链接，您可以在其中创建新版本并发布扩展。此操作将自动将您的主题应用程序扩展部署到使用它的所有在线商店。欧宝体育官网入口首页

6.通过深度链接简化入职流程

如果你的应用使用了应用嵌入块，在安装之后，你可以用深度链接提示商家。当点击时，这些深度链接会激活主题编辑器中的应用嵌入块，供商家在保存和发布之前预览和调整。

深度链接简化了应用程序的安装流程，因为商家不需要导航到主题编辑器，找到块，然后对其进行操作。相反，你的应用程序会为他们做这些工作。因为商家可以预览区块，所以您为他们提供了对店面内容的控制。

这些好处表明，商家和开发人员都可以通过主题应用程序扩展体验到改进的工作流程。这将提高商家对你的应用的满意度，并让你专注于开发新应用，避免耗时的过程。

7.为商家提供更好的整体用户体验

主题应用扩展引入的标准化应用流程，让商家更加熟悉如何将应用整合到他们的商店中。通过这种新方法，商家在安装和使用应用程序时将获得一致的体验，这将使商家能够最大限度地利用你的应用程序。

此外，商家现在可以在主题编辑器中调整应用程序设置，并在编辑时将这些更改可视化。通过减少复杂性，商家使用应用程序的整体体验将变得更容易，应用程序开发者可以从更少的支持请求和更高的采用率中受益。

主题应用程序扩展的结构

主题应用扩展是一组文件，其结构与主题非常相似。下面是构建主题应用扩展时要遵循的文件结构概述。

• 资产：包含CSS、JavaScript和其他静态应用内容，可以在主题应用扩展中引用并注入到主题中。这些资产将通过我们的CDN提供。
• 块:包含应用程序块和应用程序嵌入块液体文件。当一个应用程序被安装到商店时，应用程序块和应用程序嵌入块会自动通过主题编辑器提供给商家。
• 片段:包含液态代码片段文件，这些代码可以在其他应用程序块和应用程序嵌入块中引用。

应用程序块的类型

应用程序可以使用两种类型的块来扩展主题:应用程序块和应用嵌入块。

应用程序块

应用程序块用于在主题部分注入内容或功能，或作为页面上的全宽部分(即产品评论，回库存通知，instagram feed等)应用程序块可以由商家在主题编辑器中添加，删除，重新排序和配置。当你将应用放置在商家想要的位置时，它们提供了最大的灵活性。

Okendo是一款受欢迎的Shopify应用程序，可以展示客户生成的内容，如产品评级和评论、照片和视频以及问答。主题应用程序扩展提供了更大的灵活性，可以在需要的地方放置代码，而无需利用Shopify API，简化了安装过程和维护。

我喜欢Shopify允许我们将自己的JS和CSS资产包含到应用程序块中的方式。在应用程序必须加载外部脚本和样式表才能工作之前，现在它可以只在应用程序的范围内声明，而不必在主题文件中引用。它减轻了我们的团队和商家在安装/卸载应用程序时的负担。

另一个保持商业用户体验的好例子是电子邮件营销应用ob欧宝娱乐app下载地址Seguno能够利用主题应用程序扩展，这样商家就可以无缝地将时事通讯注册集成到他们店面的选定页面上。Seguno首先考虑的是为商家构建一个流畅的安装体验，因为他们可以直接在主题编辑器中完成。

我们发现商家很容易发现这个功能，因为它就在主题编辑器中，并且已经看到关于将店面与Seguno集成的支持请求减少了。

应用嵌入块

应用嵌入块用于添加与主题布局分离的功能(如模态，聊天气泡)或没有视觉组件(如分析，SEO优化)。

激励是一个带有追加销售和激励的移动优先购物车，帮助商家在正确的时间追加销售正确的产品，以提高转化率。通过集成Shopify CLI，他们能够将应用程序代码从自托管文件移到主题应用程序扩展框架中，从而降低了代码库的复杂性和大小。

此外，在主题应用扩展之前，频繁部署新代码将需要许多不同的应用版本，并有条件地提供不同的脚本标签。主题应用扩展提供了一个框架，可以更快地响应错误并恢复到以前发布的版本。

“主题应用扩展为我们提供了一个框架，可以快速响应错误并恢复到稳定的无压力版本。我现在不能没有主题应用扩展版本。”

下面是一个将incentive作为应用嵌入到主题中的例子。

解构应用程序块

让我们来看看应用程序块的内容。下面的例子是应用程序块，但应用程序嵌入块将遵循相同的模式。

首先，所有在{%模式%}标签是应用程序块的主体。这是你定义你的块将渲染一旦添加到一个部分的地方。主体是使用HTML标记和构建的液体．除了少数人限制，开发者可以期待同样的Liquid对象，标签和过滤器可以在主题中使用。

接下来是应用程序块的模式，一个定义块属性的JSON结构:

• 名字:在主题编辑器中显示给商家的区块名称
• 目标:块的位置。在应用块中使用“section”，在应用嵌入块中使用“head”或“body”
• javascript/样式表:一个javascript /样式表文件，从资产文件夹中。只有当块出现在页面上时，这些资源才会被加载。不管这个块在页面上出现了多少次，它也只会被加载一次。
• 模板:可添加块的模板。主题编辑器将只在这里指定的模板的选择器中显示应用程序块。如果没有设置，Shopify默认使用所有支持的模板。
• 设置:将在主题编辑器中显示给商家的设置。这些设置可以在你的块体中引用，并用于配置它的外观和行为。应用程序块支持所有这些设置类型可以在主题中使用。

看到我们的关于应用程序块架构的文档查看可以在应用块的模式中设置的属性的完整列表。

向主题添加应用程序块

当商家从编辑器中添加应用块到模板或主题部分时，它的设置将存储在该页面的设置中JSON模板．如果商家将同一个应用块多次添加到一个主题中，每个实例都将有自己的一组设置存储在适当的JSON模板中。

由于应用程序嵌入块对主题是全局的，它们只能通过主题编辑器的主题设置区域启用/禁用。当商家启用应用嵌入块时，它的设置存储在主题中settings_data.json文件。

主题兼容性

所有主题都支持应用嵌入块，但是，只有在JSON模板中使用JSON模板的主题才能访问应用嵌入块/模板目录中。此外，应用程序块要求目标部分支持类型的块@app．

要查看如何在主题的产品页面上实现此功能的示例，您可以查看黎明主题的主要产品部分，它包含一个带有类型的@app在它的模式设置中。你可以按照我们的开发人员文档中的步骤操作确定和验证一个主题是否支持你的应用程序的应用程序块。

使用主题检查来验证代码

当你正在构建一个新的应用程序，或迁移你现有的应用程序，以使用主题应用程序扩展，你可以使用Shopify的主题检查工具，以帮助你保持正确的轨道。

的主题检查Linter是一个强大的工具，可以帮助检测主题应用扩展的液体代码中的错误，并确保您遵循最佳实践。主题检查可以运行从Shopify CLI使用Shopify扩展检查从你的内心theme-app-extension文件夹．附加——一个自动纠正错误。

延伸到未来

主题应用程序扩展允许应用程序和主题在一个可靠和安全的过程中集成在一起，这改善了开发者和商家的体验。通过这种新方法，您可以为Shopify商家构建解决方案，这些解决方案将直接使用，并将使您的应用程序获得成功。