Custom Blocks & KI
Was in deine App gehört, kannst du bauen.
Schreibe echte React Native Blocks gegen Live-Shopify-Daten, mit dem Editor und dem KI-Abo, das du bereits nutzt. Keine proprietäre KI, kein Aufschlag, kein Lock-in.
01import { useCart } from '@evlop/shopify';02import { View, Pressable } from 'react-native';0304export function StorefrontHeader() {05 const cart = useCart();06 return <HeaderShell>07 <PredictiveSearch />08 <AccountButton />09 <CartButton count={cart.lines?.length ?? 0} />10 </HeaderShell>;11}
ERSETZEN MITStorefrontHeader.tsx
Dein Editor + deine KI
„Erstelle einen Ersatz-App-Header mit prädiktiver Suche, Kontozugriff und Live-Warenkorbzähler.“
Nutze dein bestehendes Abo · Keine zusätzlichen AI-Kosten von Evlop Live-Vorschau verbundenBereit, den App-Header zu ersetzeniOS + Android
Erstellen. Zuweisen. Ersetzen.
Baue jeden Teil deiner App mit Custom Blocks.
Erstelle einen neuen Custom Block in React Native. Füge ihn als Section hinzu oder weise ihn zu, um den integrierten Header, das Side Menu, die Product Card, die Collection Card oder den Footer der App zu ersetzen.
EINFÜGEN MITNewArrivalsSection.tsx
Ziel-PositionierungEigene SectionNeuer Block auf diesem Bildschirm eingefügt
Neuer Abschnitts-BlockNewArrivalsSection.tsxNeuer Custom Block · React Native
Erstelle einen neuen Abschnitts-Block und platziere ihn auf einem beliebigen Bildschirm.
Baue den Abschnitt als eigenen wiederverwendbaren React Native Block, verbinde die benötigten Daten und Verhaltensweisen und füge ihn dann dort ein, wo er in deiner App hingehört.
01Neuen Block erstellen→02Block zu einem Screen hinzufügen
ProdukteKategorieMetafelder
Nutze deinen verbundenen KI-AssistentenErstelle eine neue Editorial-Neuheiten-Sektion mit einer shoppable Produktreihe.
01import { useProducts } from '@evlop/shopify';02import { View } from 'react-native';0304export function NewArrivalsSection() {05 const products = useProducts({06 query: 'tag:new-arrival'07 });0809 return <EditorialRail products={products} />;10}
Dein Store ist die Runtime
Bringe Shopify-Daten in jede Oberfläche.
Custom Blocks können Live-Commerce- und Shopper-Kontext lesen, native Aktionen aufrufen und zusätzliche Storefront-API-Daten abfragen. Das Ergebnis ist individuelle UI, die wirklich nützlich ist – nicht nur dekorativ.
OFFIZIELLES PAKET@evlop/shopifyTypisierte Daten · Native Aktionen · Live-Updates
01import {02 useCart, useProducts, useMetaobjects,03 useStorefrontQuery04} from '@evlop/shopify';0506const cart = useCart();07const products = useProducts({ query: 'tag:editorial' });08const customer = useStorefrontQuery(CUSTOMER_QUERY);09const stories = useMetaobjects({ metaobjectType: 'story' });
LIVE-DATEN
Du brauchst etwas anderes?Frage jedes Storefront-API-Feld ab oder verbinde einen zugelassenen externen Dienst.
Bring deinen eigenen Editor und KI mit
Nutze den KI-Workflow, dem du bereits vertraust.
Verbinde den Custom Blocks Code-Workspace mit deinem bevorzugten Editor und nutze den KI-Coding-Assistenten und das Abo, die du bereits hast. Evlop leitet das Modell nicht als Proxy weiter, misst keine KI-Tokens und bindet deine Blocks an keinen einzigen Anbieter.
Verbinde den Custom Blocks Code-Workspace mit dem Editor, in dem dein Team bereits arbeitet.
Nutze den Coding-Assistenten und das KI-Konto, das du bereits hast – Evlop erfordert kein eigenes Modell.
Evlop misst keine AI-Tokens und berechnet keine separaten AI-Nutzungskosten auf deinem Plan.
Wechsle Editoren oder AI-Provider, ohne dass sich an der Funktionsweise deiner Custom Blocks in Evlop etwas ändert.
Erstelle einen Ersatz-Header mit prädiktiver Suche, Kundenbegrüßung und Live-Warenzähler.
React NativeShopify-DatenApp-Theme
DEINE KI BAUT→
01import { useCart } from '@evlop/shopify';02import { View, Pressable } from 'react-native';0304export function StorefrontHeader() {05 const cart = useCart();06 return <HeaderShell>07 <PredictiveSearch />08 <CustomerGreeting />09 <CartButton count={cart.lines?.length ?? 0} />10 </HeaderShell>;11}
Öffne den Custom-Blocks-Workspace in der Entwicklungsumgebung deiner Wahl.
Arbeite mit deinem bestehenden KI-Konto und Abo – keine zusätzliche KI-Rechnung von Evlop.
Überprüfe und verfeinere den Block anhand von Live‑Shopify‑Daten auf einem echten Gerät.
Ersetze eine integrierte Oberfläche oder füge den neuen Block auf einem Bildschirm ein.
Für die Produktion gebaut
Uneingeschränkte Freiheit, mit der Plattform darunter.
Custom bedeutet nicht getrennt. Jeder Block bleibt Teil derselben nativen App, des Commerce‑Runtimes, des Design‑Systems, der Vorschau und des Veröffentlichungs‑Workflows.
Echtes React Native
Custom Blocks sind native React‑Komponenten – keine Web‑Einbettungen – so fühlen sich Layout, Interaktionen und Performance auf iOS und Android zu Hause an.
Standardmäßig Shopify‑aware
Nutze das Shopify‑Paket von Evlop und Storefront‑Abfragen, um Produkte, Kollektionen, Warenkorb, Kunden‑Kontext, Metafelder, Metaobjekte und mehr in jeden Block zu bringen.
Verbunden mit deinem App‑System
Verwende die Farben, Typografie, Themes, Lokalisierung, Navigation und nativen Aktionen der App erneut, anstatt diese Grundlagen neu zu bauen.
Vorschau und sofort veröffentlichen
Führe Änderungen auf einem echten Testgerät aus, verfeinere das Erlebnis und veröffentliche, ohne auf eine neue App‑Store‑Überprüfung warten zu müssen.
Häufige Anfragen
Häufig gestellte Fragen.
Praktische Antworten zum Erstellen, Bereitstellen, Vorschauen und Veröffentlichen von Custom Blocks.
Erstelle einen neuen Block, füge ihn dann als Abschnitt hinzu oder weise ihn zu, um die integrierte Kopfzeile, das Seitenmenü, die Produktkarte, die Kategorieseite‑Karte oder die Fußzeile der App zu ersetzen. Du kannst außerdem Konto‑Erlebnisse, Warenkorb‑Interfaces, Kampagnen‑Module und andere zweckgebundene Funktionen erstellen.