Technology Stack

Frontend uses a modern, production-ready technology stack built for headless Shopify commerce: Shopify Hydrogen and the Storefront API for commerce, Next.js for the application, Tailwind CSS and shadcn/ui for the interface, React Editor for visual page composition, and Vercel for deployment. All code runs in a sandbox environment optimized for performance and security.

Core Technologies

Shopify Hydrogen

Storefronts are built with Hydrogen, Shopify’s framework for headless custom storefronts. Hydrogen gives you server-rendered product and collection pages, cart state, and a direct line to Shopify’s commerce primitives — so your store renders products on first paint and hands off to Shopify’s checkout without a payment flow of your own.

Environment variables are securely injected and proxied through a whitelist of approved domains, keeping your access tokens safe while enabling connections to third-party services.

Shopify Storefront API

Every piece of commerce data comes from the Shopify GraphQL Storefront API: products, collections, variants, inventory, carts, and checkout URLs. Nothing is hand-rolled and nothing is mirrored into a database of your own, so your storefront always reflects what is actually in your store.

Queries run server-side so the storefront renders products immediately, and cart mutations run in server actions.

Next.js

Your storefront is a Next.js application using the App Router. Server components fetch commerce data before the page reaches the browser, server actions handle cart mutations, and route handlers cover webhooks and any API surface your store needs — with image optimization, streaming, and caching out of the box.

React

Build interactive shopping experiences with React, the industry-standard JavaScript library for component-based UI development.

TypeScript

All projects use TypeScript for type-safe code, better developer experience, and fewer runtime errors.

Tailwind CSS

Style your storefront with Tailwind CSS, a utility-first CSS framework for rapid UI development without writing custom CSS.

shadcn/ui

Interface primitives come from shadcn/ui — accessible, unstyled-by-default components that live in your own codebase. They are yours to restyle, so a component library never stands between you and your brand.

React Editor

Pages are composed with React Editor, the visual drag-and-drop composer built for Next.js. Your React components are registered as editable blocks, so anyone on your team can rearrange sections, swap products, and edit copy visually while the underlying code stays the code you shipped.

Vercel

Publishing deploys your storefront to Vercel — each storefront gets its own Vercel project, with server rendering, edge caching, a global CDN, HTTPS, and custom domains. See Publishing for details.

Vercel AI SDK

Shopping assistants built with Frontend are powered by the Vercel AI SDK, the industry-leading framework for building conversational AI experiences. It provides first-class support for multi-modal interactions, tool calling, real-time streaming, and multi-step workflows — so an assistant can search your catalog, compare variants, and build a cart across a conversation.

Shopify

Shopify is the backend for your entire storefront. Products, collections, variants, inventory, pricing, discounts, carts, customer accounts, orders, and checkout all live in your store and are read through the Storefront API — nothing is mirrored into a database of your own, and nothing drifts out of sync.

Your storefront is the presentation layer; Shopify remains the system of record and runs the transaction end to end.

Serverless Functions

Frontend supports serverless edge functions for server-side logic. These functions allow you to:

• Run privileged Storefront and Admin API calls without exposing tokens
• Handle webhooks from Shopify, such as inventory or order updates
• Power shopping assistant endpoints and their tool calls
• Keep sensitive code and API keys hidden from the browser

See the Serverless Functions documentation for more details on creating and using serverless functions.