Skip to main content

Shopify Platform Architecture

Before you can build effectively on Shopify, you need to understand how the platform is constructed. Shopify is one of the largest multi-tenant SaaS platforms in the world, powering millions of merchants across every industry. This lesson explores the architecture that makes it all work.

Multi-Tenant SaaS Architecture​

Shopify runs on a multi-tenant architecture, meaning all merchants share the same application infrastructure. Unlike self-hosted platforms (WooCommerce, Magento), merchants do not manage servers, databases, or deployments.

Why Multi-Tenancy Matters for Developers​

As a Shopify developer, multi-tenancy affects you in several ways:

  • No server access: You cannot SSH into a Shopify server or modify system configurations. Your code runs in sandboxed environments (apps, themes, Functions).
  • Shared rate limits: API rate limits protect the platform. Your app shares resources with every other app on a merchant's store.
  • Guaranteed uptime: Shopify handles infrastructure, scaling, and security. Your app benefits from Shopify's 99.99% uptime SLA.
  • Standardized data model: Every store uses the same product, order, and customer data model. Once you learn it, it works everywhere.
Shopify at Scale

Shopify processes over $200 billion in annual GMV (Gross Merchandise Value). During peak events like Black Friday/Cyber Monday, the platform handles over $4.2 billion in a single weekend. The architecture is designed for this level of scale, and your apps inherit that infrastructure.

The Three Surfaces​

Shopify exposes three main surfaces that users interact with. Understanding these is fundamental to knowing where your code runs.

1. The Storefront​

The storefront is what customers see when they visit a merchant's online store. It can be rendered in two ways:

Liquid Themes (Online Store 2.0): The default. Shopify's servers render HTML using the Liquid templating language. Themes are collections of Liquid templates, CSS, JavaScript, and assets. This is the most common approach, used by the vast majority of Shopify stores.

Hydrogen (Headless): A React-based framework for building custom storefronts. Hydrogen uses the Storefront API to fetch data and can be deployed on Shopify's Oxygen hosting or any Node.js host. Used by brands that need complete design freedom.

2. The Admin​

The Shopify Admin is the merchant's back office -- where they manage products, orders, customers, settings, and installed apps. As an app developer, your app runs embedded inside the Admin using App Bridge.

Key Admin concepts:

  • App Bridge: A JavaScript library that lets your embedded app communicate with the Shopify Admin (navigation, modals, toast notifications, resource pickers)
  • Polaris: Shopify's React component library for building Admin UIs that feel native
  • Admin API: The GraphQL and REST APIs that let your app read and write store data
  • Admin extensions: UI extensions that add your app's functionality directly into Admin pages (e.g., a custom field on the product page)

3. The Checkout​

Checkout is Shopify's most protected surface. For security and compliance reasons (PCI DSS), checkout is tightly controlled. You extend it through specific APIs:

  • Checkout UI Extensions: React components rendered in designated extension targets within the checkout flow
  • Shopify Functions: WebAssembly modules that customize checkout logic (discounts, shipping, payment methods, cart transformations)
  • Post-Purchase Extensions: UI shown after payment but before the thank-you page
Checkout Is Not a Free-for-All

Unlike other platforms, you cannot inject arbitrary JavaScript into Shopify's checkout. This is intentional -- it protects conversion rates, security, and performance. Extensions and Functions provide powerful customization within safe boundaries.

Online Store 2.0​

Online Store 2.0 (OS2.0) is Shopify's current theme architecture, introduced in 2021. It replaced the legacy theme system with a more flexible, merchant-friendly approach.

Key OS2.0 Features​

  • JSON Templates: Templates are defined in JSON, specifying which sections to render and in what order. Merchants can add, remove, and reorder sections without editing code.
  • Sections Everywhere: Sections are reusable, configurable blocks of content. In OS2.0, sections work on every page type, not just the homepage.
  • Blocks: Sections contain blocks -- smaller units of content that merchants can add and rearrange within a section.
  • Metafields: Custom data fields attached to products, collections, orders, and other resources. OS2.0 made metafields accessible in the theme editor.
  • App Blocks: Apps can register theme blocks that merchants drag and drop into their theme using the editor.

Hydrogen and Oxygen​

For merchants who need complete control over their storefront, Shopify offers a headless commerce solution.

Hydrogen​

Hydrogen is a React framework built on Remix, specifically designed for Shopify storefronts. It provides:

  • Shopify-specific hooks and components for products, collections, cart, and customer accounts
  • Storefront API integration with built-in caching and optimistic updates
  • SEO utilities for managing meta tags, sitemaps, and structured data
  • Streaming SSR for fast initial page loads
  • Starter templates that provide a complete storefront out of the box

Oxygen​

Oxygen is Shopify's hosting platform for Hydrogen storefronts. Key benefits:

  • Global edge deployment -- your storefront runs close to customers worldwide
  • Automatic scaling -- handles traffic spikes without configuration
  • Git-based deployments -- push to main and Oxygen deploys automatically
  • Environment variables -- manage secrets securely
  • Preview deployments -- every branch gets a preview URL
When to Use Hydrogen vs Liquid

Use Liquid themes when: the merchant needs a standard e-commerce experience, wants to use the theme editor, and does not have a development team for ongoing maintenance.

Use Hydrogen when: the brand needs a completely custom design, wants app-like interactivity, needs to integrate non-Shopify data sources, or has a development team that prefers React.

For most stores, Liquid themes are the right choice. Hydrogen shines for high-end brands, marketplaces, and complex multi-source storefronts.

Shopify Functions Runtime​

Shopify Functions are the newest major piece of the platform architecture. They are lightweight, sandboxed programs that run on Shopify's infrastructure to customize core commerce logic.

How Functions Work​

  1. Extension target: You choose which part of the commerce flow to customize (discounts, shipping rates, payment methods, cart transforms, order routing, etc.)
  2. Input query: You write a GraphQL query defining what data your Function needs (cart contents, customer info, metafields, etc.)
  3. Function logic: You write the customization logic in JavaScript or Rust. The code compiles to WebAssembly (Wasm).
  4. Output: Your Function returns a structured response that Shopify applies to the checkout.

Functions execute in under 5ms with strict memory limits. They are designed to be fast and safe -- they cannot make network requests, access the filesystem, or perform I/O. All data comes in through the input query.

Scripts to Functions Migration

If you are maintaining Shopify Scripts (Ruby-based checkout customization), note that Scripts are deprecated and will be removed in June 2026. All Scripts must be migrated to Functions. We cover the migration process in detail in the Shopify Functions lesson.

How It All Connects​

Here is the complete picture of how the platform components relate to each other:

Key Takeaways​

Understanding the platform architecture gives you a mental model for every decision you make as a Shopify developer:

  • Multi-tenancy means you extend the platform, you do not control the infrastructure
  • Three surfaces (Storefront, Admin, Checkout) each have different extension mechanisms
  • Online Store 2.0 provides flexible, merchant-editable themes with sections and blocks
  • Hydrogen + Oxygen enable headless storefronts for brands that need complete control
  • Shopify Functions customize commerce logic in a fast, sandboxed runtime

In the next lesson, we survey the complete Shopify API landscape and learn how to choose the right API for each task.