I took on the full development of HAPI, a baby food brand that uses HPP (High Pressure Processing) technology to break away from industrial standards. The project objective was clear: bring to life a high-fidelity design provided by Blouandrooi in a robust online store. My approach focused on building an “Update-Proof” architecture in Shopify, allowing the brand to grow and update its base theme without compromising the advanced customisations I injected into the code. The technical scope ranged from bespoke Liquid development to the integration of an automated marketing ecosystem with Klaviyo.
This project was not simply a theme installation; it was software engineering applied to retail. I coordinated the implementation of non-native functionality to manage a complex business model combining direct sales and recurring subscriptions.
UI/UX Design
Web Design
E-Commerce Development
Applied Visual Identity
Web Development:
Albert Carmona
Web Design:
Blou and Rooi
For the HAPI project, my main responsibility was to act strictly as the technical bridge between the client and an exceptionally strong brand identity. The entire design universe, including the Instrument Serif typeface for headlines and IBM Plex Sans for body copy, as well as the dynamic colour palette (Coral, Fresh, Sky), was fully defined, finalised and approved by the branding agency Blou and Rooi. My role was not to design or alter these elements, but to execute an impeccable technical implementation that respected the freshness and visual honesty of the original project down to the last detail within Shopify.
I developed a bespoke UI Kit on the platform that ensures every button, container and spacing element faithfully reproduces the offline style guides supplied by the agency. This development approach allowed me to ensure rigorous visual consistency throughout the Customer Journey, translating complex layouts into clean code without diluting the strength of the brand within the usual limitations of commercial templates. The result is a pixel-perfect interface that works as an exact extension of Blou and Rooi’s strategic work, projecting a clean, modern and distinctly professional aesthetic.
I designed and implemented an advanced technical architecture using Custom Code Blocks and Dynamic Classes to overcome Shopify’s structural limitations. Instead of making intrusive changes to the theme core (which would prevent future updates), I developed a system where custom code is injected dynamically through JavaScript. Using proximity selectors such as .c-custom-section, I ensured that each specific design block is linked to its functionality without relying on Shopify’s internal IDs, which often change dramatically between versions.
This development methodology provides complete resilience to system updates. On the Home Page, I managed the visual complexity by duplicating specific structures for Desktop and Mobile, optimising every pixel without compromising loading speed. This technical solution gives the client complete freedom to reorder blocks in Shopify’s visual editor while I retain absolute control over the style and script logic, achieving the perfect balance between editorial flexibility and technical rigour.
To deliver the content structure required by the brand without compromising editor flexibility, I developed a set of .liquid files programmed from scratch. Among them, I implemented the advanced hapi-testimonial-slider-pro.liquid component, specifically designed to deliver a very precise and fluid testimonial layout. I also programmed the hapi-product-features.liquid file, a structured module that places the product image at the centre and displays interactive surrounding copy highlighting its nutritional benefits and brand values instantly and visually.
Additionally, I developed the hapi-section-sidebar.liquid component focused on optimising the architecture of the FAQ page. This section uses a dynamic accordion system that places the question blocks on the right while maintaining a sidebar navigation menu by section on the left, making the content clean and organised. Each of these custom sections was natively integrated into Shopify’s admin panel, allowing the client to manage and update the content independently and without touching a single line of code in the future.
I configured and integrated a deep Marketing Automation infrastructure using Klaviyo, connecting every website touchpoint to a solid data strategy. I designed complex flows including Welcome and Differentiation flows (educating customers about HPP technology), Abandoned Cart recovery with dynamic reminders and post-purchase sequences. I did not stop at the technical connection; I customised every email template to be an exact extension of the website, maintaining the visual fidelity the brand required in every communication.
I developed an advanced segmentation logic based on user behaviour and babies’ growth stages. Thanks to the data integration between Shopify and Klaviyo, the brand can send hyper-personalised messages that increase LTV (Lifetime Value). The subscription system is also linked to these flows, automatically notifying customers about renewals or pauses, which drastically reduces churn and positions HAPI as a convenient and reliable service for modern families.
