As Shopify experts, our design and development agency is used to having requirements that are versatile.
Throughout nearly all of our Shopify store builds, we’ve implemented some really cool features to increase customer experiences within the Shopify ecosystem.
Here’s how we’re making better, more personalised Shopify experiences with Shopify Hydrogen.
There are certain limitations present in Shopify’s core theme infrastructure which is why Shopify have dedicated APIs to allow for data retrieval.
Due to the flexibility and downright custom nature of Hydrogen, we have far more control with a build in order to be fully creative and have as much development freedom as possible.
Shopify Hydrogen APIs
Shopify APIs are primarily divided into two parts; Admin and StoreFront
Admin: Admin APIs give access to all the admin management. We can create orders, manage products and pretty much have access to every functionality which we would usually perform in the admin panel. The use of these APIs is more inclined toward creating Shopify apps and not custom storefronts.
StoreFront APIs: These APIs give access to all store data, such as products, collections, customers etc. We can use these APIs on the client-side to create truly custom and interactive experiences,
Tech Stack: Like most developers, we are inclined towards using React for our front-end library and integrated contentful as our CMS to data management for merchants. To make our React APP more speed focused and SEO oriented, we often use NEXT.js as an additional framework which gives great flexibility in how our apps are rendered.
Rendering on Shopify Hydrogen
There are two main rendering methods which can be implemented with NEXT.js, the first being Server-Side Rendering.
This type of rendering pulls a page as a completely loaded page from the server, different from a normal react app as this would download the whole page and then run through the populating process markup with API calls. This isn’t great for SEO so we pull the data using NEXT so that it replicates a server-side language, resulting in better SEO.
Secondly, Static Rendering: A really popular way of rendering the NEXT application is static rendering so the whole route is served static to the browser like a pre-saved HTML.
We use a combination of server-side and static rendering to get a well-optimized storefront.
Recently, Shopify bestowed the custom build lover with something they call Hydrogen, helping to structure your Shopify custom storefront and introducing helpful prebuilt components that can be used as Plug & Play, prebuilt cart functionality and much more to help developers create performance optimisations, SEO and custom storefronts.
Shopify did a great job in creating a well-optimized boilerplate which is structured as:
Now as it stands, the structure here takes care of the heavy bulk which is kindly provided via Hydrogren, allowing APIs to then modify the CSS.
Shopify introduced a really interesting approach toward handling the rendering of the app they have leveraged the power of both client-side rendering and server-side rendering
Hydrogen uses all 3 types of components for the rendering. First and second are client-side components which end with client.jsx and server-side which ends with .server.jsx. The third are shared which don’t have any of the above configurations.
Hydrogen mainly uses Vite for tooling and Tailwind CSS for styling – not to mention, something which our team loves to work with!
Getting started with Shopify Hydrogen
We can create a Hydrogen project with any of the package managers like yarn or npm but we prefer to use yarn. The reason for this, is that it keeps the dependencies up to date and synced.
To start with, all a developer needs to do is run the following command within a new command prompt/terminal:
yarn create hydrogen-app
This will create a fresh Hydrogen app. Next, update the shopify.config.js with your own unique storefront credentials using a code editor of your choice – these are the fields necessary to connect with your storefront. Below you’ll find a indepth table of the required credentials:
| storeDomain | String | Yes | hydrogen-preview.myshopify.com |
| storefrontToken | String | Yes | The Storefront API access token for hydrogen-preview |
| storefrontApiVersion | String | Yes | 2022-04 |
Once configured, move back to your command prompt/terminal, navigate to the project directory and run:
yarn dev
Now the above has been ran, the development server will, by default, run on http://localhost:3000. Congratulations, you now have your first Hydrogen app up and running🎉
Dive deep into more detailed stuff about Hydrogen here: https://shopify.dev/custom-storefronts/hydrogen/getting-started/start-building
