Custom Blocks & AI
Als het in je app thuishoort, kun je het bouwen.
Schrijf echte React Native blocks met live Shopify-data, met de editor en het AI-abonnement die je al gebruikt. Geen eigen AI, geen opslag, geen 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}
VERVANGEN METStorefrontHeader.tsx
Jouw editor + jouw AI
“Maak een vervangende app-header met voorspellend zoeken, accounttoegang en live winkelwagenteller.”
Gebruik je bestaande abonnement · Geen extra AI-kosten van Evlop Live preview verbondenKlaar om de app-header te vervangeniOS + Android
Maken. Toewijzen. Vervangen.
Bouw elk onderdeel van je app met Custom Blocks.
Maak een nieuwe Custom Block in React Native. Voeg deze toe als sectie, of wijs deze toe om de ingebouwde header, het zijmenu, de productkaart, de collectiekaart of de footer van de app te vervangen.
INSERT METNewArrivalsSection.tsx
PlaatsingsdoelAangepaste sectieNieuw blok ingevoegd op dit scherm
Nieuw sectieblokNewArrivalsSection.tsxNieuw Custom Block · React Native
Maak een nieuw sectieblok en plaats het op elk gewenst scherm.
Bouw de sectie als een eigen herbruikbaar React Native-blok, koppel de data en het gedrag dat het nodig heeft en voeg het in waar het thuishoort in je app.
01Nieuw blok maken→02Blok toevoegen aan een scherm
ProductenCollectieMetafields
Gebruik je verbonden AI-assistentMaak een nieuwe redactionele arrivals-sectie met een shoppable productrail.
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}
Jouw store is de runtime
Breng Shopify-data in elke interface.
Custom Blocks kunnen live commerce- en shoppercontext lezen, native acties aanroepen en extra Storefront API-data opvragen. Het resultaat is custom UI die écht nuttig is—niet alleen decoratief.
OFFICIEEL PAKKET@evlop/shopifyGetypte data · Native acties · 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 DATA
Heb je iets anders nodig?Bevraag elk Storefront API-veld of verbind een goedgekeurde externe dienst.
Breng je eigen editor en AI mee
Gebruik de AI-workflow die je al vertrouwt.
Verbind de Custom Blocks-code-werkruimte met je favoriete editor en gebruik de AI-coding-assistent en het abonnement die je al hebt. Evlop proxyt het model niet, meet AI-tokens niet en vergrendelt je blocks niet aan één provider.
Verbind de Custom Blocks-code-werkruimte met de editor waar je team al werkt.
Gebruik de coding-assistent en het AI-account die je al hebt—Evlop vereist geen eigen model.
Evlop metered geen AI-tokens en rekent geen aparte AI-kosten op je plan.
Wissel editors of AI-providers zonder dat je Custom Blocks in Evlop veranderen.
Maak een vervangende header met voorspellende zoekfunctie, klantbegroeting en live winkelwagenteller.
React NativeShopify-dataApp-thema
JOUW AI BOUWT→
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}
Open de Custom Blocks-werkruimte in de ontwikkelomgeving die jij het liefst gebruikt.
Werk met je bestaande AI-account en abonnement—geen extra AI-rekening van Evlop.
Bekijk en verfijn het blok met live Shopify-data op een echt apparaat.
Vervang een ingebouwd onderdeel of plaats het nieuwe blok op een scherm.
Gebouwd voor productie
Onbeperkte vrijheid, met het platform eronder.
Custom betekent niet losgekoppeld. Elk blok blijft deel uitmaken van dezelfde native app, commerce-runtime, hetzelfde designsysteem, dezelfde preview en dezelfde publicatieworkflow.
Echt React Native
Custom Blocks zijn native React-componenten—geen web-embeds—zodat layout, interacties en performance zich thuisvoelen op iOS en Android.
Van nature Shopify-bewust
Gebruik Evlop’s Shopify-package en Storefront-queries om producten, collecties, winkelwagen, klantcontext, metafields, metaobjects en meer in elk blok te brengen.
Verbonden met je app-systeem
Hergebruik de kleuren, typografie, thema's, lokalisatie, navigatie en native acties van de app in plaats van die basis opnieuw op te bouwen.
Direct previewen en publiceren
Test wijzigingen op een echt testapparaat, verfijn de ervaring en publiceer zonder te wachten op een nieuwe app-store review.
Veelgestelde vragen
Veelgestelde vragen.
Praktische antwoorden over het bouwen, aandrijven, previewen en publiceren van Custom Blocks.
Bouw een nieuw blok en voeg het toe als sectie of wijs het toe om de ingebouwde header, het zijmenu, de productkaart, de collectiekaart of de footer van de app te vervangen. Je kunt ook account-ervaringen, winkelwageninterfaces, campagnemodules en andere doelgerichte functionaliteit maken.