Shopify Plus and Shopify Oxygen: When to Use Each

Shopify Plus is the enterprise-tier version of Shopify’s core platform, offering advanced admin capabilities, higher API limits, and access to exclusive features like Checkout Extensibility and Flow. Shopify Oxygen is a globally distributed hosting platform designed to deploy storefronts built with Hydrogen, Shopify’s React-based headless framework. While both tools belong to the Shopify ecosystem, they serve different roles in enterprise eCommerce architecture.

Use Cases for Shopify Plus

Backend-Centric Implementations

Shopify Plus is intended for businesses that require extensive backend automation and scalable infrastructure within Shopify's hosted ecosystem. It is commonly used when managing high-volume operations such as flash sales or synchronized multi-region storefronts.

Checkout and Workflow Customization

Advanced customization of checkout flows is supported via Shopify Functions, for the introduction of logic such as dynamic discounts, product-specific rules, and shipping rate modifiers, without relying on external middleware.

API and App Ecosystem Access

Merchants who require priority API access, integration with ERP/CRM systems, or use of private/internal apps benefit from the elevated Admin API limits available in Shopify Plus. This tier also allows secure integration of third-party platforms using OAuth2-based private apps, streamlining omnichannel or headless backend setups.

Video Support

Managed through product media or metafields. Merchants can store MP4, YouTube, or Vimeo URLs as part of a product's media set or within custom metafields. These are rendered using Liquid in the theme templates or via the product media API. Video behavior such as lazy loading, preview thumbnails, or conditional playback logic must be handled manually via JavaScript or external apps.

Example (Liquid Template Render):

{% if product.metafields.custom.video_url %}

<video controls width="100%">

<source src="{{ product.metafields.custom.video_url }}" type="video/mp4">

</video>

{% endif %}

Explanation:

• {% if product.metafields.custom.video_url %}:Checks if the product has a video_url metafield defined under the custom namespace. If the field exists and is not empty, the enclosed <video> block will render.
• <video controls width="100%">: Renders an HTML5 video player that spans the full container width and includes built-in controls (play, pause, volume).
• <source src="{{ product.metafields.custom.video_url }}" type="video/mp4">:Sets the video source to the value stored in the video_url metafield. It assumes the video is an .mp4 file.
• {% endif %}: Ends the conditional block that checks for the presence of the video URL metafield.

Use Cases for Shopify Oxygen

Custom Frontend Rendering

Shopify Oxygen is used when merchants need full control over the frontend logic, layout rendering, and real-time personalization at the edge. It powers Hydrogen storefronts built with React, using Vite for server-side rendering (SSR) for control routing, data preloading, and page composition far beyond what Liquid themes allow.

Headless Commerce and PWA Design

Oxygen is suited for headless commerce builds where the backend (Shopify Plus) is decoupled from the frontend. The setup is common in organizations that require Progressive Web App behavior, mobile-first experiences, or storefronts that integrate deeply with external CMS, video layers, or real-time personalization engines.

Edge Performance and DevOps Control

Oxygen deployments are Git-based and globally distributed. Hence, teams can apply performance budgets, integrate CI/CD workflows, and manage dynamic content using edge functions, enabling rapid iteration of storefronts with capabilities like real-time A/B testing, content hydration, and CDN-level media optimization, including direct control over video delivery strategies.

Video Handling

In Oxygen-powered Hydrogen storefronts, video playback is implemented using React components. Video URLs are pulled from the Shopify Storefront API or metafields and rendered client-side using native <video> tags or libraries like Plyr or Video.js.

Example (React Component in Hydrogen):

export default function ProductVideo({ videoUrl }) {

return (

<video controls width="100%">

<source src={videoUrl} type="video/mp4" />

</video>

);

}

Explanation:

• export default function ProductVideo({ videoUrl }) {: Defines a React functional component named ProductVideo that takes a videoUrl prop.
• <video controls width="100%">: Renders a native HTML5 video player with built-in controls (play, pause, etc.), styled to occupy the full width of its container.
• <source src={videoUrl} type="video/mp4" />: Dynamically sets the video source to the videoUrl prop. Assumes the format is MP4.
• </video> and }: Closes the video element and the function body.

Choosing Between Them

CDN Optimization for Video Delivery

Shopify Plus relies on Shopify’s built-in CDN to deliver product videos and media assets. This setup provides global caching and standard delivery performance but offers minimal control over how video content is encoded, streamed, or rendered. Adaptive streaming formats (such as HLS or DASH) are not natively supported, and multi-resolution fallback must be handled through external services like Cloudinary, Vimeo, or Wistia. Developers working within Liquid themes rely on YouTube or MP4 embeds and can’t customize behavior at the network edge.

In contrast, Shopify Oxygen grants full control over video delivery through custom CDN configurations and edge runtime logic. Since storefronts are deployed to globally distributed environments, developers can serve pre-encoded assets in modern formats such as WebM or MP4 with dynamic fallback strategies. CDN-based enhancements (such as lazy loading based on viewport intersection or real-time A/B testing of media performance) can be implemented directly within Hydrogen components using React and edge functions.

Example: Multi-Format Video Fallback in Hydrogen

<video controls preload="none" width="100%">

<source src={webmUrl} type="video/webm" />

<source src={mp4Url} type="video/mp4" />

Your browser does not support HTML5 video.

</video>

Explanation:

• <video controls preload="none" width="100%">: Renders a native HTML5 video element with lazy loading enabled to defer resource fetch until user interaction or visibility.
• <source src={webmUrl} type="video/webm" />: Specifies the preferred video format (WebM), typically used in Chromium-based browsers.
• <source src={mp4Url} type="video/mp4" />: Acts as a fallback for browsers that do not support WebM.
• Your browser does not support HTML5 video.: Displays a message if the browser cannot render video.