Wissenszentrum/Eigene Blöcke/Artikel
Eigene Blöcke

Einführung in Custom Blocks

Aktualisiert 1. September 2025

Evlop enthält ein starkes Set an No‑Code‑Blöcken. Wenn du etwas Spezielles brauchst, kannst du deine eigenen benutzerdefinierten Blöcke hinzufügen. Wähle den Ansatz, der zu deinen Fähigkeiten und deinem Anwendungsfall passt: ein React‑Native‑Block, das innerhalb der App läuft, oder ein HTML‑Block, gebaut mit HTML, CSS, JS, Tailwind und Liquid, der in einer WebView gerendert wird.

1) Eigene Blöcke mit React Native erstellen

Was das ist
Ein React‑Native‑Block ist Teil der nativen App. Er eignet sich am besten für flüssige UI, Gesten, Animationen, Offline‑Verhalten und Geräte‑Features.

Was du nutzen kannst

  • @evlop/native-component für konsistente UI‑Primitive
  • @evlop/shopify um auf Store‑Daten wie Produkt, Kollektion, Warenkorb, Metafelder, Metaobjekte, Kunde zuzugreifen
  • Alle npm‑Pakete, die in package.json des Custom‑Block‑Editors aufgeführt sind, können importiert und verwendet werden

Wann du das wählen solltest

  • Du brauchst hohe Performance oder komplexe Interaktionen
  • Du möchtest native Navigation und Geräte‑APIs
  • Du planst, Daten zu cachen oder mit instabilen Netzwerken umzugehen

Praktische Tipps

  • Halte Block-Einstellungen einfach und serialisierbar
  • Wähle Dependencies gezielt aus, um die Bundle-Größe zu manage
  • Teste auf Home-, Produkt- und Collection-Screens
  • Prüfe Accessibility, Ladezustände und Empty States

2) Eigene Blöcke mit HTML erstellen

Was es ist
Ein HTML-Block läuft in einer WebView. Baue mit HTML, CSS, JS, Tailwind und Liquid für schnelle Iteration.

Daten und Limits

  • Nutze Liquid, um auf Shopify-Kontext zuzugreifen, z. B. das aktive Produkt oder die aktive Collection
  • Kundeninformationen sind in diesem Kontext nicht verfügbar

Navigation

  • Der Evlop Web Bridge macht aus einfachen <a href>-Links native Navigation, wenn ein passender App-Screen existiert

Wann du das wählen solltest

  • Marketing- oder Editorial-Content, der sich oft ändert
  • Leichtgewichtige Widgets, die Produkt- oder Collection-Details zeigen
  • Teams, die Tailwind und einfaches JavaScript bevorzugen

Praktische Tipps

  • Designe Mobile First mit Tailwind-Utilities
  • Halte Scripts leicht und vermeide schwere Frameworks
  • Nutze Standard-Anchors, damit der Web Bridge nativ routen kann
  • Prüfe Kontrast, Abstände und Ladezeit

Fazit

Mit Custom Blocks passt du die App an deinen Store an, ohne das Rad neu zu erfinden. Wähle React Native für Performance und tiefe Integration oder HTML für Tempo und inhaltsbasierte Widgets.