Documentação

Shopify

Instale o widget Agentkit em um tema Shopify usando o código gerado completo.

Adicione o widget Agentkit à sua loja Shopify colocando o código de incorporação completo e gerado em theme.liquid.

No Agentkit, abra Canais → Incorporação no site → Widget de chat, ative o canal e copie o código completo. Ele contém duas tags de script: uma inicialização inline e um carregador assíncrono. Mantenha as duas. A Shopify recomenda duplicar o tema antes de editar o código.

Método 1: Editar theme.liquid

Adicione o widget em todo o site editando seu tema publicado:

  1. No admin do Shopify, vá para Loja virtual → Temas.
  2. Na linha do seu tema ativo, clique no menu ... (Ações) → Editar código.
  3. Na pasta Layout à esquerda, abra theme.liquid.
  4. Role até o final e cole seu código de incorporação imediatamente antes da tag de fechamento </body>.
  5. Clique em Salvar.

Cole o código copiado sem alterações. Depois de salvar, confirme que as duas tags <script> aparecem no código-fonte renderizado da loja.

O widget aparece em todas as páginas da loja — produto, coleção, carrinho, início.

Método 2: Duplicar Primeiro, Depois Editar (Recomendado)

Se você quiser uma reversão segura:

  1. Loja virtual → Temas.
  2. No seu tema ativo, clique no menu ... (três pontos) → Duplicar. Uma cópia aparece no final da lista de temas.
  3. Edite o theme.liquid da duplicata conforme acima.
  4. Clique no menu ... na duplicata → Visualizar para testar.
  5. Quando estiver satisfeito, clique no menu ... → Publicar para colocá-la no ar.

Instalação em uma única página

Para mostrar o widget em apenas uma página, peça a um desenvolvedor de temas que limite as duas tags geradas a um modelo de página. Confirme que aparecem só nela. O editor de texto das páginas Shopify não é um método de instalação verificado para este widget.

Requisitos

  • Você precisa de acesso ao código do tema. Um tema pago em teste só pode ser editado após a compra. Sua função precisa das permissões Themes e Edit code. Consulte o guia da Shopify para editar o código do tema.
  • Mantenha o canal Widget de chat do Agentkit ativado ao testar a loja pública.
  • Se as restrições de domínio estiverem ativadas, permita a origem exata da prévia do tema e a da loja pública. Remova a origem temporária da prévia após o teste.

Depois de Publicar

Se o widget não aparecer na loja pública:

  1. Force a atualização da página (⌘+Shift+R no Mac, Ctrl+F5 no Windows).
  2. Abra o site em uma janela anônima.
  3. Verifique o console do navegador para erros.

Solução de Problemas

O widget não aparece.

  • Confirme que você editou o tema ativo (ou publicou a duplicata).
  • Confirme que as duas tags de script geradas estão antes de </body> no código-fonte renderizado da loja.
  • Confirme que as restrições de domínio do Agentkit permitem o domínio da loja.

O widget se sobrepõe ao chat ou à gaveta de carrinho do Shopify.

  • Ajuste a posição do widget nas configurações de Design do seu agente.

O widget aparece no editor, mas não na loja ativa.

  • Certifique-se de ter clicado em Salvar depois de colar — o editor de código não salva automaticamente.

Testes

  1. Abra sua loja em uma janela anônima.
  2. Procure o balão de chat no canto.
  3. Clique para abrir e enviar uma mensagem de teste.
  4. Confirme que as duas tags de script geradas estão no código-fonte da página.

Conecte Uma Loja Para Consultas de Pedidos e Pesquisa de Produtos

Incorporar o widget e conectar sua loja são duas coisas separadas. O código de incorporação acima coloca o widget de chat na sua loja. Uma conexão separada com o Shopify — feita na aba Ações → Integrações do seu agente — permite adicionalmente que o agente pesquise seu catálogo em tempo real e consulte o status de um pedido dentro da conversa.

Você pode usar qualquer uma das duas isoladamente. Use apenas a incorporação se o agente deve responder apenas com base no seu conteúdo de treinamento, e adicione a conexão da loja quando quiser dados de produtos e pedidos em tempo real.

Conectar a loja fornece apenas as credenciais, mas não ativa nada por conta própria: depois, adicione as ações Pesquisar produtos e Consultar status do pedido na aba Ações do seu agente e ative cada uma que você quiser que o agente use.

Configurar ações do Shopify →

Próximos Passos