Inside Shopify Hack Days: Building a prototype for music-playing pages

Summary

During Shopify Hack Days 39, a 13-person team addressed why artists selling music on Shopify product pages lacked a built-in way to hear digital albums before buying. The team pursued two paths in parallel: a first-class Audio media type across Core, Admin API, admin-web, and storefront, and a standalone Shop Sounds app for release management. The app orchestrated product and variant creation, audio and artwork metafields, storefront access, and Online Store publication, while a theme extension provided track-level purchasing and a shared audio instance that continued across navigation. It also included six GLSL fragment shaders driven by bass, mid-range, treble, and overall energy, plus synced lyrics and a geolocated tour dates block. After three days, the team had a working prototype, but Shop Sounds was not a live product; the project demonstrated that native audio support and Shopify metaobjects and metafields could support a music toolkit without custom infrastructure.

Context

Shopify product pages for digital albums generally showed an image and buy button but offered no built-in way to hear the music. The team identified this as an opportunity because products categorized as Music & Sound Recordings generated more than $1B in GMV over the preceding year.

Approach / What changed

The team built both a platform-level Audio media type and the Shop Sounds app. The app used Shopify products, variants, metaobjects, and metafields to manage releases, publish tracks, render a persistent audio player, drive six GLSL visualizers with audio data, generate synced lyrics, and display geolocated tour dates.

Takeaways

• A native Audio media type was implemented across Core, the Admin API, admin-web, and storefront, including upload handling, background processing, GraphQL, Liquid drops, and a waveform visualizer component.
• Shop Sounds used Shopify metaobjects and metafields as its data layer, avoiding a separate custom database while keeping release, track, tour-date, and artist data accessible to themes and other Shopify platform features.
• A global audio singleton let the docked mini-player continue playing when customers navigated between pages; the storefront tracklist player also supported individual track buy buttons and an optional WebGL visualizer.

Related reading