About LoveCrafts

LoveCrafts founders realized that from the very beginning, and so LoveCrafts’ tech stack included the Magento platform to serve the commerce, the Bespoke to serve the community and content delivery aspects, and - to cover it all - the frontend which communicates with these two backends via API. Given that, it is safe to say, that LoveCrafts was familiar with the headless approach in building eCommerce systems long before the term kicked off a media frenzy.

It was not one piece in the architecture that decided what the rest should look like. We established the general assumption that we want to remain with separated concerns, and - based on that - we started looking for a platform able to provide us with what we needed.

Halil Köklü

CTO at LoveCrafts

Challenge

LoveCrafts, facing the end of Magento 1 support, had to choose the replacement for its commerce platform. Going with Magento 2 - as it was the natural successor of “number one” - seemed to be a natural option. However, soon it occurred that switching to it doesn’t necessarily make things smoother than going with completely different vendors. 

The company considered “headless architecture” an obvious development direction, especially that headless architecture was already built for community and content. Expanding it to commerce was a no-brainer.  

LoveCrafts’ backend had to cover the issues with finding the information and storing the business logic; the primary requirement for the frontend, on the other hand, was that it should be as lightweight as possible for the sake of empowering omnichannel strategy (the company already has an iOS app that communicates to the community and content APIs), and increasing performance. 

Nevertheless, it was the APIs that were crucial to assemble every part of the system and make them cooperate smoothly, which - given the level of business logic complication - was quite a challenge. 

On the content side of things, we have both editorial content that comes from a headless CMS and instructions which are known as patterns in crafting. Whilst patterns supplied by brands are managed by us, the majority of patterns come from independent designers who upload their patterns on our Designers platform.

Halil Köklü

CTO at LoveCrafts

This conclusion opened up new opportunities but also challenges for LoveCrafts. It turned out that finding a truly API-first platform is not an easy task. Most of the providers already sensed the “headless” trend on the market and put “API-first” on their banners, but in most cases, their interpretation of being “headless” was far-fetched. 

The LoveCrafts team reviewed thirty-one providers of which they shortlisted ten. Only a few had public details about their product so they had to reach out to the vendors and discuss their requirements with solution architects. Nevertheless, the team also performed their own due diligence by going through the technical documentation thoroughly. In the end, they shortlisted three providers that met their requirements. 

The most crucial prerequisite for a successful vendor selection is your list of requirements. You would probably not undertake another migration soon, so you are not just compiling a list of requirements for your current but also future business needs. This is very tricky to do especially for a startup like us. Thus you are looking for flexibility which is rare in SaaS products.

Natalia Nazarova

Head of Product at LoveCrafts

Solution

All three of the shortlisted vendors had different strengths and pricing structures, however, LoveCrafts found commercetools a winner. It was the most mature and battle-tested solution with excellent documentation and a free, self-service, 60-days trial. Still, the factor that outweighed the scales in its favor was its modular architecture. Commercetools APIs can be used as a whole or cherry-picked. There are also hooks within APIs if one wishes to use an API partially. This has two important advantages.

First, it enables merchants like LoveCrafts to realize any requirements how complicated or bespoke they might be. The LoveCrafts team can decide which APIs they would like to use. More importantly, requirements can change. The modularity and extensibility of commercetools allow them to realize those requirements even if they may not be implemented by commercetools yet. This prevents vendor lock-in or a painful replatforming. For example, LoveCrafts uses an external Sales Tax provider which can be integrated into commercetools very easily.

Second, it helped the LoveCrafts team to do an incremental, screen-by-screen migration. They weren’t forced to run the entire migration process right away, instead, they can plan it in time. As a customer-focused business, they deploy user experience (UX) changes cautiously after user and A/B testing.

Modularity and extensibility were paramount for us. Not only did we have peace of mind that we can realize future requirements it also enabled us to launch changes to our users incrementally, running commercetools in parallel. Although this cautious and risk-averse approach may take a little longer, it results in a smoother roll-out with happy users whilst also minimizing the shock to internal operations – often compared to an open-heart surgery by our senior leadership.

Halil Köklü

CTO at LoveCrafts

Vue Storefront - a perfect “head” to headless commercetools

LoveCrafts realized from the very beginning that choosing commercetools would require choosing the right frontend. That was the point of being headless, though. Vue Storefront at the time - even though it was at a very young stage of development - was the only serious contender. There was literally no other frontend solution that provided the flexibility that LoveCrafts was looking for. 

Beside Magento we have a Symfony-based frontend which we use for our community. We decided to not expand that to commerce but go with a new frontend using modern JavaScript. The alternatives were to either self-build or build upon a frontend accelerator. The main requirement was support for component-based design systems and server-side rendering (SSR). We approached the Vue Storefront team due to their backend-agnostic frontend experience. They demonstrated their new frontend with composable architecture and SSR thanks to Nuxt as well as the use of the design system Storefront UI. This immediately appealed to us and things kicked off rapidly from there.

Sam Riley

Head of Engineering at LoveCrafts

The composable architecture of Vue Storefront allows merchants like LoveCrafts to mix and match backend systems of their choice like content management systems as well as bespoke backends. The LoveCrafts team plans to extend their Vue Storefront build to other journeys such as their community experience. All this can be achieved whilst retaining upgradability to new Vue Storefront releases.

The sophisticated business logic, multi-layered tech stack, and complicated user journey required unique frontend features to meet all the expectations. Vue Storefront - thanks to modular, composable architecture - provided the capabilities to do it. Still, the frontend was not the only element that must be chosen.

Third-party integrations wanted 

LoveCrafts’ search didn’t end with commercetools and Vue Storefront. The fact is, this combination opens up the door for both the integration marketplace of commercetools as well as the Vue Storefront partnerships. ‍

The LoveCrafts team was looking for a payment service provider with a managed integration to commercetools and, ideally, a Vue Storefront integration. The checkout must be impeccable to provide the most intuitive user experience and deter users from abandoning their carts. ‍

LoveCrafts have decided for Checkout.com as they offered the most innovative, light-touch integration to commercetools providing a one-stop solution for card, wallet, and alternative payment methods. The Vue Storefront team has rapidly implemented an integration to Checkout.com showcasing the agility of the Vue Storefront ecosystem.

The frontend integration was very lightweight especially since Vue Storefront has an open-source integration for it. We were able to reuse our saved card tokens. Once an authorization is made in the frontend, Checkout.com automatically updates payment information in commercetools. This allows downstream systems like our ERP system to be notified about payments. Similarly, when the ERP system is triggering a refund in the Checkout.com API, commercetools gets updated right away. This has saved us dozens of hours in development and maintenance time. 

Remco Rausch

Head of Enterprise Systems at LoveCrafts