Blocos Personalizados & IA
Se isso faz parte do seu app, você pode construí-lo.
Escreva blocos reais de React Native usando dados ao vivo da Shopify, com o editor e a assinatura de IA que você já usa. Sem IA proprietária, sem marcação, sem bloqueio.
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}
SUBSTITUIR COMStorefrontHeader.tsx
Seu editor + sua IA
“Crie um cabeçalho de app substituto com busca preditiva, acesso à conta e contagem de carrinho ao vivo.”
Use sua assinatura atual · Sem cobrança extra de IA da Evlop Pré-visualização ao vivo conectadaPronto para substituir o cabeçalho do appiOS + Android
Crie. Atribua. Substitua.
Crie qualquer parte do seu app com Blocos Personalizados.
Crie um novo Bloco Personalizado em React Native. Adicione-o como uma seção ou atribua-o para substituir o cabeçalho, o menu lateral, o card de produto, o card de coleção ou o rodapé nativos do app.
INSERIR COMNewArrivalsSection.tsx
Alvo de posicionamentoSeção personalizadaNovo bloco inserido nesta tela
Novo bloco de seçãoNewArrivalsSection.tsxNovo Bloco Personalizado · React Native
Crie um novo bloco de seção e, em seguida, posicione‑o em qualquer tela.
Construa a seção como um bloco reutilizável do React Native, conecte os dados e o comportamento necessários e, então, insira‑a onde quiser no seu app.
01Criar novo bloco→02Adicionar bloco a uma tela
ProdutosColeçãoMetacampos
Use seu assistente de IA conectadoCrie uma nova seção editorial de novidades com um corredor de produtos compráveis.
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}
Sua loja é o runtime
Leve os dados do Shopify para qualquer interface.
Blocos Personalizados podem ler o comércio ao vivo e o contexto do comprador, chamar ações nativas e consultar dados adicionais da Storefront API. O resultado é uma UI personalizada que é útil — não apenas decorativa.
PACOTE OFICIAL@evlop/shopifyDados tipados · Ações nativas · Atualizações ao 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' });
DADOS AO VIVO
Precisa de algo mais?Consulte qualquer campo da Storefront API ou conecte um serviço externo aprovado.
Traga seu próprio editor e IA
Use o fluxo de trabalho de IA que você já confia.
Conecte o workspace de código Custom Blocks ao seu editor preferido e, em seguida, use o assistente de codificação de IA e a assinatura que você já possui. A Evlop não faz proxy do modelo, não mede tokens de IA nem bloqueia seus blocos a um único provedor.
Conecte o workspace de código Custom Blocks ao editor onde sua equipe já trabalha.
Use o assistente de codificação e a conta de IA que você já tem — a Evlop não exige seu próprio modelo.
A Evlop não cobra tokens de IA nem adiciona uma taxa separada de uso de IA ao seu plano.
Troque de editor ou provedor de IA sem alterar o funcionamento dos seus Custom Blocks na Evlop.
Crie um header substituto com busca preditiva, saudação ao cliente e contagem de carrinho em tempo real.
React Nativedados da ShopifyTema do app
SEU APP CRIADO POR IA→
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}
Abra o workspace de Custom Blocks no ambiente de desenvolvimento que você preferir.
Trabalhe com sua conta e assinatura de IA já existentes—sem custo extra de IA da Evlop.
Revise e ajuste o bloco com dados reais do Shopify em um dispositivo físico.
Substitua uma superfície integrada ou insira o novo bloco em uma tela.
Pronto para produção
Liberdade ilimitada, com a plataforma por baixo.
Personalizado não significa desconectado. Cada bloco continua fazendo parte do mesmo app nativo, runtime de comércio, sistema de design, preview e fluxo de publicação.
React Native de verdade
Custom Blocks são componentes React nativos—não embeds web—então layout, interações e performance parecem naturais no iOS e no Android.
Integrado ao Shopify por padrão
Use o pacote Shopify da Evlop e as queries da Storefront para trazer produtos, coleções, carrinho, contexto do cliente, metafields, metaobjects e mais para qualquer bloco.
Conectado ao sistema do seu app
Reaproveite as cores, a tipografia, os temas, a localização, a navegação e as ações nativas do app em vez de reconstruir essas bases.
Pré-visualize e publique na hora
Teste as alterações em um dispositivo real, ajuste a experiência e publique sem esperar uma nova revisão na app store.
Perguntas frequentes
Respostas para as dúvidas
Orientações práticas sobre criar, alimentar, pré-visualizar e publicar Custom Blocks.
Crie um novo bloco e adicione-o como seção ou atribua a ele a substituição do cabeçalho, do menu lateral, do card de produto, do card de coleção ou do rodapé nativos do app. Você também pode criar experiências de conta, interfaces de carrinho, módulos de campanha e outras funcionalidades sob medida.