Shopify runs Hack Days roughly twice a year. It’s two, sometimes three days where every employee pauses their regular work, picks a problem that fascinates them, and builds something with Shopifolk they don’t normally work with. We’re pretty sure it’s the world's largest hackathon with multiple thousand participants, and it's been part of the company culture since the earliest days.
Some Hack Days projects ship, some don't, but the point isn't the output, it's the culture of experimentation that it sustains. Picking up unfamiliar tools, exploring novel ideas, and seeing what happens when you give folks room to follow their curiosity. Here’s one project built during a recent hackathon.
For Hack Days 39, our team of 13 set out to explore a particular problem. Musicians love Shopify for merch. T-shirts, vinyl, posters, the physical stuff works great. But when it comes to selling the actual music, artists default to other platforms. Why? Because a Shopify product page for a digital album is generally an image and a buy button. There's no built-in way to hear the music.
This isn't a small problem. Products categorized as Music & Sound Recordings generated more than $1B in GMV over the last year. The merchants are there, and the opportunity is there too. This felt like the perfect project for Hack Days.
Our mission was simple: let's build a sick audio player and visualizer for product pages and give artists better tools to showcase their art.
Three days later, we had a prototype for Shopify platform-supported audio files, a full Shopify app with release management, a tracklist player with per-track buy buttons, six custom GLSL shaders driven by real-time audio, synced lyrics generation, and a tour dates block with geolocation. This is how we built it.
The 3D model parallel
Here's something interesting about the Shopify platform: you can already upload 3D model files as product media. The Admin supports it. There's even a Liquid template filter that renders an interactive model-viewer component right in your theme. Merchants selling furniture or sneakers get this nice, interactive 3D experience out of the box.
So our team thought: why don't we have something similar for audio files?
Our teammate Jamie Guerrero explored this question directly, not by hacking audio into GenericFile, but by building a genuine first-class Audio media type across the entire platform. Within five PRs spanning Core, the Admin API, admin-web, and storefront, she added a new audios database table, a Merchandising::Audio model with upload handling and background processing, an Audio GraphQL type, admin-web support so merchants can drag audio files onto the product detail page, Liquid drops (AudioDrop, AudioSourceDrop) so themes can access audio sources, and a custom audio-visualizer web component with waveform visualization.
The result: {{ product.media | media_tag }} renders an audio player in a theme the same way it renders a model-viewer for 3D models today.
Meanwhile, the rest of the team pursued a parallel path: a standalone Shopify app that would give artists a complete toolkit for managing releases, from uploading tracks to configuring the player on their storefront.
We had two decision paths, and we ran both in parallel for the first day. The app path gave us more creative control and a richer demo, but Jamie's platform path proved that native audio support works, and that the gap between "hack days prototype" and "real platform feature" is smaller than you'd think.
The prototype explosion
Thirteen people. Three days. What do you get? At least thirteen prototypes.
Before we could decide what the player should look like, we needed to see what was possible. So on day one, everyone just built. The creative range was staggering:
Brianna Nguyen built a vinyl record player: a spinning record with the album sleeve beside it, where you could click tracks on the back cover to switch songs. "Vinyl records are the most popular format of music sold on Shopify as per our data," she wrote. "This could be a cool way to allow the user to listen."
Maxence Parenteau shipped a series of theme block players with different visual styles, making a prototype site for each so the team could test them. "I'm having so much fun with this," he wrote in Slack halfway through day one.
Celso White built a line-type visualizer exploring the intersection of typography and music, then pivoted to a dashboard concept designed to make the whole page bump.
DeShaun Thomas built an audio visualizer with Three.js. Andy Chan and Austin Cain contributed prototypes. Shahriar Rahman built a CD player with a waveform display.
Meanwhile, Phil Fishbein had been iterating on something that would become the backbone of our final product. Starting from an early shader-based prototype, he layered on a control panel for cycling through visualizations, and then connected it to our algorithm that analyzed track waveforms to pair the track to a matching visualizer.
The prototyping prompts tell the story of the creative escalation. For my first prototype, I experimented with just trying to create a really sick music player/visualizer, similar to Winamp. From there I was able to move onto using 3D and shaders to create real unexpected artifacts and generative art that followed the music.
Each prototype pushed the ambition further. By the end of day one, we had a clear picture of what the final product should be, and a pile of ideas for what to put inside it.
What we built
The app
Shop Sounds is a prototype Shopify app built with React Router, Polaris, and the Shopify App framework. Here’s how it would work: Artists install it and manage their releases (albums, singles, EPs) from within the Shopify Admin. They upload tracks by dragging audio files into the interface, set album art, configure genres, and hit publish.
Behind the scenes, publishing a release is a multi-step orchestration: the app creates a digital download product (or updates an existing one), syncs variants for each track and a "Full Album" option, sets pricing, attaches audio files and album art as metafields, ensures all metafield definitions have storefront access, links the product back to the release metaobject, and publishes everything to the Online Store. It's about seven GraphQL mutations coordinated in sequence.
The tracklist player
On the storefront side, the tracklist player is a theme app extension block. It reads the product's release metaobject and renders a full audio player: track listings with numbers, durations, individual buy buttons, a now-playing bar with progress, and (when enabled) a WebGL visualizer.
The critical architectural decision here was the global audio singleton. When a customer is browsing a storefront and playing music, they don't want the audio to stop when they navigate to a new page. We solved this with an app embed block that injects a single audio element into the page body, along with a docked mini-player. Every tracklist player on every page reads from, and writes to, this shared audio instance. Play a track on a product page, navigate to another page, and the mini-player keeps going.
The visualizer
This is the star.
We built six custom GLSL fragment shaders, each creating a completely different visual world driven by the same audio data: bass, mid-range, treble, and overall energy.
- Fluid: Layered fractional Brownian motion with double domain warping. Organic, slowly morphing color fields that flow like paint in water. Bass increases warp intensity; treble adds fractal detail.
- Geometric: Concentric rings of polygons radiating from center, each pulsing to the beat. The polygon shape morphs between triangle and dodecagon based on treble.
- Particles: A multi-layer starfield with parallax depth. Four layers of twinkling points at different scales and speeds, creating a sense of drifting through space.
- Waveform: Seven horizontal lines mirrored vertically, oscillating at different frequencies. Bass drives slow undulations; treble adds fine-detail ripples.
- Tunnel: An infinite forward-rushing vortex with FBM-textured walls. Bass controls forward speed. It feels intense and driving.
- Voronoi: Animated Voronoi cell diagrams with glowing edges. Organic cells that shift and reform over time, each getting a unique palette color.
All six shaders share the same uniform interface: uBass, uMid, uTreble, uEnergy, plus palette vectors and two tunable parameters, so swapping between them is instant. The visualizer runs on Three.js with an Unreal Bloom post-processing pass, where bloom intensity is driven by the music's energy.
Each shader also supports seven color schemes: Rainbow, Ocean, Sunset, Fire, Neon, Aurora, and Monochrome implemented using 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 is driven by the audio's mid-range frequencies multiplied by time, so the palette itself slowly evolves as the music plays.
Six shaders times seven palettes gives artists 42 distinct visual identities to match their brand, before they even touch the tunable parameters.
Tour dates
Happy Tsugawa-Banta built a Tour Dates theme block powered by Shopify metaobjects. Artists manage their tour dates from the Admin (venue, city, date, ticket URL, setlist link) and the block renders them on the storefront with tabs for upcoming and past shows.
The standout feature is geolocation. The block requests the visitor's browser location and uses the Haversine formula to calculate distance to each venue, surfacing a "Concerts Near You" section with distance badges (e.g., "23 miles away"). Fans immediately see what's relevant to them.
Happy also built geocoding tools (both an in-app interface and a command-line script) to automatically populate latitude/longitude coordinates for every tour date using the OpenStreetMap Nominatim API, plus import scripts for bulk-loading dates from CSV.
Under the hood: metaobjects as the data layer
One architectural decision shaped everything else: we used Shopify's own metaobjects and metafields as our data layer instead of building a custom database.
A release is a metaobject. Its tracklist is a JSON metafield on that metaobject. Each track's audio file, visualizer shader, color scheme, duration, and lyrics are metafields on the product variant. Tour dates are metaobjects. The artist is a metaobject. Everything is a Shopify primitive.
This buys us a lot. Metafields with storefront: PUBLIC_READ access are automatically available to theme extensions via Liquid, no custom API needed. Metaobjects are manageable from the Admin. The data lives where Shopify merchants expect it to live, and it works with the rest of the platform: collections, search, webhooks, and the Storefront API.
The publish flow demonstrates why this matters. When an artist hits "Publish," the app doesn't just flip a boolean. It ensures metafield definitions exist with storefront access, creates product variants for each track and a full-album option, sets per-variant metafields (like track number, duration, audio file, preview file, visualizer config, or lyrics), links products back to the release metaobject, attaches album art, and publishes to the Online Store. Every piece of data lands in the right Shopify primitive, accessible to the theme without any custom backend.
This is the kind of architecture that could scale well beyond a Hack Days project. No custom infrastructure to maintain, no sync problems between a separate database and Shopify's data, just the platform.
What we didn’t build (but could)
Three days isn't enough to build everything. Our ideas doc was full of concepts we explored but didn't have time to finish:
- Wigglebones: hooking 3D models to a rigging system where they dance to the music
- Typography lyrics: song lyrics playing in beautiful typographic patterns, à la Space Type Generator
- Pay-what-you-want: Bandcamp-style flexible pricing for digital downloads
- Order status page extension: instant access to purchased downloads right on the thank-you page
Why we hack
Shop Sounds isn’t a live product today, but here’s what our three days of building taught us about what’s possible:
- Jamie's five-PR stack proved that native audio media is architecturally feasible across Shopify's platform, from database to storefront
- The team discovered that metaobjects and metafields could serve as a complete data layer for a music toolkit without any custom infrastructure
- Every prototype pushed the boundaries of what a Shopify product page can do, generating ideas the team wouldn't necessarily have found in their day-to-day work
That's the return on Hack Days. Not every project ships, but every project teaches the company something it didn't know about the platform's capabilities, our merchant needs, and what becomes possible when you bring together smart, curious people who don’t usually work together and tell them to go build.