Shopify Hydrogen 演示商店列表 [更新中]

已发表: 2022-04-25

目录

由于 Shopify 是一个 SaaS 电子商务平台，它的用户在定制他们的在线商店时面临许多限制，但对于 Hydrogen，情况可能不再如此。

Hydrogen 是 Shopify 的第一个基于 React 的框架，供开发人员构建自定义店面。 通过使用 React Server 组件、服务器端渲染和缓存 API，该框架允许开发人员在短时间内创建快速且极其灵活的店面。

演示商店有助于您熟悉框架、其结构和组件。 此外，它还让您清楚地了解 Shopify Hydrogen 商店在现实中的外观和表现。

Shopify Hydrogen 店面演示

  1. Shopify 的官方演示

官方演示已上传到 StackBlitz——开发人员的在线环境。 实时预览将在几秒钟内在右侧面板中获取。 请注意，您无法通过手机查看此演示商店。

  1. Shopify 供应

这实际上不是演示商店，而是 Shopify 自己使用 Hydrogen 创建的官方商店。

  1. Tapita 的氢气演示

Shopify Hydrogen 前端演示由 SimiCart 创建，使用 Tapita Hydrogen 页面构建器拖放所有页面。

  1. rafaelcg.com 的氢气演示

此前端演示是为教育目的而创建的，它说明了开发人员如何使用 Hydrogen 构建基本的自定义店面。

  1. Sanity 的氢气演示

该演示演示了 Shopify Hydrogen 商店如何与 Sanity.io（一种结合产品和营销数据的工具）一起使用。

Shopify Hydrogen 项目演示

这是 Github 上的一系列演示项目，可帮助您了解 Shopify Hydrogen 的组件和结构。

  • Shopify 演示
  • Shopify 供应项目
  • Shobhit Sirohi 演示
  • henryclong 演示
  • andacg1 演示
  • bschnell-google 演示
  • 由 kwaaaaaa 演示

Shopify Hydrogen 与 Shopify 普通商店：有什么区别？

虽然对开发人员来说可能很容易，但 Shopify 商家可能会发现很难理解 Shopify Hydrogen、其相关条款及其工作原理。

因此，我们做一个简短的比较，指出 Shopify Hydrogen 和 Shopify 普通商店的主要区别，以便非技术型 Shopify 商家可以更好地了解情况。

定义

  • Shopify Hydrogen ：带有 UI 组件的自定义店面框架
  • Shopify ：电子商务平台

框架和平台是外人难以理解的两个令人困惑的 IT 术语。

一个平台包含软件和硬件，它为人们创建和使用它的应用程序提供了一个环境。 同时，仅包含软件的框架就像一个模板，带有现成的组件，供开发人员创建应用程序。

我们经常把平台当成一个游乐场，人们在这里参观和玩滑梯和跷跷板。 另一方面，框架本身就是跷跷板。 您可以使用提供的木材和油漆构建自定义跷跷板。

现在，让我们回到 Shopify 案例

电子商务平台 Shopify 具有主题、电子商务功能和应用程序，供店主创建在线网站。

同时，Shopify Hydrogen（框架）为开发人员提供构建自定义店面以在 Shopify 网站上运行所需的结构、工具和组件。

编码语言

  • Shopify Hydrogen ：带有 Reacts 框架的 Javascript
  • Shopify普通商店：Shopify Liquid

Liquid 是 Shopify 的唯一且唯一的编码语言，它是 Shopify 独有的。 另一方面，Javascript 是一种用于数百万应用程序的非常通用的编码语言。 例如，Netflix、Facebook、Candy Crush、Linkedin 等是一些使用 Javascript 的著名应用程序。

虽然 Shopify Liquids 是一种可靠的编码语言，但它显示出一些限制，尤其是在性能方面。 将 Javascript 用于 Shopify 店面可以加快网页速度，同时为构建独特的网站 UI 和 UX 提供无限可能。

用户友好性

  • Shopify Hydrogen ：面向开发人员
  • Shopify普通商店：非技术人员导向

Hydrogen 网站上介绍的术语、它的演示、它的教程是为开发者准备的。 虽然每个人都可以创建 Shopify 商店，但您需要编码经验才能通过 Shopify Hydrogen 创建自定义店面。

好处

Hydrogen 为开发人员和商家提供了一种在 Shopify 上创建动态电子商务体验的新方法。 它解决了当前 Shopify 店面的许多现有问题，例如缺乏灵活性和速度性能。

让我们深入了解 Shopify Hydrogen 的优势：

快速开发

官方演示模板包含近 30 个组件，已经包含了开箱即用的完整客户购买旅程。 这样，开发人员可以跳过设置并立即开始编码。

此外，Shopify Hydrogen 还附带直接与 Storefront API 连接的即用型挂钩、组件和实用程序。 因此，数据获取变得简单高效，无需编写 GraphQL 查询。

更好的性能

Shopify Hydrogen 利用先进的 Web 技术来优化速度并利用性能：

  • 流式服务器端渲染
  • 反应服务器组件
  • 智能内置缓存和高效的数据获取
  • 动态结合服务器端渲染、客户端获取和边缘交付

性能的提高不可避免地会导致更好的 Google Core Vitals 得分，从而获得更好的 SEO 结果。

更大的多功能性

氢是 Shopify 如何应对无头商务的方式——这是 2022 年最突出的电子商务趋势之一。

无头商务意味着将前端与后端分离，以实现无与伦比的可定制性和可集成性。

通过使用 Hydrogen 执行此操作，您可以在不影响任何后端功能的情况下自由更改前端。 这包括使用多个前端来实现更好的个性化和修复 Shopify 的 URL 结构。

此外，借助无头架构，所有定制和维护都可以在后端和前端同时完成。 知道他们的前端流程不会影响后端，反之亦然，开发人员和设计师将有更多的自由来完成他们的工作。

查看更多：无头 Shopify 商店示例

更好的个性化

电子商务的未来在于为客户提供最相关的体验。

简单的个性化从本地化开始——一个页面被翻译成不同的语言供不同国家的买家使用。

然而，如今，电子商务个性化变得越来越复杂。 我们已经看到价格根据不同的环境动态变化，产品推荐对不同的客户显示不同，等等。

电子商务商店现在正试图个性化其网站的每一个小细节。

Shopify 的首席工程师 Ilya Grigorik 解释了现代电子商务个性化，将每个页面可视化为一个开放的俄罗斯方块板，并且可以自定义板上的每个“插槽”以动态地吸引访问者。

那么 Shopify Hydrogen 如何帮助实现个性化？

Shopify Hydrogen 店面不是一个实体结构，而是由各种 UI 组件组成。 开发人员和商家可以定制每个内容组件，以提供最佳的动态内容和个性化的客户体验。

例如，您可以根据客户数据（例如过去的购买或人口统计信息）创建产品推荐块。

此外，个性化网络商店往往非常复杂，需要更强大和动态的网络技术来保持良好的速度性能。 Shopify 早就意识到了这个问题。 因此，Hydrogen 为更快的存储所做的所有努力，包括更好的服务器端渲染、动态缓存和数据获取，都是考虑到这个特定问题。

使用 SimiCart 定制氢气店面

Hydrogen 是 Shopify 迈向电子商务未来的垫脚石：动态和个性化。 借助 Hydrogen，Shopify 可以为客户提供更多价值，尤其是扩大规模的商家，从而保持其相对于其他灵活平台的竞争优势。

对于商家而言，放弃当前的 Shopify 前端并建立 Hydrogen 店面有助于解决许多现有的痛点，例如性能和定制。 这会带来更高的平均订单价值、更好的保留率和收入增长。

然而，目前，Hydrogen 仍然是为开发人员而不是非技术娴熟的 Shopify 所有者制作的。 需要编码经验，没有页面构建器工具可以开始，也没有适合初学者的指南。

SimiCart 提供完整的开发解决方案，以实惠的价格使用 Shopify Hydrogen 构建无头店面。 该软件包附带一个拖放页面构建器工具，以便 Shopify 商家可以创建自定义 Hydrogen 店面，就像他们在普通 Shopify 商店中所做的那样。

轻松建立氢气店面