Headless Ecommerce with Crystallize PIM

Headless Ecommerce with Crystallize PIM

My latest project was a webshop for a beauty salon . Out of the many choices to implement this, I chose Crystallize , a headless ecommerce system. In this blog post I want to explain what where my main reasons for choosing this solution.

My first reason for choosing Crystallize was that it is a headless ecommerce system. What is ‘headless ecommerce’ you wonder, so let me explain this concept first.

Headless Ecommerce

With ‘headless ecommerce’? the frontend is decoupled from the backend via an API. From the frontend, the Crystallize backend can be accessed through GraphQl, which makes it superfast. The main advantage of a headless architecture is that you are not locked down to a specific technological stack, which is the case with a monolithical architecture. A headless architecture enables developers to pick services (authentication, payment, mail, shipping, ...) as they see fit. So it gives them the freedom to build a best of breed stack. Instead of spending resources on maintaining your stack, you can spend it on your frontend. A headless architecture enables you to build a tailor made frontend that is really fast. It also enables developers to faster migrate your stack to the future, as they don’t have to migrate the whole system, they can just migrate the frontend.

headless-architecture-diagram.png Figure 1 Build a headless architecture with Crystallize

Crystallize offers a couple of boilerplate frontends (Next, React Native, Gatsby). I build my frontend upon the Next.js boilerplate. Next.js is all the rage at this moment because it combines static site generation and server side generation for React frontends. This enables data prefetching which results in better first page rendering and SEO.

From a business perspective, why would one choose for headless ecommerce? The answer is mainly site speed. The speed of your site is a great differentiator for your ranking in Google. Performance is a great factor for the score Google gives your website. This score can lead up to a discount of 50% when you advertise with Google. Scoring bad can lead up to a penalty of 400% when buying ads on Google. If your website is fast you pay less, it’s as simple as that.

Content Modeling

The second reason for choosing Crystallize is its powerful content modeling tools that enable me to structure and market the content any way I like. This way you can define what fits your business instead of fitting your business into the technology.

The content modeling is done with so called ‘shapes’. A shape is a defined collection of components that you as an editor can populate for products, folders and documents. These shapes can be extended with components so you can structure your data in a semantic way. The semantic integrity enables the use of logic in the frontend. Through relations between your shapes you can reuse the content and maintain its quality.

product-shape.jpg Figure 2 example of a custom product shape

Conclusion

I chose Crystallize for my webshop project because it enables me to develop a tailor made shopping experience with a best of breed tech stack. I can access the Crystallize API through GraphQl which gives a super fast shopping experience and is good for SEO.

The powerful editing tools in Crystallize enable me to shape and market the content as I see fit for the business.