Publishing

Frontend’s publishing feature deploys your storefront to a live production environment on Vercel, making it accessible to your customers. Publishing builds an optimized production version of your storefront and serves it on a secure, public URL.

How Publishing Works

When you publish a Frontend project, the platform handles the deployment for you:

1. Your storefront is built into an optimized Next.js production build
2. The build is deployed to Vercel — each storefront gets its own Vercel project
3. Static assets are distributed over a global CDN for fast loading
4. A secure HTTPS URL is assigned to your storefront
5. Your storefront goes live and is accessible to anyone with the link

This happens with a single click — no DevOps knowledge, servers, or manual configuration required.

What Runs in Production

A published storefront runs your full Next.js application, so features that go beyond a static site are available in production, including:

• Server-side rendering of product and collection pages
• Server actions for cart mutations, plus API routes and webhook handlers
• The full range of npm packages

All environment variables from your project — including your Shopify Storefront access token — are automatically included in the production build, so your keys and configuration carry over seamlessly.

Technology Stack

Published storefronts use a modern, performant stack:

• Shopify Hydrogen and the Storefront API — live products, collections, cart, and checkout hand-off
• Next.js — a React framework providing server-side rendering, static generation, and optimized performance
• Tailwind CSS and shadcn/ui — utility-first styling and accessible components
• Vercel — global edge network, automatic HTTPS, and custom domains

Custom Domains

Every published storefront receives a default Frontend URL, and you can connect your own domain so customers shop on your brand’s address. See Custom Domains for setup instructions.

Publishing Updates

When you make changes to your storefront, they won’t appear on the live site automatically:

• Changes made in the Frontend editor are staged for review
• You must explicitly publish again to deploy these changes
• Each new publication creates a new deployment version
• Previous deployments are preserved in your project history

This workflow ensures that you can thoroughly test changes before making them public, maintaining control over what your users see.

Best Practices

To ensure successful publishing:

• Test your storefront thoroughly in the development preview before publishing
• Walk the full path — collection page, product page, add to cart, checkout hand-off — before each publish
• Publish smaller updates frequently rather than infrequent major changes
• Monitor the console to catch and address build issues quickly

By following these practices, you can maintain a reliable, up-to-date live storefront.