![Headless Commerce comes to Shopify](https://uploads-ssl.webflow.com/62c9e07a903d342218097c2e/6362a71a250031577e6c1c41_hydrogen-data-sources-f6ad7a01b0f9f1020fbede44473008302cfa4ff0d0e1b10a8987d3f288b58abe.png)
Headless Commerce comes to Shopify
Before we can properly explain what Hydrogen is, we must first understand the Headless Commerce concept.
In a monolithic eComerce model, the frontend, backend, & all functions existed together. That is, websites, mobile applications and social media platforms would pass data to the storefront (front end).
![](https://uploads-ssl.webflow.com/62c9e07a903d342218097c2e/63627c1f0846e1abd010d163_oMC9byRWK21StYepMWptGbYlX7jsbybGqGfYGqeuLa7fudugN_jWL7xG-j2XD7gNAgClJ6FakVAVDkSbxIeS08dZZrXTz8ZwMyg7I6Lw2p47vPFSL76gP7oZJFj0KY0T4CXGE-NOLS14YpDNCsZmtlhzR0tHY3gBGK9wkCJHVOjIFFEOz8i4GUvVRw.png)
There are scenarios where having the ability to abstract the front end and the back end is beneficial. For example: A storefront could run on a custom piece of hardware such as a refrigerator with a touch screen. In essence, the frontend and backend are independent.
![](https://uploads-ssl.webflow.com/62c9e07a903d342218097c2e/63627c1f8f29da299fd04bbd_uNvDFzQ46oVYTK5VKnQqxZkBMQTNUMPXyolwmGOCoIs3RJtRNlUXD4mpjUKyy8NoIPNblxuHOY_v0ubFfRZ5fIiE7suYJlW4Ae2lEkqaQLlpQJDolJTKzzRTI1N_h8TW6qvd6GoYUXuN1Gre5lNemzZYetVWOsO_cseI3HFRQHGAU66n1K48_PM5Vw.png)
Hydrogen is a framework containing a number of library components, hooks & utilities.
![](https://uploads-ssl.webflow.com/62c9e07a903d342218097c2e/63627c202bb6c3222edc4ccb_809zs3d5ENcHMskLOmUDyuES4wS0E86nG3PolqUrevGMRHcFJMmM7KXeL7kjUR-Zo-8Cr5LnZpoNF8LG21kY5x_MYSz1w9zTuEKtlcI78c5pv9AkelP__qA3RGvnmmWxOitRaWofaphxVypJQ5Ih_lf373e_EIiuIRGpgyt3E5rZyIU-k5ll9WgcYA.png)
Hydrogen is the framework that allows developers to create custom storefronts through the headless commerce model. Storefronts can run on websites, mobile apps, video games, , smart devices, etc.
![](https://uploads-ssl.webflow.com/62c9e07a903d342218097c2e/63627c1ff0fbc36aab4c6073_QkT8V32P1Kcab70auXb26OcoP0f4PlDYDFw1d-YFHAf8yB1yrVw0g7_pLThXWfDA4JnxZc6uF7kGJppaFYVdSFnNM-DhVK0DhO3wFIP-47ffixzLUldSrhR_wsJgzIVxcNpfv2aEDHVC2XAx9KaoeTdxCW6Oz6sdlVv74Kt-5wKYJa6GUlboCrMxfA.png)