Custom Headless Shopify Storefront for Espresso Editorial

Espresso Editorial – Custom Headless Shopify Storefront

I built Espresso Editorial as a custom e-commerce storefront focused on coffee subscriptions, giving customers the ability to browse products and subscribe to weekly, bi-weekly, or monthly deliveries.

Instead of using Shopify’s standard themes and templates, I developed a fully custom frontend using Hydrogen, React, and TypeScript to create a more modern and editorial shopping experience with full control over the website’s structure, styling, and user experience.

I set up the Shopify store and integrated the frontend with Shopify through the Storefront GraphQL API, allowing product and subscription data to be pulled dynamically. I also structured the site around Shopify metafields, so content such as text, images, product details, and subscription plan information can all be updated directly in Shopify without needing code changes.

The project includes a complete shopping flow where users can browse products, manage subscriptions, and continue through Shopify’s secure hosted checkout. I focused heavily on performance and user experience, using Hydrogen’s loading patterns to keep pages fast and responsive, along with Motion for smooth transitions and interactive elements.

The site was built to work seamlessly across desktop and mobile, with responsive layouts that adapt cleanly across screen sizes while keeping the shopping experience consistent.

I also handled the visual direction of the project, creating the initial design concepts and refining them into the final UI. The site is deployed on Vercel with automatic deployments connected through GitHub.

Built a fully custom headless Shopify storefront using Hydrogen

Created a custom frontend experience instead of using standard Shopify themes

Set up and configured the Shopify store, products, and subscription plans

Integrated Shopify Storefront APIs using GraphQL

Structured content around Shopify metafields for easy updates without code changes

Built subscription purchasing flows for weekly, bi-weekly, and monthly deliveries

Connected the storefront to Shopify’s secure hosted checkout flow

Built responsive layouts optimized for desktop and mobile devices

Added animations and interactive UI elements using Motion

Optimized page performance using Hydrogen’s loading strategies

Designed and refined the storefront UI and overall visual direction

Deployed and managed the live application with Vercel

Used GitHub for version control and deployment workflow

I have also created a quiz that customers can go through if they don't know which coffee to choose:

Here's also a mobile version of the website: