Headless at Shopify

I recently spent some time learning the basics of Shopify’s headless commerce, specifically through their “Headless at Shopify for Developers” learning path. This introduced me to Shopify’s Storefront API, the Hydrogen framework, and Oxygen hosting service.

Headless commerce separates the frontend from the backend, allowing developers to choose their preferred frontend technology while still leveraging Shopify’s backend for managing products, orders, payments etc. In my case, I used Shopify’s Hydrogen framework along with Remix.

Storefront API - A GraphQL-based API that provides a set of endpoints for fetching data about products, orders and customer information from Shopify’s backend.

Hydrogen - A framework that is a set of pre-built components, hooks, and utilities built on React and Shopify’s Remix framework, providing developers with the tools to create a fully functional commerce solution. While Hydrogen + Remix is Shopify’s recommended setup, it’s worth mentioning that developers can use other React-based frameworks like Next.js if they prefer.

Oxygen Hosting – Shopify’s Oxygen hosting service is designed for Hydrogen-powered storefronts, offering continuous deployments via GitHub, multiple staging environments which ensures that changes can be tested before going live.

Summary

From a frontend developer’s perspective, I found Shopify’s headless approach easy to get started with, especially thanks to Hydrogen’s pre-built components. I think it’s a good option for businesses that have specific frontend needs that a traditional Shopify theme wouldn’t support.