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 商店中所做的那樣。

輕鬆建立氫氣店面