A Shopify Theme Store theme whose architectural foundation was later reused in Boutique, Ultra, and Allure.
I built the core mechanisms and product page from scratch: the component structure, helpers and mixins, EventBus, a Swiper wrapper, video handling, and shared controls for dialogs and drawers. I estimate that I wrote around 80% of the core and 40% of Gain's components. The team and I continued implementing the theme from the supplied designs.
Build a theme for the Shopify Theme Store and give the team a consistent foundation for developing sections.
Different blocks needed similar behaviour: product variant selection, sliders, video, dialogs, and drawers. The shared logic needed to be reusable while individual components remained independent.
I organised components as factory functions. Each instance kept its own state and exposed a small control interface.
Sections were composed from individual components, each responsible for its own behaviour. This made the logic reusable and gave the team a clear structure for building new blocks.
Gain was released in the Shopify Theme Store. Its structure and core mechanisms became the foundation for Boutique, Ultra, and Allure: their styling and sections changed for new designs, while the architecture was retained.
I estimate that hundreds, possibly thousands, of stores now run on themes in this family.
The main result of my contribution was a reusable frontend core that gave the team a consistent way to build sections and develop a family of themes.
I organised components as factory functions. Each instance kept its own state and exposed a small control interface.
Sections were composed from individual components, each responsible for its own behaviour. This made the logic reusable and gave the team a clear structure for building new blocks.
I created an EventBus so components could react to changes without depending directly on one another.
For example, the product form announced a variant selection, and subscribers updated the price, SKU, availability, and related interface elements. Form and section IDs kept events from different instances separate.
Components could communicate regardless of their position on the page: a change in one area could update the interface elsewhere.
I built a Swiper wrapper with common settings, controls, and events. I also added accessibility handling, removing hidden slides from keyboard navigation.
For HTML video, YouTube, and Vimeo, I created a common interface. Sections could control video in the same way, while the shared implementation handled differences between players.
I brought opening, closing, backdrops, scroll locking, and focus management into the shared Toggle and overlay system.
Opening a dialog moved focus inside and kept it within the dialog. Closing it returned focus to the previous element. The team could use this behaviour across sections without rebuilding it.
During a performance audit, I found components sometimes calling dependencies before those dependencies had loaded. Differences in loading order could delay section initialisation.
I reworked the process so components continued initialisation when their dependencies became available. I first implemented this within components; the team lead later extracted it into a shared utility.
Gain was released in the Shopify Theme Store. Its structure and core mechanisms became the foundation for Boutique, Ultra, and Allure: their styling and sections changed for new designs, while the architecture was retained. I estimate that hundreds, possibly thousands, of stores now run on themes in this family. The main result of my contribution was a reusable frontend core that gave the team a consistent way to build sections and develop a family of themes.
I built much of the frontend core and the product page: the component structure, EventBus, and shared behaviour for sliders, video, dialogs, and drawers with focus management.
Have a project, a technical challenge, or a collaboration in mind? Send me a message.
