Blocchi personalizzati & AI
Se appartiene alla tua app, Puoi costruirlo.
Scrivi veri blocchi React Native contro i dati live di Shopify, con l'editore e l'abbonamento AI che stai già utilizzando.
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}
SOSTITUISCI CONCronaca di StorefrontHeader.tsx
Il tuo editor + la tua AI
Crea un intestazione app sostitutiva con ricerca predittiva, accesso all'account e conteggio del carrello dal vivo.
Usa il tuo abbonamento esistente · Nessun costo AI extra da Evlop Anteprima live connessaPronto a sostituire l'header dell'appiOS + Android
Crea. Assegna. Sostituisci.
Crea qualsiasi parte della tua app con Blocchi personalizzati.
Crea un nuovo Custom Block in React Native. Aggiungilo come sezione oppure assegnalo per sostituire l'header, il menu laterale, la scheda prodotto, la scheda collezione o il footer integrati nell'app.
INSERISCI CONNewArrivalsSection.tsx
Obiettivo di posizionamentoSezione personalizzataNuovo blocco inserito in questa schermata
Nuovo blocco di sezioneNewArrivalsSection.tsxNuovo blocco personalizzato · React Native
Crea un nuovo blocco sezione, poi posizionalo su qualsiasi schermata.
Costruisci la sezione come blocco React Native riutilabile a sé stante, collega i dati e i comportamenti necessari, poi inseriscila dove serve nella tua app.
01Crea nuovo blocco→02Aggiungi blocco a una schermata
ProdottiCollezioneMetafield
Usa il tuo assistente AI collegatoCrea una nuova sezione editoriale di novità con un carosello di prodotti acquistabili.
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}
Il tuo negozio è il runtime
Inserisci i dati di Shopify qualsiasi interfaccia.
I Custom Block possono leggere i dati di commercio in tempo reale e il contesto dell'acquirente, chiamare azioni native e interrogare dati aggiuntivi dell'API Storefront. Il risultato è un'interfaccia personalizzata utile, non solo decorativa.
PACCHETTO UFFICIALE@evlop/shopifyDati tipizzati · Azioni native · Aggiornamenti in tempo reale
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' });
DATI IN TEMPO REALE
Hai bisogno di altro?Interroga qualsiasi campo dell'API Storefront o collega un servizio esterno approvato.
Porta il tuo editor e la tua IA
Usa il flusso di lavoro AI ti fidi già.
Collega lo spazio di lavoro del codice Custom Blocks al tuo editor preferito, poi usa l’assistente di coding IA e l’abbonamento che già possiedi. Evlop non fa da proxy al modello, non misura i token IA, né blocca i tuoi blocchi a un unico provider.
Collega l'area di lavoro Custom Blocks all'editor in cui il tuo team lavora già.
Usa l'assistente di coding e l'account AI che hai già: Evlop non richiede un modello proprio.
Evlop non misura i token AI né aggiunge un addebito separato per l'utilizzo dell'AI al tuo piano.
Cambia editor o provider AI senza modificare il funzionamento dei tuoi Custom Blocks in Evlop.
Crea un'intestazione sostitutiva con ricerca predittiva, saluto personalizzato e contatore carrello in tempo reale.
React NativeDati ShopifyTema dell'app
L'AI COSTRUISCE PER TE→
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}
Apri l'area di lavoro Custom Blocks nell'ambiente di sviluppo che preferisci.
Lavora con il tuo account e abbonamento di coding IA esistenti—nessuna spesa extra di IA da Evlop.
Rivedi e perfeziona il blocco con i dati live di Shopify su un dispositivo reale.
Sostituisci una superficie integrata o inserisci il nuovo blocco su una schermata.
Pensato per la produzione
Libertà illimitata, con il piattaforma sottostante.
Personalizzato non significa disconnesso. Ogni blocco resta parte della stessa app nativa, dello stesso runtime commerce, design system, anteprima e flusso di pubblicazione.
React Native vero e proprio
I Custom Blocks sono componenti React nativi, non embed web: layout, interazioni e prestazioni si sentono a casa su iOS e Android.
Shopify-aware per impostazione predefinita
Usa il pacchetto Shopify di Evlop e le query Storefront per portare prodotti, collezioni, carrello, contesto cliente, metafield, metaobject e altro in qualsiasi blocco.
Connesso al sistema della tua app
Riutilizza colori, tipografia, temi, localizzazione, navigazione e azioni native dell'app invece di ricostruire queste basi.
Anteprima e pubblicazione istantanee
Prova le modifiche su un dispositivo reale, perfeziona l'esperienza e pubblica senza attendere una nuova revisione dell'app store.
Desideri comuni
Domande frequenti delle domande.
Risposte pratiche su creazione, alimentazione, anteprima e pubblicazione dei Custom Block.
Crea un nuovo blocco, poi aggiungilo come sezione o assegnalo per sostituire l'intestazione incorporata, il menu laterale, la scheda di prodotto, la scheda di raccolta o il footer dell'app. Puoi anche creare esperienze account, interfacce carrello, moduli di campagna e altre funzionalità costruite allo scopo.