A Three-Day Push to Give Music Merchants a Real Player
Shopify’s Hack Days happen about twice a year, giving employees a couple of days to step away from roadmaps and build something that simply interests them. For Hack Days 39, a team of 13 took aim at a persistent gap in the platform: musicians sell physical merch on Shopify, but the digital music experience is flat. A product page for an album is typically just an image and a buy button with no way to hear the tracks before purchasing.
That gap has real commercial weight. Products in the Music & Sound Recordings category generated over $1B in GMV in the past year. The merchants and demand are there; the presentation layer isn't. Over three days, the team built a full prototype addressing that: platform-supported audio files, a release management app, a tracklist player with per-track buying, six GLSL visualizers reacting to live audio, synced lyrics, and a geolocated tour dates block.
Following the 3D Model Playbook
The team’s starting insight was that Shopify already supports rich media for other product types. Merchants can upload 3D model files as product media, and the Liquid template filter renders an interactive model-viewer component in the theme. Furniture and sneaker sellers get that out of the box. Audio, the team reasoned, should work the same way.
Jamie Guerrero tested that idea by treating audio as a first-class platform feature. Across five pull requests in Core, the Admin API, admin-web, and storefront, she added an audios database table, a Merchandising::Audio model with upload and background processing, an Audio GraphQL type, admin support for dragging audio onto a product page, Liquid drops (AudioDrop, AudioSourceDrop), and a custom audio-visualizer web component. The result is that {{ product.media | media_tag }} now renders an audio player in a theme just as naturally as it renders a 3D model viewer.
While Jamie worked on platform-native support, the rest of the team pursued a standalone Shopify app as a parallel path. The app offered more creative control and a richer demo for the three-day timeframe, but the platform work proved the gap between hackathon prototype and production feature is smaller than expected.
Day One: Many Prototypes
Thirteen people across three days tends to produce at least thirteen prototypes. Before deciding on a final player design, the team spent day one exploring what was possible, and the range was broad:
- Brianna Nguyen made a spinning vinyl record player with the album sleeve beside it; users click tracks on the back cover to switch songs. Vinyl is the most popular music format sold on Shopify, she noted.
- Celso White started with a line-type visualizer mixing typography and music, then moved to a dashboard concept focused on making the whole page feel energetic.
- DeShaun Thomas built an audio visualizer with Three.js, while Shahriar Rahman created a CD player with a waveform display.
- Phil Fishbein iterated on a shader-based visualization, adding a control panel for cycling through effects, and connected it to an algorithm matching track waveforms to a compatible visualizer.
Each prototype escalated the ambition. By end of day one, the team had a clear picture of the product and a substantial backlog of ideas.
Shop Sounds: The App
The resulting prototype, Shop Sounds, is a Shopify app built with React Router, Polaris, and the Shopify App framework. Artists install it and manage albums, singles, and EPs from the Admin. They drag audio files into the interface, set album art, configure genre, and publish.
Publishing is a sequence of about seven coordinated GraphQL mutations: creating or updating a digital download product, syncing variants for each track plus a full-album option, setting pricing, attaching audio files and album art as metafields, verifying storefront access on metafield definitions, linking the product to the release metaobject, and publishing to the Online Store.
Continuous Playback Across Pages
The storefront player is a theme app extension block. It reads the product’s release metaobject and renders a full interface: track numbers, durations, individual buy buttons, a now-playing bar with progress, and an optional WebGL visualizer.
The central design choice is a global audio singleton. Music shouldn’t stop when a customer navigates from one page to another. An app embed block injects a single audio element plus a docked mini-player into the page body. Every tracklist player across the storefront reads from and writes to that same shared instance. Starting a track on a product page and clicking to another page leaves the music playing in the mini-player.
The Visualizer
The visualizer is the centerpiece. Six custom GLSL fragment shaders each create a distinct visual driven by the same four audio metrics: bass, mid-range, treble, and overall energy.
- Fluid: Layered fractional Brownian motion with double domain warping produces morphing color fields; bass increases warp, treble adds fractal detail.
- Geometric: Concentric polygon rings pulse to the beat; the shape morphs between triangle and dodecagon based on treble.
- Particles: A four-layer starfield with parallax depth creates a drifting-through-space effect at different scales and speeds.
- Waveform: Seven mirrored horizontal lines oscillate at different frequencies, with bass driving slow undulations and treble adding fine ripples.
- Tunnel: An infinite rushing vortex with FBM-textured walls; bass controls the forward speed.
- Voronoi: Animated cells with glowing edges get unique palette colors as they shift and reform.
All six shaders share a uniform interface — uBass, uMid, uTreble, uEnergy, palette vectors, and two tunable parameters — so swapping is instant. The visualizer runs on Three.js with an Unreal Bloom pass whose intensity follows the music’s energy.
Each shader supports seven color schemes — Rainbow, Ocean, Sunset, Fire, Neon, Aurora, and Monochrome — built with cosine palettes. Four vec3 parameters (a, b, c, d) define each palette, and a single function generates an infinite range of harmonious colors. The midShift parameter, driven by mid-range frequencies multiplied by time, makes the palette slowly evolve during playback.
With six shaders and seven palettes, artists get 42 distinct visual identities before touching the adjustable parameters.
Tour Dates with Geofencing
Happy Tsugawa-Banta also built a Tour Dates theme block in the same timeframe. It uses Shopify metaobjects so artists manage venues, cities, dates, ticket URLs, and setlists from the Admin. The block renders upcoming and past shows in tabs on the storefront.
The distinctive addition is geolocation. The block requests visitor location and uses the Haversine formula to calculate distance to each venue, producing a "Concerts Near You" section with badges such as "23 miles away." Happy also wrote geocoding tools — both an in-app interface and a CLI script — that populate coordinates via the OpenStreetMap Nominatim API, plus CSV import scripts for bulk loading dates.
Metaobjects as the Architecture
Instead of standing up a separate database, the team used Shopify’s metaobjects and metafields for all persistent data. A release is a metaobject whose tracklist is a JSON metafield. Each track’s audio file, visualizer shader, color scheme, duration, and lyrics are metafields on the variant. Tour dates and the artist are metaobjects.
This choice has compounding benefits. Metafields with storefront: PUBLIC_READ access are automatically available to theme extensions via Liquid. Merchants manage everything directly in the Admin. Data integrates with the platform’s existing systems: collections, search, webhooks, and the Storefront API. The app maintains no custom infrastructure and avoids sync problems between a separate database and Shopify’s data.
Deferred Ideas
Three days is not enough to ship everything. The ideas doc held several promising concepts that didn’t make the cut: hooking 3D models to a rigging system so they dance to the music ("wigglebones"), lyrics set in animated typographic layouts, Bandcamp-style pay-what-you-want pricing for downloads, and an order status page extension putting purchased downloads immediately on the thank-you page.
What three days of building revealed
Shop Sounds isn’t a shippable product, but the prototype work clarified what the platform can and can’t do today. The team came away with three concrete findings:
- Jamie’s five-PR stack demonstrated that native audio media is workable across the entire Shopify architecture, from the database layer through to the storefront.
- Metaobjects and metafields turned out to be a sufficient data foundation for a music toolkit — no custom backend infrastructure was required.
- Each prototype stretched the boundaries of the product page, surfacing ideas that routine feature work wouldn’t have generated.
That’s the real payoff of Hack Days. Not every experiment ships, but each one teaches the company something about platform capabilities, merchant needs, and what happens when people who don’t normally collaborate are pointed at a problem and told to go build.
