Architectuur e-commerce headless met Shopify Hydrogen: technische gids 2026

De e-commerce sector heeft zich de afgelopen jaren drastisch ontwikkeld, en traditionele monolithische architecturen voldoen niet langer aan de eisen van moderne gebruikerservaringen. Shopify Hydrogen is Shopify's meest ambitieuze stap in het headless ecosysteem, met een React-framework dat specifiek is geoptimaliseerd voor e-commerce en laadtijden onder de seconde en meeslepende winkelervaringen belooft.

In deze uitgebreide technische gids duiken we diep in wat Hydrogen is, hoe de architectuur gebaseerd op Remix en React Server Components werkt, wanneer u het zou moeten overwegen ten opzichte van traditioneel Liquid, en bieden we een stapsgewijze implementatie zodat u kunt beoordelen of het de juiste oplossing is voor uw volgende Shopify ontwikkelingsproject.

Wat is Shopify Hydrogen en waarom revolutioneert het headless e-commerce?

Shopify Hydrogen is een op Remix gebaseerd React-framework, specifiek ontworpen voor het bouwen van op maat gemaakte headless storefronts die verbinding maken met de Shopify backend via de Storefront API. Oorspronkelijk gelanceerd in 2022 en volledig herbouwd op Remix in 2023, is Hydrogen aanzienlijk volwassen geworden tot de referentie headless oplossing binnen het Shopify ecosysteem.

In tegenstelling tot andere generieke headless oplossingen, wordt Hydrogen geleverd met:

• Geoptimaliseerde hooks en componenten voor e-commerce: Winkelwagen, checkout, collecties, producten en varianten met geïntegreerd state management
• Slimme cache: Meerniveau caching systeem dat gebruik maakt van edge computing mogelijkheden
• Automatische SEO: Generatie van metadata, sitemaps en gestructureerde gegevens specifiek voor producten
• Native integratie met Shopify: Authenticatie, betalingen, voorraad en fulfillment zonder extra configuratie

De fundamentele premisse van Hydrogen is eenvoudig maar krachtig: de totale flexibiliteit van een modern React-framework bieden zonder de kritieke e-commerce functionaliteiten op te offeren die Shopify in de loop der jaren heeft geperfectioneerd.

Het concept van "Commerce-grade performance"

Shopify gebruikt de term "commerce-grade performance" om het doel van Hydrogen te beschrijven: winkels die wereldwijd in minder dan een seconde laden, optimale Core Web Vitals behouden onder belasting, en onmiddellijke navigatie-ervaringen bieden door middel van slimme prefetching.

Dit prestatieniveau is geen toeval; het is het resultaat van specifieke architectonische beslissingen die we in de volgende secties zullen analyseren.

Wat is Oxygen en hoe vult het Hydrogen aan?

Oxygen is het edge hosting platform van Shopify, speciaal ontworpen voor het uitrollen van Hydrogen applicaties. Terwijl Hydrogen het ontwikkelingsframework is, is Oxygen de geoptimaliseerde runtime omgeving die de beloofde prestaties mogelijk maakt.

Technische kenmerken van Oxygen

Oxygen voert Hydrogen applicaties uit op Cloudflare Workers, wat betekent:

• Ultra-lage latentie: De code wordt uitgevoerd op meer dan 300 wereldwijde locaties, op milliseconden van de eindgebruiker
• Minimale cold starts: Cloudflare Workers starten op in microseconden, niet seconden
• Automatische schaalbaarheid: Geen infrastructuurconfiguratie of zorgen over verkeerspieken
• Integratie met Shopify CDN: Statische assets worden geserveerd vanaf hetzelfde edge netwerk

// Voorbeeld van cacheconfiguratie in Oxygen
export async function loader({context}) {
  const {storefront} = context;
  
  const {products} = await storefront.query(PRODUCTS_QUERY, {
    cache: storefront.CacheLong(), // Cache van 1 uur op edge
  });
  
  return json({products});
}

Prijsmodel en plannen

Oxygen is inbegrepen in alle Shopify plannen vanaf Basic, met genereuze limieten:

Voor projecten die meer controle vereisen, kan Hydrogen ook worden uitgerold op Vercel, Netlify, Fly.io of elk platform dat Node.js of Workers ondersteunt.

Hoe werkt de technische architectuur van Hydrogen met Remix en React Server Components?

De architectuur van Hydrogen 2.0+ is gebaseerd op Remix, het full-stack React-framework gemaakt door de oprichters van React Router. Deze technische beslissing was niet willekeurig; Remix biedt primitieve functies die perfect aansluiten bij de eisen van moderne e-commerce.

Remix als fundament

Remix biedt Hydrogen:

1. Geneste routing met parallelle data loading: Elk route segment kan zijn gegevens onafhankelijk laden
2. Loaders en Actions: Duidelijke scheiding tussen lezen en schrijven van gegevens
3. Progressive Enhancement: Winkels werken zelfs zonder client-side JavaScript
4. Granulaire Error Boundaries: Geïsoleerde fouten die niet de hele pagina breken

// app/routes/products.$handle.jsx
import {useLoaderData} from '@remix-run/react';
import {json} from '@shopify/remix-oxygen';

export async function loader({params, context}) {
  const {handle} = params;
  const {storefront} = context;
  
  const {product} = await storefront.query(PRODUCT_QUERY, {
    variables: {handle},
  });
  
  if (!product) {
    throw new Response('Product not found', {status: 404});
  }
  
  return json({product});
}

export default function ProductPage() {
  const {product} = useLoaderData();
  
  return (
    <div className="product-page">
      <ProductGallery images={product.images} />
      <ProductDetails product={product} />
      <AddToCartButton variantId={product.variants.nodes[0].id} />
    </div>
  );
}

React Server Components in Hydrogen

Vanaf 2024 integreert Hydrogen React Server Components (RSC) experimenteel, waardoor:

• Zero-bundle components: Componenten die nooit naar de client worden gestuurd
• Streaming SSR: Progressieve rendering met Suspense boundaries
• Directe toegang tot gegevens: Queries in componenten zonder extra hooks

// Server component (niet naar de client gestuurd)
async function ProductRecommendations({productId}) {
  const recommendations = await fetchRecommendations(productId);
  
  return (
    <section className="recommendations">
      <h2>Ook interessant voor u</h2>
      <ProductGrid products={recommendations} />
    </section>
  );
}

De Storefront API en het GraphQL-schema

Alle communicatie tussen Hydrogen en Shopify vindt plaats via de Storefront API, een openbare GraphQL API die het volgende biedt:

• Producten, collecties en varianten
• Winkelwagen en checkout
• Klanten en authenticatie
• Metafields en metaobjects
• Inhoud van pagina's en blogs

# Voorbeeld van geoptimaliseerde productquery
query ProductDetails($handle: String!) {
  product(handle: $handle) {
    id
    title
    description
    priceRange {
      minVariantPrice {
        amount
        currencyCode
      }
    }
    images(first: 10) {
      nodes {
        url
        altText
        width
        height
      }
    }
    variants(first: 100) {
      nodes {
        id
        title
        availableForSale
        price {
          amount
          currencyCode
        }
        selectedOptions {
          name
          value
        }
      }
    }
  }
}

Wat zijn de verschillen tussen Hydrogen en traditioneel Liquid?

De keuze tussen Hydrogen en traditionele ontwikkeling met Liquid (het sjabloontaal van Shopify) is een van de belangrijkste architectonische beslissingen bij het starten van een e-commerce project. Elke benadering heeft verschillende sterke en zwakke punten.

Gedetailleerde technische vergelijking

Wanneer kiezen voor traditioneel Liquid

Liquid blijft de juiste keuze wanneer:

• Beperkt budget: Een kwalitatief thema kost $300-500, versus $30,000-100,000+ voor Hydrogen
• Kritieke time-to-market: Lanceren in weken, niet maanden
• Team zonder React ervaring: De leercurve van Liquid is milder
• Standaardvereisten: Catalogus, winkelwagen, checkout zonder extreme personalisaties
• Apps uit het ecosysteem: Veel Shopify apps werken alleen met Liquid thema's

Wanneer kiezen voor Hydrogen

Hydrogen rechtvaardigt de investering wanneer:

• Performance is een onderscheidende factor: Elke 100ms verbetering beïnvloedt conversies
• Unieke ervaringen: 3D-configurators, AR, complexe personalisatoren
• Omnichannel: PWA, native apps, kiosken vanuit dezelfde code
• Complexe integraties: ERP, PIM, externe CMS met bedrijfslogica
• Premium merken: Waar de digitale ervaring de merkpositionering weerspiegelt

Als u opties voor ontwikkeling met React voor uw project evalueert, vertegenwoordigt Hydrogen de perfecte kruising tussen het moderne React-ecosysteem en de e-commerce capaciteiten van Shopify.

Wat zijn de ideale use cases voor Shopify Hydrogen?

Na het analyseren van tientallen Hydrogen implementaties, hebben we de scenario's geïdentificeerd waar deze technologie echt uitblinkt ten opzichte van alternatieven.

1. D2C merken met hoog verkeersvolume

Direct-to-consumer merken die miljoenen bezoeken per maand ontvangen, profiteren enorm van de edge architectuur van Hydrogen. Voorbeelden zijn:

• Allbirds: Migreerde naar Hydrogen en behaalde 40% verbetering in LCP
• Staples Canada: Verminderde de Time to Interactive met 60%
• Babylist: Beheert verkeerspieken tijdens virale baby showers zonder degradatie

2. Interactieve productervaringen

Wanneer het product geavanceerde visualisatie vereist:

• Realtime configurators: Productpersonalisatie met directe preview
• Augmented reality: Integratie met WebXR om producten "uit te proberen"
• 3D-visualisatie: Interactieve modellen met Three.js/React Three Fiber

// Integratie van 3D-viewer op productpagina
import {Canvas} from '@react-three/fiber';
import {OrbitControls, useGLTF} from '@react-three/drei';

function Product3DViewer({modelUrl}) {
  const {scene} = useGLTF(modelUrl);
  
  return (
    <Canvas camera={{position: [0, 0, 5]}}>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} />
      <primitive object={scene} />
      <OrbitControls enableZoom={true} />
    </Canvas>
  );
}

3. Composable architecturen met meerdere backends

Hydrogen als verenigd frontend dat consumeert:

• Shopify: Producten, voorraad, checkout
• Contentful/Sanity: Rijke redactionele inhoud
• Algolia: Geavanceerd zoeken en filteren
• Klaviyo: Personalisatie op basis van segmenten
• Interne ERP: Real-time beschikbaarheid per magazijn

4. Geavanceerde internationalisatie

Voor merken met multi-markt aanwezigheid die vereisen:

• Volledig gelokaliseerde storefronts (niet alleen vertaald)
• Prijzen, valuta's en betaalmethoden per regio
• Cultureel aangepaste ervaringen
• Beheer van meerdere domeinen/subdomeinen

5. PWA en offline-first ervaringen

Hydrogen vergemakkelijkt het maken van Progressive Web Apps die:

• Offline werken met service workers
• Installeerbaar zijn op mobiele apparaten
• Pushmeldingen verzenden
• Winkelwagens synchroniseren tussen apparaten

Welke performance benchmarks kunnen worden verwacht met Hydrogen?

Concrete prestatiecijfers zijn cruciaal om de investering in een headless architectuur te rechtvaardigen. Dit zijn de werkelijke benchmarks die we hebben waargenomen en gedocumenteerd.

Typische Core Web Vitals

Impact op bedrijfsmetriek

Volgens Shopify studies en gegevens van echte implementaties:

• Conversie: +15-25% met verbeteringen van 1 seconde in LCP
• Bounce rate: -20% op productpagina's
• Pagina's per sessie: +30% dankzij directe navigatie
• Omzet per bezoek: +10-20% cumulatief

Case study: Gemeten verbetering

Een mode retailer met 500K bezoeken/maand migreerde van een aangepast Liquid thema naar Hydrogen:

Voor (Liquid):

• LCP: 3.2s (mobiel)
• TTI: 5.8s
• Lighthouse: 62

Na (Hydrogen + Oxygen):

• LCP: 1.1s (mobiel) — 66% verbetering
• TTI: 2.1s — 64% verbetering
• Lighthouse: 94 — 32 punten verbetering

Impact op bedrijf (3 maanden na migratie):

• Mobiele conversieratio: +18%
• Tijd op site: +25%
• Bounce rate: -22%

Hoe Shopify Hydrogen stap voor stap implementeren?

We gaan de basis van een Hydrogen winkel vanaf nul opbouwen. Dit proces veronderstelt vertrouwdheid met React en Node.js.

Stap 1: Omgevingsconfiguratie

# Nieuwe Hydrogen project maken
npm create @shopify/hydrogen@latest my-store

# CLI-opties:
# - Template: Demo store (aanbevolen om te leren)
# - Taal: TypeScript
# - Styling: Tailwind CSS

Stap 2: Shopify-credentials configureren

U moet een privé-app maken in uw Shopify-winkel:

1. Ga naar Instellingen > Apps en verkoopkanalen > Apps ontwikkelen
2. Maak een nieuwe app
3. Configureer de Storefront API scopes:

- unauthenticated_read_product_listings - unauthenticated_read_product_inventory - unauthenticated_read_product_tags - unauthenticated_write_checkouts - unauthenticated_read_checkouts

# .env
PUBLIC_STOREFRONT_API_TOKEN=uw_publieke_token
PUBLIC_STORE_DOMAIN=uw-winkel.myshopify.com
PRIVATE_STOREFRONT_API_TOKEN=uw_prive_token

Stap 3: Projectstructuur

my-store/
├── app/
│   ├── components/      # Herbruikbare componenten
│   ├── routes/          # Pagina's (file-based routing)
│   │   ├── _index.jsx   # Homepage
│   │   ├── products.$handle.jsx
│   │   ├── collections.$handle.jsx
│   │   └── cart.jsx
│   ├── styles/          # CSS/Tailwind
│   ├── lib/             # Utilities en helpers
│   └── root.jsx         # Hoofdlayout
├── public/              # Statische assets
├── server.js            # Ingangspunt van de server
└── hydrogen.config.js   # Hydrogen configuratie

Stap 4: Productpagina implementeren

// app/routes/products.$handle.jsx
import {useLoaderData} from '@remix-run/react';
import {json} from '@shopify/remix-oxygen';
import {
  Image,
  Money,
  ShopPayButton,
} from '@shopify/hydrogen';

const PRODUCT_QUERY = `#graphql
  query Product($handle: String!) {
    product(handle: $handle) {
      id
      title
      handle
      description
      descriptionHtml
      featuredImage {
        url
        altText
        width
        height
      }
      priceRange {
        minVariantPrice {
          amount
          currencyCode
        }
      }
      variants(first: 100) {
        nodes {
          id
          title
          availableForSale
          price {
            amount
            currencyCode
          }
          selectedOptions {
            name
            value
          }
        }
      }
      seo {
        title
        description
      }
    }
  }
`;

export async function loader({params, context}) {
  const {handle} = params;
  const {storefront} = context;
  
  const {product} = await storefront.query(PRODUCT_QUERY, {
    variables: {handle},
    cache: storefront.CacheShort(),
  });
  
  if (!product) {
    throw new Response('Not found', {status: 404});
  }
  
  return json({product});
}

export function meta({data}) {
  return [
    {title: data?.product?.seo?.title ?? data?.product?.title},
    {description: data?.product?.seo?.description ?? data?.product?.description},
  ];
}

export default function ProductPage() {
  const {product} = useLoaderData();
  const firstVariant = product.variants.nodes[0];
  
  return (
    <div className="product-page grid md:grid-cols-2 gap-8">
      <div className="product-gallery">
        {product.featuredImage && (
          <Image
            data={product.featuredImage}
            sizes="(min-width: 768px) 50vw, 100vw"
            className="w-full rounded-lg"
          />
        )}
      </div>
      
      <div className="product-details">
        <h1 className="text-3xl font-bold">{product.title}</h1>
        
        <div className="price mt-4">
          <Money data={firstVariant.price} />
        </div>
        
        <div 
          className="description mt-6 prose"
          dangerouslySetInnerHTML={{__html: product.descriptionHtml}}
        />
        
        <AddToCartButton
          variantId={firstVariant.id}
          available={firstVariant.availableForSale}
        />
        
        <ShopPayButton
          variantIds={[firstVariant.id]}
          className="mt-4"
        />
      </div>
    </div>
  );
}

Stap 5: Winkelwagen implementeren

// app/components/CartProvider.jsx
import {createContext, useContext} from 'react';
import {useFetcher} from '@remix-run/react';

const CartContext = createContext(null);

export function CartProvider({children, cart}) {
  const fetcher = useFetcher();
  
  const addToCart = (variantId, quantity = 1) => {
    fetcher.submit(
      {variantId, quantity},
      {method: 'POST', action: '/cart'}
    );
  };
  
  return (
    <CartContext.Provider value={{cart, addToCart}}>
      {children}
    </CartContext.Provider>
  );
}

export const useCart = () => useContext(CartContext);

Stap 6: Uitrollen op Oxygen

# Project koppelen met Shopify
npx shopify hydrogen link

# Uitrollen naar productie
npx shopify hydrogen deploy

De Hydrogen CLI beheert automatisch:

• Build van het project
• Optimalisatie van assets
• Uitrol naar het edge netwerk van Oxygen
• Configuratie van SSL en domeinen

Wat zijn de beperkingen en overwegingen van Shopify Hydrogen?

Geen enkele technologie is perfect, en het is cruciaal om de beperkingen te begrijpen voordat u zich committeert aan Hydrogen.

Technische beperkingen

1. Checkout op Shopify domein De Shopify checkout kan niet volledig worden gepersonaliseerd met Hydrogen. Gebruikers worden doorgestuurd naar checkout.uw-winkel.myshopify.com, wat kan beïnvloeden:

• Merkontiniteit
• Tracking en analytics
• Waargenomen gebruikerservaring

Uitzondering: Shopify Plus staat Checkout Extensibility toe voor gedeeltelijke personalisatie.

2. Beperkte ecosysteem apps Veel populaire Shopify apps (reviews, upsells, popups) zijn ontworpen voor Liquid en werken niet met Hydrogen. U moet:

• Alternatieven met API zoeken
• Aangepaste functionaliteit ontwikkelen
• Afzien van bepaalde functies

3. Steile leercurve Uw team moet beheersen:

• Moderne React en hooks
• Remix (loaders, actions, routing)
• GraphQL en de Storefront API
• Edge computing en caching strategieën

4. Totale eigendomskosten Naast de initiële ontwikkeling:

• Onderhoud van aangepaste code
• Updates van afhankelijkheden
• Geen automatische beveiligingsupdates
• Complexere testing

Zakelijke overwegingen

Wanneer GEEN gebruik maken van Hydrogen:

• Budget < $30,000 voor initiële ontwikkeling
• Intern team zonder React ervaring
• Noodzaak om te lanceren in < 2 maanden
• Kritische afhankelijkheid van specifieke Shopify apps
• Winkel met < 1,000 producten en standaardvereisten

Red flags tijdens evaluatie:

• "We willen Hydrogen omdat het modern klinkt"
• "Onze ontwikkelaar zegt dat Liquid verouderd is"
• "De concurrentie gebruikt headless"

De beslissing moet gebaseerd zijn op concrete technische vereisten en aantoonbare ROI, niet op trends.

Hoe migreren van een bestaande Liquid winkel naar Hydrogen?

De migratie van Liquid naar Hydrogen is een aanzienlijk project dat zorgvuldige planning vereist.

Aanbevolen migratiestrategie

Fase 1: Analyse (2-4 weken)

• Auditeren van huidige themavoorzieningen
• Identificeren van apps en hun compatibiliteit
• Documenteren van externe integraties
• Definiëren van MVP voor Hydrogen

Fase 2: Parallelle ontwikkeling (8-16 weken)

• Bouwen van Hydrogen storefront terwijl Liquid in productie blijft
• Implementeren van kritieke componenten eerst (PDP, PLP, winkelwagen)
• Uitgebreide testing van functionele pariteit

Fase 3: Testing en QA (2-4 weken)

• A/B testing met gedeeltelijk verkeer
• Validatie van conversies
• Performance benchmarking
• SEO audit (redirects, canonicals, sitemaps)

Fase 4: Go-live en optimalisatie (doorlopend)

• DNS migratie
• Intensieve monitoring eerste 48 uur
• Iteratie gebaseerd op echte gegevens

Behoud van SEO tijdens migratie

Kritieke punten om posities te behouden:

• Identieke URLs of 301 redirects gemapt
• Gelijkwaardige of verbeterde metadata
• Schema markup behouden
• Sitemap bijgewerkt en ingediend bij GSC
• Correcte canonical tags

Als u hulp nodig heeft bij uw migratie of evaluatie van Hydrogen, kan ons team van experts u begeleiden in het proces. Neem contact met ons op voor een gepersonaliseerd technisch advies.

Conclusie: Is Shopify Hydrogen geschikt voor uw project?

Shopify Hydrogen vertegenwoordigt de state-of-the-art in headless e-commerce ontwikkeling voor het Shopify ecosysteem. De architectuur gebaseerd op Remix, de kracht van React Server Components, en de edge hosting van Oxygen bieden technische mogelijkheden die simpelweg niet bestaan met traditionele Liquid thema's.

Echter, deze kracht komt met aanzienlijke kosten: grotere complexiteit, hoge initiële investering, en specifieke teamvereisten. De beslissing om Hydrogen te adopteren moet gebaseerd zijn op concrete technische behoeften en een eerlijke ROI-analyse.

Hydrogen is de juiste keuze wanneer:

• Performance een meetbaar concurrentievoordeel is
• U gebruikerservaringen vereist die onmogelijk zijn met Liquid
• Uw team expertise heeft in moderne React
• Het budget de investering rechtvaardigt ($50K-200K+)

Liquid blijft superieur wanneer:

• U snelheid van implementatie nodig heeft
• Het budget beperkt is
• De vereisten standaard e-commerce zijn
• U afhankelijk bent van het Shopify apps ecosysteem

In het landschap van 2026 zijn beide opties geldig en goed ondersteund door Shopify. De sleutel is om het juiste gereedschap te kiezen voor uw specifieke context, niet het meest trendy.

Veelgestelde vragen over Shopify Hydrogen

Is Shopify Hydrogen gratis?

Hydrogen als framework is open source en gratis. U heeft echter een Shopify winkel nodig (vanaf $29/maand) en de hosting op Oxygen is inbegrepen met limieten afhankelijk van uw plan. De werkelijke kosten liggen in de ontwikkeling, die doorgaans varieert tussen $30,000 en $200,000+ afhankelijk van de complexiteit.

Kan ik Hydrogen gebruiken zonder Oxygen?

Ja, Hydrogen kan worden uitgerold op elk platform dat Node.js of Cloudflare Workers ondersteunt, inclusief Vercel, Netlify, Fly.io en AWS. U verliest echter enkele specifieke optimalisaties van de native integratie met Oxygen.

Zal Hydrogen de Shopify thema's vervangen?

Nee. Shopify heeft bevestigd dat Liquid thema's de belangrijkste methode blijven voor de meeste handelaren. Hydrogen is gepositioneerd voor geavanceerde use cases die extreme personalisatie vereisen, niet als universele vervanging.

Welk technisch kennisniveau heb ik nodig voor Hydrogen?

Hydrogen vereist solide ervaring in React, vertrouwdheid met Remix of vergelijkbare frameworks, kennis van GraphQL, en begrip van headless architecturen. Het is niet geschikt voor teams zonder eerdere ervaring in moderne frontend ontwikkeling.

Hoe beïnvloedt Hydrogen de SEO van mijn winkel?

Goed geïmplementeerd kan Hydrogen de SEO aanzienlijk verbeteren dankzij betere prestaties (Core Web Vitals), volledige SSR, en totale controle over metadata. Een slechte implementatie kan echter de SEO schaden als routes, redirects en rendering niet correct worden beheerd.

Kan ik gedeeltelijk migreren naar Hydrogen?

Ja, een hybride architectuur is mogelijk waarbij bepaalde pagina's Hydrogen gebruiken terwijl andere in Liquid blijven. Dit is nuttig voor graduele migraties of om Hydrogen alleen te gebruiken op pagina's met hoge impact zoals de home of productpagina's.

Welke Shopify apps werken met Hydrogen?

Alleen apps die APIs of JavaScript SDKs bieden werken native met Hydrogen. Populaire apps zoals Klaviyo, Yotpo, Gorgias en Algolia hebben integraties. Apps die afhankelijk zijn van scriptinjectie in Liquid thema's zijn niet direct compatibel.

Hoe lang duurt het om een winkel met Hydrogen te ontwikkelen?

Een typisch Hydrogen project duurt tussen de 3 en 6 maanden van concept tot lancering, afhankelijk van de complexiteit. Dit is aanzienlijk langer dan de 1-2 maanden die typisch zijn voor personalisatie van Liquid thema's.