Blocs personnalisés & IA
Si cela a sa place dans votre app, vous pouvez le créer.
Écrivez de vrais blocs React Native sur des données Shopify en direct, avec l'éditeur et l'abonnement IA que vous utilisez déjà. Pas d'IA propriétaire, pas de majoration, pas de dépendance.
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}
REMPLACER AVECStorefrontHeader.tsx
Votre éditeur + votre IA
« Créez un en-tête d'app de remplacement avec recherche prédictive, accès au compte et compteur de panier en direct. »
Utilisez votre abonnement existant · Aucun frais IA supplémentaire de la part d'Evlop Aperçu en direct connectéPrêt à remplacer l'en-tête de l'appiOS + Android
Créez. Attribuez. Remplacez.
Créez n'importe quelle partie de votre app avec les blocs personnalisés.
Créez un nouveau bloc personnalisé en React Native. Ajoutez-le comme section, ou attribuez-le pour remplacer l'en-tête intégré de l'app, le menu latéral, la fiche produit, la fiche de collection ou le pied de page.
INSERT AVECNewArrivalsSection.tsx
Cible d'emplacementSection personnaliséeNouveau bloc inséré sur cet écran
Nouveau bloc de sectionNewArrivalsSection.tsxNouveau bloc personnalisé · React Native
Créez un nouveau bloc de section, puis placez-le sur n'importe quel écran.
Créez la section comme un bloc React Native réutilisable, connectez les données et comportements nécessaires, puis insérez-la où elle convient dans votre app.
01Créer un nouveau bloc→02Ajouter un bloc à un écran
ProduitsCollectionMétachamps
Utilisez votre assistant IA connectéCréez une nouvelle section éditoriale « nouveautés » avec un carrousel de produits achetables.
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}
Votre boutique est le runtime
Intégrez les données Shopify dans n'importe quelle interface.
Les blocs personnalisés peuvent lire les données e-commerce et le contexte client en temps réel, déclencher des actions natives et interroger des données supplémentaires via l'API Storefront. Résultat : une interface personnalisée réellement utile, et pas seulement décorative.
PACKAGE OFFICIEL@evlop/shopifyDonnées typées · Actions natives · Mises à jour en direct
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' });
DONNÉES EN DIRECT
Besoin d'autre chose ?Interrogez n'importe quel champ de l'API Storefront ou connectez un service externe approuvé.
Apportez votre propre éditeur et votre IA
Utilisez le flux de travail IA en lequel vous avez déjà confiance.
Connectez l'espace de code Custom Blocks à votre éditeur préféré, puis utilisez l'assistant de codage IA et l'abonnement que vous avez déjà. Evlop ne fait pas office de proxy pour le modèle, ne mesure pas les tokens IA et ne verrouille pas vos blocs à un seul fournisseur.
Connectez l'espace de code Custom Blocks à l'éditeur où votre équipe travaille déjà.
Utilisez l'assistant de codage et le compte IA que vous avez déjà — Evlop n'exige pas son propre modèle.
Evlop ne facture pas les tokens AI ni n'ajoute de frais d'utilisation AI distincts à votre plan.
Changez d'éditeur ou de fournisseur AI sans modifier le fonctionnement de vos Custom Blocks dans Evlop.
Créez un header de remplacement avec recherche prédictive, message de bienvenue personnalisé et compteur de panier en direct.
React NativeDonnées ShopifyThème de l'app
VOTRE IA CONSTRUIT→
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}
Ouvrez l'espace de travail Custom Blocks dans l'environnement de développement que vous préférez.
Travaillez avec votre compte et abonnement de codage IA existants—aucune facture IA supplémentaire de la part d'Evlop.
Vérifiez et affinez le bloc avec les données Shopify en direct sur un appareil réel.
Remplacez une surface intégrée ou insérez le nouveau bloc sur un écran.
Conçu pour la production
Une liberté totale, avec la plateforme en dessous.
Personnalisé ne veut pas dire déconnecté. Chaque bloc reste partie intégrante de la même app native, du même runtime commerce, du même système de design, de la même prévisualisation et du même flux de publication.
Du vrai React Native
Les Custom Blocks sont des composants React natifs—pas des intégrations web—pour une mise en page, des interactions et des performances parfaitement à l'aise sur iOS et Android.
Compatible Shopify par défaut
Utilisez le package Shopify d'Evlop et les requêtes Storefront pour intégrer produits, collections, panier, contexte client, méta-champs, méta-objets et bien plus dans n'importe quel bloc.
Connecté au système de votre application
Réutilisez les couleurs, la typographie, les thèmes, la localisation, la navigation et les actions natives de l'app au lieu de reconstruire ces fondations.
Prévisualisez et publiez instantanément
Testez vos modifications sur un vrai appareil, affinez l'expérience et publiez sans attendre une nouvelle validation sur l'app store.
Requêtes courantes
Questions fréquentes.
Des réponses concrètes sur la création, l'alimentation, la prévisualisation et la publication de Custom Blocks.
Créez un nouveau bloc, puis ajoutez-le comme section ou assignez-le pour remplacer l'en-tête, le menu latéral, la fiche produit, la carte de collection ou le pied de page intégrés de l'app. Vous pouvez également créer des expériences de compte, des interfaces de panier, des modules de campagne et d'autres fonctionnalités sur mesure.