Central de conhecimento/Blocos personalizados/Artigo
Blocos personalizados

Introdução aos Blocos Personalizados

Atualizado 1 de setembro de 2025

O Evlop inclui um conjunto robusto de blocos no-code. Quando você precisar de algo específico, pode adicionar seus próprios blocos personalizados. Escolha a abordagem que combina com suas habilidades e caso de uso: um bloco React Native que roda dentro do app, ou um bloco HTML construído com HTML, CSS, JS, Tailwind e Liquid que é renderizado em uma WebView.

1) Criando blocos personalizados com React Native

O que é
Um bloco React Native faz parte do app nativo. É ideal para UI fluida, gestos, animações, comportamento offline e recursos do dispositivo.

O que você pode usar

  • @evlop/native-component para primitivas de UI coerentes
  • @evlop/shopify para acessar dados da loja como produto, coleção, carrinho, metafields, metaobjects e cliente
  • Todos os pacotes npm listados no package.json do editor de blocos personalizados podem ser importados e usados

Quando escolher esta opção

  • Você precisa de alto desempenho ou interações complexas
  • Você quer navegação nativa e APIs do dispositivo
  • Você pretende armazenar dados em cache ou lidar com redes instáveis

Dicas práticas

  • Mantenha as configurações de bloco simples e serializáveis
  • Seja criterioso com as dependências para controlar o tamanho do bundle
  • Teste nas telas de home, produto e coleção
  • Valide acessibilidade, carregamento e estados vazios

2) Criando blocos personalizados com HTML

O que é
Um bloco HTML roda dentro de uma WebView. Desenvolva com HTML, CSS, JS, Tailwind e Liquid para iterar rapidamente.

Dados e limites

  • Use Liquid para acessar o contexto do Shopify, como o produto ativo ou a coleção ativa
  • As informações do cliente não estão disponíveis nesse contexto

Navegação

  • A ponte web da Evlop converte links comuns <a href> em navegação nativa quando existe uma tela correspondente no app

Quando escolher essa opção

  • Conteúdo de marketing ou editorial que muda com frequência
  • Widgets leves que exibem detalhes de produto ou coleção
  • Equipes que preferem Tailwind e JavaScript simples

Dicas práticas

  • Desenhe com foco em mobile usando utilitários do Tailwind
  • Mantenha os scripts leves e evite frameworks pesados
  • Use âncoras padrão para que a ponte web faça o roteamento nativo
  • Verifique contraste, espaçamento e tempo de carregamento

Conclusão

Blocos personalizados permitem adaptar o app à sua loja sem reinventar a roda. Escolha React Native para desempenho e integração profunda, ou HTML para velocidade e widgets focados em conteúdo.