volkorn / case studies / klardag.no
development • magento • pwa studio • headless • migration • norway

klardag.no — norway's greenest care brand goes headless

How we moved an award-winning D2C store from end-of-life Magento 1 to a React-powered Magento PWA Studio storefront — without losing a single order on the way.

client
Klar / Klardag (Orkla)
industry
Sustainable home & personal care
stack
Magento 2 + PWA Studio
market
Norway 🇳🇴
scroll ↓
// the client • klart det har noe å si

a brand that cares — and a store that couldn't keep up

Klar is a Norwegian brand of Nordic Swan Ecolabel-certified cleaning and personal care products — refillable deodorants, laundry, hair, dental and body care — developed in Oslo and owned by Orkla, one of the Nordics' largest consumer goods groups.

klardag.no is their direct-to-consumer storefront: the face of the brand, a showcase for the full range, and a fast-growing sales channel alongside Norway's grocery retail.

Behind the light, minimalist front, the store was running on Magento 1 — end-of-life, unpatched, and slower with every campaign spike. The brand was winning; the platform was losing.

🏆

årets nettbutikk 2023

klardag.no was named Norway's Online Store of the Year (small store category) by Posten Bring — selected from over 1,000 evaluated stores for customer experience, innovation and sustainability across the whole customer journey.

// posten bring annual awards
0
from kickoff to launch
0
lost during migration
0
seo equity preserved
0
stores it beat for the award
// the storefront • light, clean, instant

a pwa that feels like the products: effortless

The new storefront keeps the brand's bright, minimalist identity — and adds app-like navigation where every tap responds instantly.

🔒 klardag.no
klardag.no homepage — Magento PWA Studio storefront
homepage • react + venia ui • built by volkorn
01 / instant navigation

pages that are already there

PWA Studio pre-fetches routes and renders through a service worker: moving between catalog, product and cart feels like a native app, not a website. On repeat visits, the shell loads from cache — before the network even answers.

🔒 klardag.no/alle-produkter
klardag.no catalog — all products
catalog • graphql-powered • refill & subscription ready
02 / commerce, decoupled

backend stays magento. frontend goes react.

Every product, price and promotion still lives in Magento — but the storefront talks to it through GraphQL. Marketing ships new campaigns without touching the backend, and developers ship features without fear.

03 / mobile is the store

an app in the browser — no app store needed

Most of Klardag's customers shop on their phones. The PWA gives them add-to-home-screen, offline-tolerant browsing and buttery route transitions — the experience of a native app with the reach of the open web.

klardag.no on mobile — PWA experience
// the project • challenge & solution

replatform a winner without breaking its stride

01 / challenge

an award-winning store on a dying platform

Magento 1 support had ended: no security patches, aging extensions, and a frontend architecture from another decade.

  • growing D2C traffic on an unsupported stack
  • mobile experience falling behind the brand promise
  • refill & repeat-purchase flows needed modern UX
  • zero tolerance for downtime or lost SEO rankings
02 / solution

magento 2 + pwa studio, done properly

A full replatform to Magento 2 with a headless React storefront on Magento PWA Studio.

  • catalog, customers & order history migrated with seo-safe url mapping
  • react storefront on pwa studio (venia) with custom design system
  • graphql api layer; service worker caching & route pre-fetch
  • norwegian essentials: vipps payments, bring shipping, klarna-style checkout flow
// how it went • the line fills as you scroll

six months, five stages, zero drama

phase 01 · discovery

audit & migration map

Full audit of the M1 store: catalog structure, extensions, integrations, SEO assets. Every URL, every attribute, every edge case — mapped before a line of code.

phase 02 · design

design system in figma

The brand's light, minimal identity translated into a reusable component library — buttons, cards, product tiles — approved before development started.

phase 03 · build

pwa studio storefront

React storefront on Magento PWA Studio: GraphQL data layer, service-worker caching, instant route transitions, and Norwegian payment & shipping integrations.

phase 04 · migration

data over, rankings intact

Products, customers and order history moved to Magento 2 with 301-mapped URLs. Staging verified against production data until the diff was zero.

phase 05 · launch

zero-downtime go-live

DNS switch during the quietest traffic window, live monitoring, and a hypercare period. Customers noticed exactly one thing: the store got fast.

// results • what changed after launch

speed you can measure. growth you can bank.

0

faster page loads

Median mobile load time dropped from seconds to near-instant on repeat visits thanks to service-worker caching.

0

conversion rate

Smoother catalog browsing and a friction-free checkout turned more visits into orders — especially on mobile.

0

mobile revenue

The app-like experience finally matched where the customers actually were: on their phones.

0

lighthouse performance

From failing scores on M1 to consistently green Core Web Vitals across key templates.

0

bounce rate

Visitors stopped leaving while the page was still loading — because it wasn't still loading.

🏆

årets nettbutikk 2023

The new storefront became the stage for Norway's "Online Store of the Year" award in its category.

mobile page load — before vs after

magento 1 storefront0.0s
pwa studio storefront0.0s
// representative field metrics; exact figures available on request during a call

great brands deserve
storefronts that keep up

// your turn • still on magento 1 or a slow luma theme?

let's discuss your project

Tell us where your store is today — we'll map the safest, fastest route to where it should be. Free audit, itemized estimate, no pressure.

Book a call ↗ Request a free audit ↗