HSStudio Part 3/3: Customizing Shopify

In the final chapter of our three-part series about the custom surfboard configurator we made for Haydenshapes, we discuss how we made the React+Three.js-powered webapp run on Shopify. For more context, check out Part 1: Three.js for In-Browser 3D or Part 2: React for Speed on Mobile if you haven’t already crushed them.

Implementing Shopify

First of all, we’d like to praise the Shopify engineering team for building an excellent platform. We use it from time to time, and we’ve found it to be extremely powerful and fairly friendly. Still, making the Custom Surfboard Configurator work on Shopify was the biggest challenge, exposing some limitations we had to work around. Admittedly, we did inject some rather unusual techniques to accomplish our goals.

Shopify API

The first obstacle: allowing anonymous users to create products in Shopify. Normally, only administrators have this power, and it’s rather unusual for users to create a product without being logged in. Fortunately, the Shopify API has a product endpoint that we leveraged.

We needed to access user data (certain user types receive certain benefits), so the experience had to live on Shopify. However, the only way to access the API was to set up a server responsible for managing API calls. The data flow is rather atypical:

Product data flow in our Board Configurator.

Despite the complexity of the data flow, it actually works incredibly well. If the API hadn’t been so robust, we couldn’t accomplish the buy-flow functionality that’s essential to creating custom products.

Options and complexity

We ran into a roadblock with product variants. Shopify limits product variants to three — think of a t-shirt as having a size, color and maybe a logo. Because we have 20 variants, we had to get creative with how administrators manage content.

Instead of building the variant-management system into Shopify, we decided to use Craft, our CMS framework of choice. We created channels for each variant and used matrix fields to create relationships between options available for each board.

Filenames

Normally, a product configurator is a group of options that can be applied to the base product, like layers in a .psd file: Users select a logo and the corresponding image is applied. That’s fairly simple from a technical perspective.

However, a logo can shift a few inches based on an artwork choice, so the administrator needs a method to manage it in the admin. Then assume artwork and logo change its blend mode based on the technology, and board technology options change fin availability. You quickly realize that the admin is more like a spreadsheet of options, and the number of assets required is actually options^options, not options x options. You might have a moment of panic. When the client cares deeply about the integrity of their product, nearly imperceptible tweaks become incredibly important.

Our solution was to build a simplified expression naming system for the client to use. Instead of loading ‘haydenshapes-logo.png,’ the administrator assigns each asset a formula that returns the filename. For the logo, the filename would be haydenshapes-logo-<technology:futureflex>-<fins:fcs>.png. We used this value to dynamically generate the filename based on the selected technology and fin options without requiring the administrator to specify every filename for every possible combination. We also provided defaults in case the user didn’t choose a design or fin.

Themes

Shopify themes made everything possible and lead to the smoothest deployment we’ve ever seen. We created a development theme by duplicating the existing theme in the admin and used the shopify-node-api to deploy changes during development.

Once ready for deployment, we simply logged in to the admin and published our dev theme. Thousands of image assets instantly became available and the project worked flawlessly. The immediate functionality impressed us all, and kudos to the Shopify developers. Nice work!

Putting it all together

Shopify helped us accomplish our goal of allowing users to create and purchase custom surfboards from within their browser. We’re really pleased by its strong functionality, and it looks pretty sleek, too. To see it in action, head to HSStudio and build your perfect custom.

Thanks

This project would not have been successful without the hard work of many individuals. Our senior front-end engineer, Eric, did a great building the Bravenec© GUI, and Alex Roper nailed some iron-clad last-minute weekend coding. We’d like to thank our client, Hayden, for having the vision and trust while we sorted out how to accomplish his goals, as well as his team for building thousands of assets. It’s also important to recognize the efforts of the Three.js and Shopify communities. Without such excellent resources, we would have been adrift.

Credits

Technical Director: lucastswick
Creative Director: Chris Erickson
Designer: Willy Bravenec
Senior Front-End Engineer: Eric Van Holtz
Project Manager: Aaron Noah


Lucas is a Technical Director at Parliament where he helps brands like Haydenshapes do the impossible.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.