Kenniscentrum/Aangepaste blokken/Artikel
Aangepaste blokken

Introductie tot Custom Blocks

Bijgewerkt 1 september 2025

Evlop bevat een sterke set no-code blokken. Heb je iets specifieks nodig, dan kun je je eigen custom blokken toevoegen. Kies de aanpak die past bij jouw vaardigheden en use case: een React Native blok dat in de app draait, of een HTML blok gebouwd met HTML, CSS, JS, Tailwind en Liquid dat in een WebView wordt gerenderd.

1) Custom blokken maken met React Native

Wat het is
Een React Native blok maakt deel uit van de native app. Het is ideaal voor vloeiende UI, gebaren, animaties, offline gedrag en apparaatfuncties.

Wat je kunt gebruiken

  • @evlop/native-component voor consistente UI-primitives
  • @evlop/shopify om toegang te krijgen tot winkelgegevens zoals product, collectie, winkelwagen, metafields, metaobjects en klant
  • Alle npm-packages die in package.json van de custom block editor staan, kun je importeren en gebruiken

Wanneer kies je dit

  • Je hebt hoge performance of complexe interacties nodig
  • Je wilt native navigatie en device API's
  • Je wilt data cachen of wisselende netwerken afhandelen

Praktische tips

  • Houd blokinstellingen eenvoudig en serialiseerbaar
  • Wees selectief met dependencies om de bundelgrootte te beheersen
  • Test op de home-, product- en collectie-schermen
  • Valideer toegankelijkheid, laadtoestanden en lege toestanden

2) Aangepaste blokken maken met HTML

Wat het is
Een HTML-blok draait binnen een WebView. Bouw met HTML, CSS, JS, Tailwind en Liquid voor snelle iteratie.

Data en limieten

  • Gebruik Liquid om toegang te krijgen tot Shopify-context zoals het actieve product of de actieve collectie
  • Klantgegevens zijn in deze context niet beschikbaar

Navigatie

  • De Evlop web bridge zet gewone <a href>-links om naar native navigatie wanneer er een bijpassend app-scherm bestaat

Wanneer kies je dit

  • Marketing- of redactionele content die vaak verandert
  • Lichtgewicht widgets die product- of collectiedetails tonen
  • Teams die liever met Tailwind en eenvoudige JavaScript werken

Praktische tips

  • Ontwerp mobile first met Tailwind utilities
  • Houd scripts licht en vermijd zware frameworks
  • Gebruik standaard anchors zodat de web bridge native kan routeren
  • Controleer contrast, witruimte en laadtijd

Tot slot

Met custom blocks pas je de app aan op jouw store zonder het wiel opnieuw uit te vinden. Kies React Native voor performance en diepe integratie, of HTML voor snelheid en contentgedreven widgets.