An online crafts supplier embraces composable commerce and saves development time with Vue Storefront
LoveCrafts is an online platform that caters to the crafting and creative community. Founded in 2012 in the UK, it has grown to become the number one destination for knitting, crochet, embroidery and other crafts supplies servicing a global community of crafters. Shipping worldwide and with dedicated websites for the UK, US, and Germany, Lovecrafts provides over 50,000 yarns and 100,000 patterns alongside guides and top picks to inspire and engage the crafting community.
LoveCrafts' tech stack included the Magento platform to handle commerce, Bespoke to serve the community and content delivery aspects, and - to encompass it all - the frontend that communicates with these two backends via API. Given this, it is safe to say that LoveCrafts was familiar with the headless approach in building eCommerce systems long before the term became a media sensation.
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.
When faced with the end of Magento 1 support, LoveCrafts had to choose a replacement for its commerce platform. Opting for Magento 2, as the natural successor to "number one," initially seemed like the logical choice. However, it soon became apparent that switching to Magento 2 didn't necessarily make things smoother than going with completely different vendors.
The company considered " headless architecture " an obvious development direction, especially since headless architecture had already been established for community and content. Expanding it to include commerce was a no-brainer.
LoveCrafts' backend had to address issues related to information retrieval and business logic storage. Conversely, the primary requirement for the frontend was that it should be as lightweight as possible to support the omnichannel strategy (the company already had an iOS app that communicates with the community and content APIs) and to enhance 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.
This conclusion opened up new opportunities and challenges for LoveCrafts. It became evident that finding a genuinely API-first platform was no easy task. Many providers had already recognized the "headless" trend in the market and prominently featured "API-first" on their banners. However, in most cases, their interpretation of being "headless" was somewhat stretched.
The LoveCrafts team reviewed a total of thirty-one providers, eventually narrowing it down to ten. Unfortunately, only a few of them had publicly available details about their product, necessitating direct contact with the vendors to discuss their requirements with solution architects. Nevertheless, the team also conducted their own due diligence by thoroughly examining the technical documentation. In the end, they shortlisted three providers that aligned with 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.
Head of Product, LoveCrafts
All three of the shortlisted vendors had different strengths and pricing structures; however, LoveCrafts ultimately chose commercetools as the winner. It stood out as the most mature and battle-tested solution, offering excellent documentation and a free, self-service 60-day trial. Nevertheless, what tipped the scales in its favor was its modular architecture. Commercetools APIs can be utilized as a complete package or selectively cherry-picked. Additionally, there are hooks within the APIs for partial API use. This modular flexibility offers two significant advantages.
Firstly, it empowers merchants like LoveCrafts to fulfill their requirements, no matter how complex or customized they may be. The LoveCrafts team can decide which APIs best suit their needs. More importantly, requirements can evolve over time. The modularity and extensibility of commercetools allow them to accommodate these changing requirements, even if they aren't currently supported by commercetools. This prevents vendor lock-in or the need for a painful replatforming. For instance, LoveCrafts seamlessly integrated an external Sales Tax provider into commercetools.
Secondly, it allowed the LoveCrafts team to conduct an incremental migration, screen by screen. They weren't compelled to execute the entire migration process all at once; instead, they could plan it over time. Being a customer-focused business, they approach user experience (UX) changes cautiously, incorporating user and A/B testing before deployment.
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.
Vue Storefront - a perfect “head” to the headless commercetools
LoveCrafts understood from the outset that selecting commercetools would also necessitate choosing the right frontend. That's precisely the essence of going headless. At the time, Vue Storefront , despite being in its early stages of development, emerged as the sole serious contender. There were virtually no other frontend solutions that could offer the level of flexibility that LoveCrafts was seeking.
Head of Engineering, 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 conclude with the selection of commercetools and Vue Storefront. In fact, this combination opened the door to both the integration marketplace of commercetools and Vue Storefront partnerships.
The LoveCrafts team was in search of a payment service provider with a managed integration to commercetools and, ideally, an integration with Vue Storefront. They placed a strong emphasis on ensuring an impeccable checkout process to offer the most intuitive user experience and reduce cart abandonment.
Ultimately, LoveCrafts opted for Checkout.com due to their innovative, seamless integration with commercetools, offering a comprehensive solution for card, wallet, and alternative payment methods. The Vue Storefront team swiftly implemented an integration with Checkout.com, highlighting 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.
Head of Enterprise Systems, LoveCrafts
Explore more Vue Storefront case studies
A leading in-flight marketplace for airlines launches 4 storefronts and achieves a 60% boost in homepage load speed with Vue Storefront
Building a highly-performant composable commerce store with Frontend as a Service