Benefits of Headless Commerce with Shopify Oxygen

; } Explanation : The handle prop uniquely identifies the product to pass it as a GraphQL variable and fetch relevant data. PRODUCT_VIDEO_QUERY is expected to return the product metafield containing the video asset URL. The VideoPlayer component receives the video source from product.metafields.video.asset_url for dynamic binding to storefront content. GraphQL API Execution and Edge Caching All data-fetching logic in Oxygen leverages Shopify’s Storefront GraphQL API. The runtime batches nested queries (such as variants, pricing, and media references) into a single server-side operation to cache responses for rapid reuse. # GraphQL metafield query for product video asset query ProductVideo($handle: String!) { product(handle: $handle) { metafields(namespace: 'media', key: 'video_assets') { value references { ... on MediaImage { preview { image { url } } } } } } } Explanation : This GraphQL query fetches a product by its handle to target a metafield in the media namespace with the key video_assets . The value field holds raw metafield content to include metadata like asset IDs or labels. The references field accesses linked media objects, and in this case, filters for MediaImage types. Each reference can return a preview image URL via the nested preview.image.url for thumbnails or fallback visuals. Oxygen’s Video Delivery Stack for Modern Storefronts CDN-Accelerated Video Delivery and Lazy Playback Video assets are served through Shopify’s optimized CDN paths with support for byte-range requests, HTTP/3, and TLS 1.3.

Boost Campaign Performance Through Video