Bloques personalizados y AI
Si pertenece a tu app, lo puedes crear.
Escribe bloques reales de React Native con datos en vivo de Shopify, usando el editor y la suscripción de IA que ya tienes. Sin IA propietaria, sin recargos, sin dependencia.
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}
REEMPLAZAR CONStorefrontHeader.tsx
Tu editor + tu IA
“Crea un encabezado de app de reemplazo con búsqueda predictiva, acceso a la cuenta y contador de carrito en vivo.”
Usa tu suscripción actual · Sin cargos extra de IA por parte de Evlop Vista previa en vivo conectadaListo para reemplazar el encabezado de la appiOS + Android
Crea. Asigna. Reemplaza.
Crea cualquier parte de tu app con Custom Blocks.
Crea un nuevo Custom Block en React Native. Agrégalo como sección o asígnalo para reemplazar el encabezado integrado de la app, el menú lateral, la tarjeta de producto, la tarjeta de colección o el pie de página.
INSERT CONNewArrivalsSection.tsx
Destino de ubicaciónSección personalizadaNuevo bloque insertado en esta pantalla
Nuevo bloque de secciónNewArrivalsSection.tsxNuevo bloque personalizado · React Native
Crea un nuevo bloque de sección y colócalo en cualquier pantalla.
Crea la sección como su propio bloque reutilizable de React Native, conecta los datos y el comportamiento que necesita y luego insértalo donde corresponda en tu app.
01Crear nuevo bloque→02Añadir bloque a una pantalla
ProductosColecciónMetafields
Usa tu asistente de IA conectadoCrea una nueva sección de novedades editorial con un carrusel de productos comprables.
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}
Tu tienda es el runtime
Lleva los datos de Shopify a cualquier interfaz.
Los bloques personalizados pueden leer datos de comercio y contexto del comprador en tiempo real, ejecutar acciones nativas y consultar datos adicionales de la Storefront API. El resultado es una interfaz personalizada que aporta valor, no solo decoración.
PAQUETE OFICIAL@evlop/shopifyDatos tipados · Acciones nativas · Actualizaciones en vivo
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' });
DATOS EN VIVO
¿Necesitas otra cosa?Consulta cualquier campo de la Storefront API o conecta un servicio externo aprobado.
Usa tu propio editor e IA
Usa el flujo de trabajo de IA en el que ya confías.
Conecta el espacio de código de Custom Blocks a tu editor preferido y usa el asistente de programación con IA y la suscripción que ya tienes. Evlop no actúa como intermediario del modelo, no mide tokens de IA ni limita tus bloques a un solo proveedor.
Conecta el espacio de código de Custom Blocks al editor donde tu equipo ya trabaja.
Usa el asistente de programación y la cuenta de IA que ya tienes: Evlop no requiere su propio modelo.
Evlop no mide tokens de IA ni añade un cargo separado por uso de IA a tu plan.
Cambia de editor o de proveedor de IA sin alterar el funcionamiento de tus Custom Blocks en Evlop.
Crea un header de reemplazo con búsqueda predictiva, saludo al cliente y contador del carrito en tiempo real.
React NativeDatos de ShopifyTema de la app
TU IA CONSTRUYE→
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}
Abre el espacio de trabajo de Custom Blocks en el entorno de desarrollo que prefieras.
Trabaja con tu cuenta y suscripción de IA existentes, sin coste adicional de Evlop.
Revisa y perfecciona el bloque con datos reales de Shopify en un dispositivo real.
Reemplaza una superficie integrada o inserta el nuevo bloque en una pantalla.
Listo para producción
Libertad ilimitada, con la plataforma debajo.
Personalizado no significa desconectado. Cada bloque sigue formando parte de la misma app nativa, el mismo runtime de comercio, sistema de diseño, vista previa y flujo de publicación.
React Native real
Los Custom Blocks son componentes React nativos, no incrustaciones web, así que el diseño, las interacciones y el rendimiento se sienten como en casa en iOS y Android.
Integrado con Shopify por defecto
Usa el paquete de Shopify de Evlop y las consultas de Storefront para llevar productos, colecciones, carrito, contexto del cliente, metafields, metaobjects y más a cualquier bloque.
Conectado al sistema de tu app
Reutiliza los colores, la tipografía, los temas, la localización, la navegación y las acciones nativas de la app en lugar de reconstruir esas bases.
Previsualiza y publica al instante
Ejecuta los cambios en un dispositivo de prueba real, perfecciona la experiencia y publica sin esperar una nueva revisión de la app store.
Consultas frecuentes
Preguntas frecuentes.
Respuestas prácticas sobre cómo crear, alimentar, previsualizar y publicar Custom Blocks.
Crea un bloque nuevo y agrégalo como sección o asígnalo para reemplazar el header, el menú lateral, la tarjeta de producto, la tarjeta de colección o el footer integrados de la app. También puedes crear experiencias de cuenta, interfaces de carrito, módulos de campaña y otras funcionalidades a medida.