Evlop incluye un sólido conjunto de bloques no-code. Cuando necesites algo específico, puedes añadir tus propios bloques personalizados. Elige el enfoque que se ajuste a tus habilidades y a tu caso de uso: un bloque React Native que se ejecuta dentro de la app, o un bloque HTML creado con HTML, CSS, JS, Tailwind y Liquid que se muestra en un WebView.
1) Crear bloques personalizados con React Native
Qué es
Un bloque React Native forma parte de la app nativa. Es ideal para interfaces fluidas, gestos, animaciones, comportamiento sin conexión y funciones del dispositivo.
Qué puedes usar
@evlop/native-componentpara primitivas de UI coherentes@evlop/shopifypara acceder a los datos de la tienda como producto, colección, carrito, metafields, metaobjects y cliente- Todos los paquetes npm listados en el
package.jsondel editor de bloques personalizados se pueden importar y usar
Cuándo elegir esta opción
- Necesitas alto rendimiento o interacciones complejas
- Quieres navegación nativa y APIs del dispositivo
- Planeas almacenar datos en caché o gestionar redes inestables
Consejos prácticos
- Mantén la configuración de los bloques simple y serializable
- Sé selectivo con las dependencias para controlar el tamaño del bundle
- Prueba en las pantallas de inicio, producto y colección
- Valida la accesibilidad, la carga y los estados vacíos
2) Crear bloques personalizados con HTML
Qué es
Un bloque HTML se ejecuta dentro de un WebView. Crea con HTML, CSS, JS, Tailwind y Liquid para iterar rápido.
Datos y límites
- Usa Liquid para acceder al contexto de Shopify, como el producto o la colección activos
- La información del cliente no está disponible en este contexto
Navegación
- El puente web de Evlop convierte los enlaces
<a href>normales en navegación nativa cuando existe una pantalla de la app correspondiente
Cuándo elegir esta opción
- Contenido de marketing o editorial que cambia con frecuencia
- Widgets ligeros que muestran detalles de productos o colecciones
- Equipos que prefieren Tailwind y JavaScript sencillo
Consejos prácticos
- Diseña primero para móvil con utilidades de Tailwind
- Mantén los scripts ligeros y evita frameworks pesados
- Usa anchors estándar para que el puente web pueda enrutar de forma nativa
- Revisa el contraste, el espaciado y el tiempo de carga
Para terminar
Los bloques personalizados te permiten adaptar la app a tu tienda sin reinventar la rueda. Elige React Native para rendimiento e integración profunda, o HTML para velocidad y widgets centrados en contenido.