From Liquid to Headless. E‑commerce Upgrade with Next.js
Goals
Nanobebe, a top brand in baby products, was ready for a big upgrade to their Shopify store. They needed a more flexible setup to handle their rapid growth and smoothly launch an exciting new product line. Naturaily stepped in, guiding them through a smart transition to a headless architecture, which resulted in creating a beautifully designed website.
01
Future-proofing e-commerce
Nanobebe's original Shopify store, while functional, was becoming a bottleneck for growth and innovation. The goal was to move away from the limitations of Shopify Liquid and embrace a headless solution that would offer greater control over the front-end and seamless integration with other systems.
02
Launching a new product line
Nanobebe was preparing to launch a new line of smart baby monitors (Aura), which required a more sophisticated and dynamic online presence. The new platform needed to effectively showcase the product's features and provide a seamless pre-order and purchase experience.
03
Enhancing user experience
Nanobebe aimed to provide its customers with a best-in-class online shopping experience. This involved a focus on modern design, intuitive navigation, and smooth performance across all devices.
Challenge
Nanobebe faced the challenge of needing a major e-commerce overhaul to support their expanding business and new product offerings. They needed a partner who could guide them through the complexities of transitioning from a traditional Shopify setup to a modern headless architecture.
Keegan Robbins
VP, Sales & Marketing at Nanobebe
Moving away from Liquid was a big step for us. We were concerned about disrupting our business, but Naturaily laid out a clear plan. They understood the complexities of Shopify and how to transition to a headless setup smoothly.
Nanobebe had been using Shopify with customizations built on Shopify Liquid. While Naturaily had previously supported them with updates to their Liquid theme, the platform's limitations were becoming increasingly apparent. They needed a more flexible and scalable solution to:
Gain greater control over the front-end: Shopify Liquid restricted design and development flexibility.
Support complex product features: The upcoming "Aura" product line demanded advanced features like pre-orders and subscriptions.
Ensure future scalability: Nanobebe anticipated continued growth and needed a platform that could easily adapt.
Maintain brand consistency: They wanted a modern design that accurately reflected their brand and appealed to their target audience.
Naturaily's challenge was to provide a seamless transition to a headless architecture while ensuring minimal disruption to Nanobebe's ongoingbusiness operations. This required careful planning, close collaboration, and a deep understanding of both Shopify and modern web development technologies.
Approach
Naturaily took a collaborative and strategic approach, guiding Nanobebe through every step of the headless transformation. We focused on understanding their business needs, validating assumptions, and building a flexible solution tailored to their specific requirements.
Keegan Robbins
VP, Sales & Marketing at Nanobebe
The collaborative approach was key. We felt included in every step, from the initial discussions to the final design. Naturaily's team was transparent and kept us informed, ensuring the platform truly reflected our brand.
Naturaily's approach was centered around:
Strategic consultation: Our team began by thoroughly analyzing Nanobebe's existing setup and future goals. We provided expert guidance on the benefits of headless commerce and how it could address their specific challenges. This involved a consultative process, with a dedicated technical consultant on the client's side, ensuring alignment at every stage.
Collaborative discovery: We conducted in-depth workshops, discussed benchmarks, and reviewed requirements to create designs that reflect Nanobebe's identity. This collaborative process ensured that the new platform would not only meet technical requirements but also align with Nanobebe's brand and business objectives.
Flexible solution design: Recognizing the need for adaptability, we prioritized building a flexible solution that could accommodate Nanobebe's evolving needs. This involved implementing an e-commerce platform based on atomic design principles, enabling non-technical team members to modify the website's structure.
Headless architecture implementation: We implemented a headless architecture, decoupling the front-end from the back-end. This allowed for greater front-end flexibility and performance while leveraging Shopify as the commerce platform, Storyblok CMS for content management, and NextJS as the front-end framework.
Technology choices: We carefully selected a modern tech stack to power the new platform, focusing on performance, scalability, and maintainability:
Turborepo for efficient management of multiple code repositories - this technology was specifically chosen because the client operates separate Shopify stores for different languages/currencies. Turborepo enables us to create reusable components and functionalities once, then deploy them across individual stores, significantly reducing development time and ensuring consistency across all markets.
Next.js for building a fast, SEO-friendly, and dynamic front-end
Storyblok CMS to provide Nanobebe with intuitive content management and control
Shopify Advanced as the e-commerce engine for handling products, orders, and payments
Tailwind CSS + shadcn/ui for rapid and consistent front-end styling
NextAuth.js for secure user authentication
Framer Motion for website animations
GTM - GA (Google Tag Manager - Google Analytics) for analytics
GraphQL for displaying page content (product detail pages, blog, etc.)
REST API for backend integrations
Results
Naturaily successfully delivered a modern, scalable, and flexible headless e-commerce platform for Nanobebe. The new platform helped Nanobebe to manage their content effectively, launch new products seamlessly, and provide an exceptional online shopping experience.
Keegan Robbins
VP, Sales & Marketing at Nanobebe
Naturaily delivered an outstanding platform that truly set Nanobebe up for long-term success.
The results of the project included:
A modern and flexible e-commerce platform
The headless architecture provides Nanobebe with complete control over the front-end, enabling them to create engaging and dynamic shopping experiences.
Seamless product launches
The platform's flexibility allowed for the smooth launch of the new product line, with features like pre-orders and subscriptions integrated seamlessly.
Enhanced content management
Storyblok CMS empowers Nanobebe to easily manage and update website content, with a live preview of modifications.
Improved performance
NextJS ensures the website loads quickly and efficiently, contributing to an impressive +80% reduction in Total Blocking Time (TBT).
Scalability for growth
The new platform is designed to scale with Nanobebe's business, accommodating future growth and expansion.
Stronger brand presence
The modern design and enhanced user experience help reinforce Nanobebe's position as a leader in the baby products market.
Outcome
The project resulted in a 117% increase in GTmetrix Performance Score and 10+ seconds slashed from Fully Loaded Time, significantly enhancing the site's speed and efficiency.
Before
The limitations of Nanobebe's Shopify Liquid store were holding them back from innovating and scaling.
After
Nanobebe could benefit from a powerful, flexible headless e-commerce platform, allowing them to manage their brand experience, launch new products efficiently, and deliver a superior shopping journey.
Improvements
Our work resulted in:
Increased flexibility
Headless architecture allows for greater front-end customization.
Improved scalability
The platform can easily handle increased traffic and product growth.
Enhanced content control
Storyblok CMS makes it easier to efficiently manage content.
Seamless integrations
Easy integration with Shopify and other third-party services.
Better performance
Fast loading times and efficient performance enhance user experience.
Improved SEO
Headless architecture and Next.js can improve the website's search engine visibility.
Numbers
0%+
reduction in Total Blocking Time (TBT)
0%
increase in GTmetrix Performance Score
0+
seconds slashed from Fully Loaded Time
0/5
Clutch review
Most Interesting Features
Launching innovative products
Pre-orders for Aura
To facilitate the launch of Nanobebe's new Aura smart baby monitor, we implemented a robust pre-order system. This feature allowed customers to reserve their devices ahead of the official release date, generating early sales and providing Nanobebe with valuable insights into initial demand. By making pre-ordering easy, we helped Nanobebe capture excitement and manage their stock and shipping effectively for a smooth launch.
Recurring revenue streams
Subscription management
Recognizing the importance of recurring revenue, we integrated a comprehensive subscription management system for select Nanobebe products. This makes it super easy for customers to get automatic deliveries regularly, which builds customer loyalty and gives Nanobebe a steady stream of revenue. The system is flexible, letting customers choose their delivery times and products to fit their needs. This smart move helps keep customers engaged and supports long-term business growth.
Complex product catalog
Product variants
Recognizing Nanobebe's varied product lines, we created an advanced product variant system. This helps them effectively present items with different variations (like size or color). Customers can effortlessly find and pick their ideal product, leading to a great shopping journey. By showing clear details and images for each option, we made buying from their broad catalog much easier.
Flexible e-commerce logic
Custom cart rules
To meet Nanobebe's unique business needs, we added some custom rules to their shopping cart. For example, we put a limit on how many of a single product a customer can buy, which helps prevent large orders that could impact stock and ensures more customers have a chance to purchase. These special rules give Nanobebe better control over sales and customer interactions.
The Team
Our team at Naturaily worked closely with Nanobebe to build their new headless e-commerce store. We aimed to deliver a successful solution by collaborating every step of the way.
Keegan Robbins
VP, Sales & Marketing at Nanobebe
I would just say that the whole Naturaily team was great to work with from day one. Everyone was responsive, friendly, and committed to the project. They helped make sure the needs and goals were clarified and helped our team better define what we were looking for.
We managed the project using a method called "Scrumban," which combines aspects of Scrum and Kanban. This helped us keep the project organized and ensured timely delivery. Our team focused on creating user interface parts that could be reused, following principles that help keep designs consistent. The development process included:
Project kickoff to gather requirements
UX/UI design workshops
Frontend and backend development with ongoing testing
User Acceptance Tests (UAT)
Going live with thorough testing and training
Ongoing maintenance and support
Our team at Naturaily provided complete support for the project, from the initial discussions and planning to the design, development, and launch. We brought our knowledge of headless commerce, Shopify, and modern web technologies to make the process smooth and efficient. Our commitment to clear communication and teamwork helped us build a strong working relationship with Nanobebe.
Meet the team that worked on this project
Mateusz
Lead Developer
Marcin
Frontend Developer
Justyna
Frontend Developer
Tomasz
Head of Delivery
About The Client
Nanobebe is a leading provider of innovative baby products, specializing in solutions for breastfeeding and infant feeding.
Project
Headless E-commerce
Industry
Baby Products
Web
NanobebeNanobebe is committed to providing parents with high-quality, innovative products that make feeding time easier and more enjoyable. Their product line includes a variety of bottles, pacifiers, and breastmilk storage solutions, designed with a focus on preserving essential nutrients and promoting healthy development. With a strong presence in the USA and Canada, Nanobebe is dedicated to meeting the needs of parents worldwide. The recent launch of their Aura smart baby monitor represents their expansion into the realm of smart parenting technology, further solidifying their position as a forward-thinking brand in the industry.
This project was a major undertaking for Nanobebe, but Naturaily made it feel manageable and even enjoyable. They delivered a truly exceptional platform that has set us up for long-term success. Their team went above and beyond, and we are incredibly grateful for their expertise and dedication.
Keegan Robbins
VP, Sales & Marketing at Nanobebe
Unlock the potential of headless commerce
Get a personalized audit of your current setup and growth opportunities.
Here’s how we're making a difference in the web, together
Stories of path-breaking solutions, responsibility, and businesses moving forward
Bronson Labs
Health & Wellness E-Commerce
From Magento to Shopify: a path to 90% increased day-to-day efficiency
Bronson Labs wanted to add content, integrations, and special offers quickly. After migrating to Shopify, all website changes became easy, cutting maintenance costs threefold.
5/5
Clutch review
70%
Less dev time
3x
Lower maintenance costs
n8n
Workflow Automation SaaS
Empowering SaaS growth with a scalable, SEO-optimized Nuxt.js website
n8n sought a scalable web solution for automated API-rich content creation in huge page volumes. The rapid website we created boosted their visibility and product usage while saving tons of time.
5/5
Clutch review
300k
API-driven dynamic pages generated
900%
More Top 10 keywords in 1 year
Urban
Wellness SaaS
Transforming web management to allow quicker SaaS growth
We supercharged Urban’s website and gave their marketing team the tools and autonomy they needed. All while significantly improving web performance and SEO capabilities.
96
Performance (Lighthouse)
100%
Web devs’ time saved
Total
Flexibility & scalability
Artinfo
Auction House
Custom web app for live art auctions' market leader
Artinfo needed a seamless, real-time online auction platform to modernize bidding and engage more users. We built a scalable web platform that enhanced data processing, increased participation, and boosted sales.
75k
Unique users a month
80%
of phone bids transferred online
300
online bidding yearly
Etno Cafe
Gastronomy B2C & B2B
Modern, performant, and easy-to-navigate website based on Sanity
Etno Cafe needed a performant and secure website that'd support their growing brand thanks to its visual appeal and ease of management. They now add content quicker and engage customers more easily.
5/5
Clutch review
100
SEO (Lighthouse)
0.6 s
First Contentful Paint
Lingohub
Translation Management SaaS
Fast & scalable custom Vue.js app for improving translation efficiency
Lingohub needed a modern, scalable foundation for its translation SaaS. We migrated their platform to Vue.js, improving speed, collaboration tools, and securing €600k+ in funding for future growth.
5/5
Clutch review
600k+
Euros of new FFG funding
60%
Time saved on translation
