Improve developer velocity with headless commerce

ILIA Beauty, a leading clean beauty brand with a loyal following, is known for giving customers engaging and personalized online shopping experiences. Going headless helped them differentiate their brand further by increasing the capacity for creating the features that set their brand apart.

After launching a Nacelle-powered headless PWA, ILIA saw boosts to traditional eCommerce benchmarks to the tune of a 48% decrease in mobile load times and a 46% decrease in desktop load times. But improved developer workflow and velocity were even more impactful with a 20% increase in developer deployments.

Frontend Engineer Mackenzie Patterson is heavily involved in building ILIA’s unique shopper experiences and most recently their standout “Find My Shade” tool, which allows shoppers to match makeup to their skin tone online. Prior to going headless, she engaged in workarounds to force the necessary level of customization on Shopify Plus. After the transition to headless, she was empowered to build exactly what ILIA needed using modern technology without the workarounds, which improved developer velocity and decreased the likelihood of bugs or errors.

The team stayed on Shopify Plus and incorporated Contentful, a headless CMS that enables non-technical teams to edit and maintain Find My Shade along with the rest of the website.

Find My Shade is just one example of engineering ingenuity at ILIA. For our latest Q&A, we caught up with Patterson to talk about ILIA’s success with headless commerce from the developer perspective.

Can you describe some of the challenges you had with developer workflows and velocity prior to ILIA beauty going headless?

Mackenzie Patterson: The developer workflows I’ve used in the past for native Shopify Plus projects have been a little strange because until recently, Shopify didn’t integrate with Github. This meant that deploying code was a very manual process, with the potential to overwrite changes made by other team members. Prior to implementing Nacelle’s headless solution, this was our workflow:

1. Duplicate the production theme in Shopify Plus

2. Development work would happen on that duplicate theme

3. Review with stakeholders on that duplicate theme

4. After the review was complete, merge the feature into our main branch in Github, duplicate the production theme again, and deploy the main branch to that fresh “staging” theme. This step was necessary in order to sync up with the most recent Shopify Plus content.

This workflow resulted in several potential issues related to keeping code and content in sync. For example, if someone made content changes to the production theme during the “staging” process, we would need to start over with a freshly duplicated theme again.

Also, if a content author duplicated the production theme in order to queue up content changes in advance for an upcoming campaign (such as Black Friday/Cyber Monday) and code changes were released after they made their duplicate theme, publishing that staged content theme would result in recent code changes being wiped from production.

As a developer, what kinds of characteristics were you looking for in a headless commerce platform?

MP: This was my first large headless project, but I wanted to utilize a platform that would abstract some of the details involved in headless Shopify Plus architecture.

Because Nacelle handles indexing the product and content data, I was free to focus my attention on the frontend build, rather than messing around with webhooks and serverless sync functions.

It was also important to me to have access to resources with enterprise headless experience in order to be confident that I understood the patterns and that I was following best practices in my own code. I learned a lot from Nacelle’s engineering team!

Was there anything about the implementation process that other developers considering headless should know?

MP: Integrating third-party Shopify Plus apps will be rough. Very few Shopify apps make API-based implementations a priority—if they offer them at all—and the apps that do provide a headless-friendly option often don’t offer full feature parity with their Liquid-based implementations. Getting help can also be tricky because most support teams assume you’re using Shopify themes.

Now that your headless store is deployed, can you describe how it’s impacted your day-to-day work, especially workflows and velocity?

MP: Spinning up my local environment is much faster and being able to use hot-module-reloading is awesome. Also, the ability to fully leverage a MVC framework like Vue is amazing. Without it, using Vue or React in native Shopify Plus builds is possible, but features like static site generation (SSG) and server-side rendering (SSR) are not available. Git deployments with Vercel are super convenient too.

From the technical point of view, why do you think it’s important for brands to adopt a modern tech stack?

MP: Using a modern tech stack makes life a lot easier for developers and affords more opportunities for learning new techniques and patterns. Things like code organization, optimization, and unit testing are easier to manage in a modern stack. Developer velocity naturally improves given access to better tooling and workflows.

With this increased velocity, what projects/initiatives are you now able to work on more efficiently?

MP: Being able to supplement Shopify Plus with an external CMS has definitely made it easier to build content-heavy features like the ILIA Shade Finder. I actually did build a version of it in Liquid before we went headless, but getting all the required settings into a Shopify theme section was not ideal. Our new Contentful-based Shade Finder content model is much more intuitive for content authors to maintain.

CTA: Read the ILIA Beauty Case Study