SourceBMX.
Delivering a custom product builder for desktop & mobile on Shopify Plus.
To give the brand’s diverse range of riders an optimal experience, SourceBMX wanted to enable customers to design their own custom BMX bike from the ground up on the SourceBMX website, whether the customers were on desktop or mobile.
The builder needed to work on all the brand’s international websites and perform seamlessly in terms of compatibility rules. Along with creating BMX bikes with the custom builder, Source BMX also wanted to utilise it for bespoke wheel builder functionality.
Create your custom bike (& wheels!)
As SourceBMX joined blubolt with our bluprint for Success programme, the blubolt team inherited the brand’s existing theme created by another agency. As a result, blubolt adapted the existing theme and injected an app layer to allow adding and developing REACT functionality for key areas.
Taking the project’s complexity and making it look simple, the blubolt team created a fully customisable custom BMX bike builder. Using React, GraphQL and TypeScript, working together with Shopify's storefront API to retrieve the relevant data, the builder is also connected with Shopify's filter amends to allow filtering parts by colour size or brand.
Choose your mode: full build or upgrade your existing bike.
On the user side, customers start by choosing the build mode, with the default being 'Complete build mode', where you start construction from scratch. If customers want to upgrade their current bike with some new parts, they can switch this mode off and colourise placeholder parts to resemble their own bike.
From there, customers choose all bike elements, from the frame, steering parts and seating to the drive train (whether you are a left-hand or right-hand driver), brakes and grinding. To ensure a seamless user experience when building a custom bike, the blubolt team enabled the customer to browse and read further details on each part by clicking on "MORE INFO", and then returning to the main page to continue building. In a move that elevates the experience further, the builder allows customers even to create custom wheel designs (or opt for something pre-built). The builder is also designed to work flawlessly on both desktop and mobile.
Third-party integrations to save & share designs.
To enhance the user experience further, blubolt completed further development to allow customers to share their builds to third-party systems (Facebook, X etc.) and save them in "Your Workshop" so the customer can return to their own design at a later date.
In addition, blubolt built an app to store the data from custom bike and wheel builds and to enable the functionality to flatten imagery into a format so that it can be shared on these third-party platforms.
Riding high with a bespoke builder.
Since launching the builders, the SourceBMX team has had fun showing the new functionality to customers on social media. For instance, the brand has created a load of bike templates to show the possibilities, showcased some bespoke customer designs here and road-tested the custom wheel builder.
“The Custom Bike builder developed alongside blubolt has been a game changer in how customers interact with our website and brand. Before the bike builder, it was an arduous task to create your dream bike from the ground up; individually checking stock levels and compatibility between 20+ components was time-consuming,” says Marc Moore, Owner at SourceBMX. “Now the bike builder makes the whole process quick, fun and engaging, so much so that it has become the most popular section on our website.”
Are you considering a custom product builder for your brand? Find more inspiration from our other custom builder projects - like a bespoke furniture builder and a custom scooter builder - here. Alternatively, get in touch to discuss your project requirements. We're happy to help!
