We aimed to create a flexible, modern e-commerce site for sleep.ink that could do justice to the increasing activity in online marketing. In particular, employees of the marketing team should be able to independently design and publish landing pages for campaigns. The existing WooCommerce site, which had grown with the start-up, could no longer meet these requirements.
Since sleep.ink does not offer a traditional, large product catalog, the e-commerce functionality should be tailored to the properties of the products on offer.
To meet these requirements, we have developed an individual CMS for sleep.ink based on the Sanity.io Headless CMS platform.
The CMS offers a page builder, with which specially designed and developed blocks that can be filled in and put together. All pages and all elements are created with this page builder so that the marketing team can take full control of all aspects of the page without having to dig into a complicated technical system. The data for e-commerce functionality is also managed here. In this way, information tailored to the product range can be managed in a simple and structured manner. This allows elements such as a nutrition facts table or a slideshow to be fed to individual ingredients.
The e-commerce functionality of the CMS and the site is integrated with Shopify and WooCommerce for order processing. Customers who want to sign up for a subscription must be directed via WooCommerce instead of Shopify. Thanks to the company’s own CMS for product management, this complication is not an obstacle for editors. The shopping cart is integrated directly into the page as an interactive element. When checking out, the customer is then forwarded to the appropriate external form.
We implemented the website as a static JAMStack page with the Gatsby.js framework. This makes it safe, fast and can be hosted anywhere. A real-time preview with its own Gatsby Preview Server is integrated into the CMS.
To strengthen the collaboration between developers and designers, we have integrated Storybook into the project. By combining the storybook and the modular, component-based working method of React.js and Sanity.io, we were able to create a very good developer experience. In this way, several developers can develop and test individual blocks at the same time via the CMS and front-end, without having to worry about conflicts.
Overall, we have developed a flexible platform that is now being used and expanded independently by the sleep.ink development and marketing team.