TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

Audio and Visual Experiences for Music Merchants

1 post · Dec 2025 – Jul 2026

What this trail covers

Shopify has developed and enhanced audio and visual capabilities for music merchants, including platform-level support for audio media types, a standalone app for release management, a tracklist player with a global audio singleton for continuous playback, custom GLSL shaders for real-time audio visualization, and a tour dates block with geolocation. The system leverages metaobjects and metafields as the data layer for releases, tracks, and tour information. This hackathon project demonstrates the technical depth in creating engaging visual experiences for merchants, including real-time data visualization and interactive elements.

All Shopify trails
  1. Inside Shopify Hack Days: Building a prototype for music-playing pages (2026) - ShopifyThis post details a hackathon project that rapidly prototyped several audio and visual features for music merchants. Key technical contributions include the addition of a first-class `Audio` media type across Shopify's platform (Core, Admin API, admin-web, storefront), a global audio singleton for continuous playback across page navigations, and the development of six custom GLSL fragment shaders for real-time audio visualization driven by bass, mid-range, treble, and overall energy. A standalone Shopify app was built for release management, and a tour dates block with geolocation was developed using metaobjects and metafields as the data layer.
  2. Behind the build: 2025's BFCM globe in a pinball machine 🌎🕹️ - ShopifyThis post details the technical implementation of a real-time, interactive 3D pinball machine visualization for Shopify's BFCM Live Globe. It highlights the use of three.js with react-three-fiber, server-sent events for real-time data streaming, custom GLSL shaders for sprite sheet playback on a dot matrix display, and a 2D physics engine (rapier2D) for performance optimization. The post also touches on AR integration using react-three/xr and the design considerations for modularity and interactive elements within the virtual environment.