babyonlineshop.de

Project Overview

Babyonlineshop is a Germany-based eCommerce brand specializing in high-quality, ergonomic children’s furniture. The objective of this project was to modernize the storefront, significantly improve performance, and enhance the buying experience through a full Hyvä-based redesign and custom Magento development.

The engagement covered UI/UX redesign, frontend performance optimization, custom PDP and PLP development, dynamic image resizing, and checkout enhancements, resulting in a faster, cleaner, and more scalable Magento store.

Challenges

• Legacy Magento frontend with heavy JavaScript and slower load times
• Product pages that lacked visual clarity and storytelling
• Inefficient image delivery impacting Core Web Vitals
• Need for a smoother product discovery and cart experience
• Maintaining compatibility with existing third-party extensions

Solution Approach

Hyvä Theme Redesign

We rebuilt the entire frontend using the Hyvä theme, replacing the default Magento stack with a lightweight architecture based on Alpine.js and Tailwind CSS. This drastically reduced frontend payload, improved rendering speed, and created a modern, accessible UI.

All designs were implemented from custom Figma layouts, ensuring pixel-perfect execution aligned with the Nature-Kid brand.

Key Features & Enhancements

Custom Product Listing Pages (PLP)

• Infinite scroll for uninterrupted browsing
• Promotional banners dynamically inserted between products
• Fully custom filters matching the UI design (not default Magento UI)
• Optimized queries for faster filtering and navigation

Advanced Product Detail Pages (PDP)

• Complete PDP redesign focused on clarity and conversion
• Tab-based content structure with distraction-free “read mode”
• Integrated upsell, cross-sell, and recommended products
• Optimized layout for both desktop and mobile users

Custom Product Gallery

• Bespoke two-image side-by-side gallery layout
• Smooth slider navigation with minimal JavaScript
• Fully compatible with BSS Pre-Config and existing extensions

Dynamic Image Optimization

To improve load times and Core Web Vitals, we implemented dynamic image resizing using URL parameters:

• Images are served in optimized dimensions based on page context (PLP, PDP, cart)
• Device-specific image sizes reduce unnecessary payload
• Improved Largest Contentful Paint (LCP) and overall page speed

Cart & Checkout Enhancements

• Introduced an intermediate add-to-cart step
• Displays selected product details along with upsell suggestions
• Backend logic dynamically controls relevant recommendations
• Streamlined checkout flow to reduce friction and drop-offs

Performance Optimization

• Reduced JavaScript execution by replacing legacy scripts
• Lightweight DOM structure using Hyvä best practices
• Optimized image delivery and frontend rendering using Bunny CDN
• Improved Core Web Vitals (LCP, CLS, INP) across key pages

Integrations & Backend Enhancements

• Integrated multiple payment methods including PayPal and Klarna
• Redesigned transactional email templates and success pages
• Custom backend logic for recommendations and cart behavior
• All customizations built following Magento coding standards for long-term stability

Results & Impact

•  Faster page loads across PLP, PDP, and checkout
•  Improved Core Web Vitals and frontend performance
•  Scalable Hyvä-based architecture for future growth
•  Enhanced UX leading to better engagement and conversions