Back to Projects

Superfoodies

Dutch superfoods and supplements e-commerce platform selling green juices, collagen, protein powders, and wellness products.

ShopifyLiquidJavaScriptAnalytics
Superfoodies — Case study by Bhavya Panchal, Frontend Developer

Role

Frontend Developer

Duration

4 weeks

Industry

Health & E-Commerce

Team Size

2 (Developer + Shopify Admin)

The Problem

Superfoodies, a Netherlands-based superfoods and supplements brand, approached me with a Shopify store that was underperforming on mobile. They sell premium health products including Green Juice, collagen supplements, hormone balance capsules, protein powders, and immunity boosters. Average page load times of 2.1s were causing a 68% bounce rate on mobile devices. Cart abandonment stood at 72% — significantly above the industry average. The existing theme was poorly optimised with render-blocking scripts and unoptimised product images.

The Solution

I completely overhauled the Shopify theme, focusing on mobile-first performance. Replaced heavy third-party apps with custom Liquid snippets and vanilla JavaScript. Implemented lazy loading for product images with proper WebP formats and responsive sizes. Restructured the product page layout to prioritise above-fold content — product image, title, price, and Add to Cart button visible without scrolling. Built custom collection filters for their extensive product catalogue across categories like energy, gut health, hormones, and immunity.

Challenges

Shopify's app ecosystem creates a tension between functionality and performance. Many apps inject render-blocking JavaScript and unused CSS. I audited every app, removed non-essential ones, and replaced bloated apps with custom implementations — including a lightweight cart drawer, predictive search, and product recommendation widgets built from scratch. The multi-language Dutch/English content required careful Liquid template structuring.

Outcomes & Metrics

Performance Improvements

Average page load dropped from 2.1s to 0.8s (62% reduction). Mobile Lighthouse Performance score improved from 42 to 88. Largest Contentful Paint reduced by 55%. Time to Interactive improved by 1.2 seconds. Bundle size reduced by 45% through script consolidation.

SEO Improvements

Implemented structured product data (Product schema with price, availability, and reviews). Optimised meta titles and descriptions for all product and collection pages in both Dutch and English. Created category page content to target long-tail health and wellness keywords. Fixed duplicate content issues from URL parameters.

Accessibility Improvements

Added skip-to-content and skip-to-product links. Improved colour contrast on product badges and sale indicators. Made the cart drawer keyboard-accessible with focus trapping. Added ARIA labels to all interactive elements including variant selectors and quantity inputs.

Business Outcome

Mobile conversion rate improved by 28%. Cart abandonment dropped by 35%. Average session duration increased by 40%. The client reported a 4.8/5 post-launch UX satisfaction rating from customer surveys. Monthly revenue increased by 22% attributed directly to the improved mobile experience.

Lessons Learned

Shopify stores can achieve excellent performance, but it requires auditing and replacing third-party apps. Custom implementations of common features (search, cart drawer) are often faster and more maintainable than app-based solutions. Mobile-first is not optional — over 70% of e-commerce traffic now comes from mobile devices.

Key Metrics at a Glance

28% improvement in mobile conversion rate2.1s → 0.8s avg page load time35% reduction in cart abandonment4.8/5 post-launch UX rating

Interested in a similar project?

Whether you need a corporate website, e-commerce platform, or custom web application — I would love to discuss your project.