Skip to content

Shopify Platform – External Storefront

Shopify Platform Documentation

Introduction

This documentation provides a comprehensive overview of the Shopify platform as used within our ecosystem. It outlines how Shopify powers our storefronts, content management, structured data, and deployment workflows using Hydrogen and Vercel.

Shopify acts as the central commerce and content backbone, enabling both technical and non-technical teams to manage products, content, and customer experiences efficiently while supporting a modern, scalable headless architecture.

Platform Overview

The Shopify Platform consists of a headless storefront architecture where Shopify manages commerce and content, while the frontend is built and deployed separately using Hydrogen and Vercel.

This setup allows us to: - Decouple frontend development from backend commerce - Improve performance and scalability - Enable flexible UI/UX customization - Allow content editors to work independently of developers

Key Components

Storefronts

Shopify storefronts define how customers interact with our brand online.

  • Online Store (Liquid-based)
  • Uses Shopify’s Liquid templating language
  • Managed directly within Shopify Admin

  • Suitable for traditional theme-based storefronts

  • Headless Storefront

  • Built using Shopify Hydrogen
  • Uses the Shopify Storefront API
  • Frontend is fully decoupled from Shopify Admin
  • Enables custom UI, better performance, and scalability

Content Editor (Shopify Admin)

Shopify Admin provides built-in tools for managing content without code changes.

  • Pages and Blog Posts
  • Static and informational content (About, FAQs, Blogs, Legal)
  • Editable by non-technical users

  • Accessible via Storefront API in headless setups

  • Theme & Navigation Management

  • Menus, links, and basic structure
  • Layout control is limited in headless architectures and handled in code

Metaobjects and Metafields

Structured content is managed using metafields and metaobjects.

  • Metafields
  • Extend Shopify resources such as products and collections
  • Used for custom attributes like specifications, labels, and SEO data

  • Accessible via APIs and Liquid

  • Metaobjects

  • Custom content models (e.g., FAQs, testimonials, banners, store locations)
  • Structured, reusable, and strongly typed
  • Managed in Shopify Admin
  • Acts as a lightweight CMS for headless storefronts

Hydrogen (Frontend Framework)

Hydrogen is Shopify’s React-based framework for building headless storefronts.

  • Built on React and Remix
  • Optimized for the Storefront API
  • Supports server-side rendering (SSR)
  • Includes performance optimizations and caching
  • Enables full control over UI and user experience

Deployment with Vercel

Vercel is used to host and deploy the Hydrogen storefront.

  • CI/CD Integration
  • Automatic builds triggered from Git repository changes

  • Preview deployments for pull requests

  • Environment Configuration

  • Storefront API tokens
  • Store domain

  • Environment-specific variables (development, staging, production)

  • Global Delivery

  • CDN-backed edge network
  • Fast load times and scalability

Workflow Overview

Content Workflow

  • Content editors manage:
  • Products
  • Pages and blogs
  • Metaobjects and metafields
  • Changes are reflected immediately via APIs
  • No redeployment required for content updates

Development Workflow

  • Developers handle:
  • UI and layout changes
  • Feature development
  • Metaobject schema definitions
  • Code changes trigger redeployment via Vercel

Conclusion

The Shopify Platform serves as the foundation of our commerce and content infrastructure. By combining Shopify’s robust backend capabilities with Hydrogen’s flexible frontend framework and Vercel’s scalable deployment pipeline, we achieve a modern, high-performance, and maintainable storefront architecture.

This approach empowers content teams, improves developer efficiency, and delivers a seamless and reliable customer experience across all digital touchpoints.