Headless eCommerce: reduce costs, increase scalability.

A new e-commerce experience realized by Story of AMS helped parfum.nl reduce costs and at the same time increase scalability. Parfum.nl is one of the biggest perfume retailers in the Netherlands. They asked Story of AMS to design and build a new e-commerce experience that is ready for the next generation of perfume shoppers.

Build to scale

By default, Shopify handles both the frontend and backend of the site. A great solution for merchants who require only basic functionalities. Headless commerce separates the frontend of the store from the backend functionality (inventory allocation, content management, fulfillment capabilities). This way you can use the Shopify API for all webshop related functions and combine this with a separate content management system to better serve the needs of the business.

To build an extremely scalable and flexible e-commerce experience we opted for a React Storefront using the Shopify e-commerce API coupled with a headless content management system, all deployed with a Serverless architecture.

Benefits of headless e-commerce

There are many benefits to headless e-commerce, but it all comes down to increased flexibility and development speed. Regarding user interaction, you can experiment without the risk of jeopardizing the whole ecosystem because the frontend and backend are decoupled. Resulting in less development costs if you want to create multiple landing pages, do A/B tests, or add new functionalities.

Having the freedom to experiment, means you can implement new user interfaces and functionalities more quickly and reduce the time to market speed. In contrast, with traditional commerce solutions, you often have to modify frontend and backend code simultaneously, sometimes requiring to shut down the entire platform for maintenance.

Your e-commerce experience is also more stable because the frontend and backend can be individually scaled. Even if the frontend receives a lot of traffic, this does not affect the backend as such, because they are only loosely coupled.

“There are many benefits to headless e-commerce, but it all comes down to increased flexibility, development speed and reduced costs.”

Doeke Leeuwis - Founder & Technical Director
Story of AMS

Decentralized architecture

We coupled Shopify, the Algolia search API, and Prismic CMS to a custom React storefront. We opted for a React storefront since it is the fastest PWA (progressive web app) for e-commerce. Speeding up a page by just 1 second can lead to a 7% increase in conversion, so choosing the right storefront is essential. The React storefront also supports the current business needs and ambitions of parfum.nl since it scales websites anywhere from $10M to $1B+ in revenue.

We coupled the Algolia search API because of its advanced search functions. On the average perfume website, many visitors come to the website without the intent to buy anything. To serve these customers and motivate them to eventually make a purchase you need to inspire them with different types of content. Not just product pages and details but blogs, videos, user-generated content, and brand stories as well. Algolia integrates different types of content from blog posts to FAQs to user-generated content and product catalogs, into a single unified experience. This made it the perfect solution for parfum.nl.

Prismic CMS gives parfum.nl the ability to quickly create rich and inspiring campaign pages, something parfum.nl heavily relies on for their revenue. Another benefit of Prismic CMS is the seamless integration with Shopify.

Automation

Parfum.nl functions as the middle man, warehousing, and distribution are handled by their distribution partner HTG. To automate the communication between the two, we created a custom solution. Through NestJS microservices, we connected their distribution partner HTG with Shopify. This enables a seamless transaction of data, as soon as a purchase is made through their website HTG gets notified. The other way around, HTG provides live stock updates and automatically adds newly available products.

Serverless deployment

Back in the day, more traffic resulted in higher server costs and a higher-chance of a website melt-down. With a serverless model, this is not the case anymore. For Parfum.nl we deployed the storefront and the microservices serverless. Serverless results in extreme stability, since it adjusts the number of servers that are deployed based on the number of visitors you have. On a day like Black Friday, more servers will be deployed and on days with lower traffic, the number of servers that are deployed goes down. This results in increased stability and reduced server costs.