Do I need Shopify plus to use Shopify Headless Hydrogen

Do I need Shopify plus to use Shopify Headless Hydrogen

·

6 min read

You do not need Shopify Plus to use Shopify Hydrogen. Here are the key points:

Availability & Access

Hydrogen is available on all Shopify plans except the Starter plan. The framework and its hosting platform Oxygen are provided at no extra cost to eligible Shopify merchants.

Key Features Available to All Users

  • React-based headless commerce framework

  • Pre-built commerce components and hooks

  • Server-side rendering capabilities

  • Integration with Shopify's Storefront API

  • Deployment on Oxygen (Shopify's hosting platform)

Core Functionalities

  • Custom storefront development

  • Built-in performance optimization

  • Edge rendering capabilities

  • Integration with third-party apps

  • Push-to-deploy support with Oxygen

Development Requirements

While a specific Shopify plan tier isn't required, developers should have:

  • Working knowledge of React

  • Understanding of JavaScript

  • Familiarity with CSS and HTML

  • Experience with Node.js

  • Knowledge of GraphQL for API consumption

The primary consideration for implementing Hydrogen should be based on your business needs and technical capabilities rather than your Shopify plan level.

What are the main differences between Shopify Hydrogen and Shopify Oxygen

Here are the key differences between Shopify Hydrogen and Shopify Oxygen:

Hydrogen

  • React-based framework for building custom headless storefronts

  • Provides pre-built components and tools for frontend development

  • Handles the storefront's user interface and customer experience

  • Includes features like:

    • Built-in commerce components

    • Pre-built headless architecture

    • Integration with Storefront API

    • Development tools like Hot Module Replacement

    • Tailwind CSS implementation

Oxygen

  • Global hosting platform specifically designed for Hydrogen storefronts

  • Manages server infrastructure and deployment

  • Key features include:

    • Integrated with Shopify's global infrastructure (100+ server locations)

    • Built-in caching and performance optimization

    • Deployment environment management

    • Environment variable handling

    • CDN integration

Notable Limitations of Oxygen

  • Only allows hosting one Hydrogen build per store

  • Limited to Hydrogen-based projects only

  • Logs are stored for maximum 72 hours

  • No support for mono repo architecture

Availability

Both Hydrogen and Oxygen are available on all paid Shopify plans (Basic, Shopify, Advanced, and Plus) except the Starter plan. While Hydrogen can be hosted on other platforms like Vercel or Netlify, Oxygen is Shopify's native hosting solution that comes included with eligible Shopify subscriptions.

What are the advantages of using Shopify Oxygen over other hosting solutions like Netlify or Vercel

The key advantages of using Shopify Oxygen over other hosting solutions:

Cost Benefits

  • No additional hosting costs as it's included in your Shopify subscription plan

  • No separate charges for bandwidth or storage usage

  • More cost-effective compared to solutions like Vercel which can get expensive quickly

Integration & Performance

  • Seamless integration with Shopify's global infrastructure across 100+ server locations

  • Smart caching feature to accelerate page load speeds

  • Optimized specifically for eCommerce performance

  • Automatic scaling and load balancing for handling traffic spikes

  • Built-in CDN integration through Cloudflare

Development Experience

  • Simplified setup and deployment process

  • Multiple deployment environments for testing changes

  • Continuous deployment using GitHub integration

  • Minimal configuration required for setup

Limitations to Consider

  • Can only host one Hydrogen build per store

  • Limited to Hydrogen-based projects only

  • Logs are stored for maximum 72 hours

  • No support for mono repo architecture

  • Less technical flexibility compared to general-purpose hosting providers

While Oxygen may have some limitations, its tight integration with Shopify's ecosystem and cost-effectiveness make it an attractive option for merchants who want a streamlined hosting solution for their Hydrogen storefronts.

How does Shopify Oxygen's smart caching improve page load times

Full-Page Caching

  • Reduces load time for subsequent visits by serving cached content instead of executing the Hydrogen storefront worker

  • Automatically checks for cached versions of requested content

  • Serves stale content while refreshing in the background, ensuring continuous fast performance

Smart Caching Features

  • Implements built-in caching controls to handle complex information and minimize API calls

  • Integrates with Cloudflare's CDN for global content distribution

  • Automatically redirects visitors to the nearest server location to reduce latency

Caching Optimization

  • Uses "stale-while-revalidate" strategy to maintain fresh content without impacting performance

  • Provides configurable cache TTLs (Time To Live) and caching policies

  • Enables granular control over data freshness and revalidation strategies

Performance Benefits

  • Accelerates page load speeds through server-side caching

  • Optimizes delivery of frequently accessed pages and assets

  • Maintains high performance during traffic spikes through automatic scaling

  • Reduces server load by serving cached content from edge locations

The combination of these caching features helps create a faster, more responsive shopping experience while reducing the load on the main servers.

Can Shopify Oxygen's smart caching be customized or configured by merchants

Caching Controls

  • Merchants can configure caching through the Oxygen-Cache-Control header in Hydrogen storefront worker responses

  • The header can be set with different directives to control caching behavior:

    • public: Allows response to be cached by any cache

    • max-age: Specifies cache duration in seconds

    • s-maxage: Sets duration for shared caches

Customization Options

Vary Header Configuration

  • Merchants can use the Vary response header to control which request headers determine cache matches

  • This allows for serving different cached content based on specific request parameters

Caching Criteria For a response to be cached, it must:

  • Be a GET request

  • Have a 2XX or 3XX status code

  • Include proper Oxygen-Cache-Control headers

  • Have appropriate Vary header values

Limitations

  • Cannot manually purge the cache for currently deployed workers

  • Must wait for cache expiration or deploy new changes

  • Cached responses don't carry over between deployments

  • Header specifications for Vary must use complete values

The smart caching system works automatically to optimize performance while allowing merchants to configure basic caching parameters through headers and response settings.

What specific caching strategies can merchants customize in Shopify Oxygen

Built-in Caching Strategies

Default Options

  • CacheShort(): Public caching for 1 second with 9-second stale-while-revalidate

  • CacheLong(): Public caching for 1 hour with 23-hour stale-while-revalidate

  • CacheNone(): No caching with no-store directive

  • CacheCustom(): Allows for custom cache control settings

Customizable Parameters

Cache Control Options

  • mode: Can be set to public, private, no-store, must-revalidate, or no-transform

  • maxAge: Duration in seconds to cache the response

  • staleWhileRevalidate: Time in seconds to serve stale content while fetching fresh data

  • sMaxAge: Duration for CDN/proxy caching

  • staleIfError: Time to serve cached content during 5xx errors

Implementation Considerations

Caching Rules

  • Responses must be GET requests

  • Status codes must be 2XX or 3XX

  • Proper Oxygen-Cache-Control headers must be present

  • Customer Account API data is never cached due to personalization

Performance Features

  • Full-page caching for static content

  • Smart default caching policies with automatic key generation

  • Integration with Cloudflare's CDN for global content distribution

  • Automatic scaling and load balancing capabilities


Supercharge Your Online Store

Curious about how Headless Commerce could supercharge your online store? Our Shopify experts are ready to guide you through the power of Shopify Hydrogen and help you build a faster, more flexible e-commerce experience. Schedule your free consultation now.

Get Expert Guidance →