Como criar um assistente de compras com IA para Shopify

Um assistente de compras com IA para Shopify ajuda um visitante a descrever o que precisa, pesquisa seu catálogo e explica um pequeno conjunto de produtos correspondentes. Neste tutorial, você criará um assistente que pergunta sobre preferências de uso, compara snowboards dentro de um orçamento e verifica uma cor ou tamanho solicitado antes de fazer uma afirmação sobre disponibilidade.

O exemplo é Quickboards, uma loja fictícia de snowboards. Criamos seu agente em um Quickchat AI App executado localmente, conectamos a um catálogo real de demonstração da Shopify e gravamos as conversas abaixo. Os cards de produto contêm imagens reais do catálogo e preços de demonstração. A arte alpina é uma ilustração editorial gerada por IA, não outro produto à venda.

Você também aprenderá a inspecionar as ferramentas por trás de uma resposta, testar o assistente em lotes e, opcionalmente, acompanhar um carrinho até AI-Assisted Revenue. O exemplo de atribuição usa um pedido local de demonstração claramente identificado, não uma venda real.

A experiência final é uma página dedicada de localizador de produtos com uma conversa inline:

A página de demonstração executada localmente usa o Quickchat AI Embed real e o catálogo ativo da Shopify. Não é uma captura de tela de um tema publicado da Shopify. Uma visão mais próxima das recomendações aparece na seção de testes.

A verificação importante vem depois que a conexão funciona. Nosso catálogo mencionava comprimentos de 144–160 cm em uma descrição, mas não expunha uma opção Size selecionável. O teste de variante mostra como o agente lida com essa lacuna sem prometer uma prancha de 156 cm.

O que você criará e do que precisa?

Você criará um localizador de produtos conversacional que coleta três preferências úteis, mostra no máximo duas recomendações e permite que o comprador refine a escolha.

Esta é uma implementação específica de um chatbot de recomendação de produtos. Ele aceita um briefing como “praticante intermediário, pistas preparadas, máximo de $800”, assim como um visitante que precisa de ajuda para articular essas preferências. Ele não exige que todo visitante complete o mesmo questionário.

Antes de começar:

1. Crie uma conta Quickchat AI ou use uma conta existente. O Free inclui acesso MCP e 50 créditos mensais de IA para testes pessoais e não comerciais. Conversas e testes de Simulation consomem créditos. Para uma implantação comercial, escolha um plano de uso comercial.
2. Tenha a URL raiz da sua loja Shopify pronta, por exemplo https://your-store.myshopify.com. Para reproduzir nossos testes específicos do catálogo, use https://quickchat-ai.myshopify.com, a loja de demonstração da Quickchat AI. Seus dados de demonstração podem mudar; verifique os resultados atuais antes de comparar preços.
3. Para implantação, tenha permissão para editar seu site ou tema da Shopify. Um tema com uma seção Custom Liquid, como Dawn, pode hospedar o snippet inline. Você também pode usar o template completo de página independente.

Comece com o localizador apenas de comparação nas Etapas 1–7. As seções opcionais depois adicionam criação de carrinho, atribuição de pedido e canais de mensagens. O agente nunca recebe pagamento nem reserva estoque; o comprador conclui qualquer compra no checkout da Shopify.

Já está avaliando diferentes apps da Shopify? Nossa comparação de chatbots de IA para Shopify cobre essa decisão. Este guia se concentra em criar e testar o fluxo de localização de produtos.

Como o assistente escolhe produtos da Shopify?

O agente combina as preferências do comprador com os dados de produto retornados pela Shopify e então explica uma lista curta na conversa.

O comprador fornece as restrições. A Shopify fornece os fatos do produto. O modelo decide quais candidatos retornados se encaixam e como explicá-los.

Shopify MCP é a conexão entre o agente e as ferramentas anunciadas pela loja. MCP significa Model Context Protocol. Você insere a URL da loja; a Quickchat AI cuida da descoberta de ferramentas e das solicitações ao catálogo. Não há ação REST personalizada, corpo de solicitação ou chave da Shopify Admin API para colar nesta receita.

Essa divisão importa quando você testa:

Um resultado de pesquisa é um candidato. Ele ainda pode ser da categoria errada ou ter baixa correspondência. Da mesma forma, a existência de um produto no catálogo não prova que toda combinação de cor e tamanho esteja disponível.

A Shopify documenta a interface da ferramenta de catálogo no guia Storefront Catalog MCP. Para mais detalhes sobre os problemas de dados de produto por trás desta integração, consulte nossas notas de engenharia sobre Shopify MCP.

Como criar o assistente de compras?

Crie o agente manualmente, dê a ele a tarefa de localizar produtos e deixe os preços dos produtos fora da Knowledge Base.

Step 1. Conclua a configuração inicial

1. Cadastre-se usando Google ou email. Se usar email, siga o email de verificação antes de entrar.
2. Na tela de configuração inicial, escolha Set up manually.
3. Em Identity, insira Quickboards Guide em Name your AI Agent. Em Describe what you want your agent to do, insira:

Você é Quickboards Guide, o assistente de compras da Quickboards, uma loja de demonstração de snowboards. Ajude visitantes a encontrar um snowboard adequado à prática e ao orçamento deles. Use o catálogo conectado da Shopify para produtos e preços. Faça perguntas de acompanhamento úteis, explique suas recomendações brevemente e mostre cards de produto. Seja conciso e cordial. Esta é uma conversa de localizador de produtos: compare produtos e verifique detalhes, mas não crie nem altere um carrinho e não inicie o checkout. Não invente especificações de produto, disponibilidade ou políticas.

4. Clique em Next. Em Knowledge Base, deixe as opções de importação vazias para este exemplo apenas com catálogo, depois clique em Next.
5. Em External apps, selecione Shopify, depois Next. Isso registra a integração desejada; a conexão real vem na Etapa 2.
6. Em Deployment, selecione Chat embed, depois Next. Isso ainda não publica nada.
7. Em Choose your plan, escolha Skip for now para continuar no Free. Se uma caixa de oferta aparecer, feche-a e escolha Skip for now novamente.

Para um agente existente, vá direto para Identity → AI Persona. Defina Name como Quickboards Guide. O campo Main Prompt é onde você instalará as instruções testadas na Etapa 3.

Na mesma aba AI Persona, defina Personality como Friendly, Profession como Shopping Assistant, Creativity como Low e Reply Length como Normal para corresponder a esta demonstração.

Comece em Identity na barra lateral esquerda. AI Persona contém as configurações desta receita; o close abaixo mostra os campos a editar.

O painel chama o campo de instruções de Main Prompt. Abra seu controle Edit para substituir a descrição inicial; as alterações são salvas automaticamente.

Você pode adicionar depois políticas verificadas de frete ou devoluções à Knowledge Base. Nosso guia de configuração da Knowledge Base explica como organizar esse conteúdo. Este exemplo deixa políticas de fora para haver uma fonte clara para preços, opções e disponibilidade de produtos: o catálogo conectado. Não mantenha uma segunda lista de preços no prompt.

Step 2. Conecte e ative o Shopify MCP

1. Abra Actions & MCPs.
2. Em Custom Actions, escolha Add Action, depois Shopify MCP.
3. Em Shopify store URL, insira a URL raiz:

https://quickchat-ai.myshopify.com

4. Escolha Save. A conexão é verificada antes de ser salva.
5. Ative o interruptor no card Shopify Storefront MCP. Salvar por esta caixa de diálogo e ativar a ação são etapas separadas.

Encontre Shopify Storefront MCP em Custom Actions. Seu interruptor controla se o agente pode usar a conexão.

Cole a URL raiz da loja em Shopify store URL. Não acrescente um endpoint MCP nem um caminho de produto.

Se seu agente já tiver uma ação Shopify, use Edit Action nesse card em vez de criar outra conexão. A documentação de implantação da Shopify também descreve a rota separada de instalação do app da Shopify. Instalar esse app não é necessário para a conexão MCP manual usada aqui.

Para a primeira verificação de conexão, abra AI Preview e pergunte:

Verifique se o snowboard Iron em Ice está disponível para pedido e quanto custa. Não o adicione a um carrinho.

Na nossa data de teste, a variante retornada estava disponível por $699.95 USD. Para sua própria loja, substitua por um produto e uma opção cujo valor atual você possa verificar. Uma conexão bem-sucedida é necessária, mas essa resposta isolada não valida o localizador inteiro.

Step 3. Cole o Main Prompt completo

Abra Identity → AI Persona → Main Prompt → Edit, substitua a descrição inicial pelo bloco abaixo e feche o editor depois que ele salvar automaticamente. Este é o prompt usado nos testes finais. Para outra categoria, substitua a identidade da loja e as perguntas de preferência em conjunto; mantenha as regras de fundamentação no catálogo e de correspondência ausente.

Você é Quickboards Guide, o assistente de compras da Quickboards, uma loja de demonstração de snowboards. Ajude um visitante a reduzir o catálogo a uma ou duas pranchas adequadas e a entender as diferenças. Mantenha a conversa concisa, cordial e específica. Comece com a pergunta útil ou o fato do produto, sem elogios nem enchimento.

Colete apenas as preferências que importam:
- Para uma solicitação ampla como "me ajude a escolher um snowboard", faça uma pergunta curta por vez. Descubra o nível de prática, o terreno usual e o orçamento máximo apenas para a prancha, com moeda. Não pesquise o catálogo nem mostre cards de produto até conhecer esses três fatos.
- Reutilize fatos já informados. Se o visitante fornecer os três em uma mensagem, vá direto para a pesquisa. Não transforme a conversa em um questionário fixo.
- Pergunte sobre uma preferência como cor somente quando isso mudaria a lista curta. Não pergunte altura ou peso a menos que o catálogo contenha um guia de tamanhos utilizável. Nunca deduza o comprimento da prancha apenas a partir de medidas corporais.

Encontre e explique uma lista curta:
- Consulte o catálogo Shopify conectado para produtos e preços atuais. Não use a Knowledge Base, conversas anteriores ou sua própria memória como fonte de preço, opções ou disponibilidade.
- Resultados de pesquisa são candidatos, não recomendações automáticas. Verifique a categoria, a descrição e o preço atual do produto contra todos os requisitos declarados. Nunca mostre um produto não relacionado apenas porque a pesquisa o retornou.
- Mostre no máximo dois produtos correspondentes. Se apenas um servir, mostre um. Para cada um, nomeie o produto, informe seu preço atual e moeda, e explique um motivo relevante com base na descrição retornada. Mantenha a explicação da lista curta abaixo de 90 palavras. Mencione uma diferença somente se os fatos retornados a sustentarem; um preço menor sozinho não significa que uma prancha seja tolerante ou adequada para iniciantes.
- Use cards de produto para a mesma lista curta. Não exiba produtos extras como contexto nem preencha a resposta com um catálogo completo.
- Não chame um produto de "melhor", não prometa desempenho e não declare uma especificação técnica exata a menos que os dados retornados sustentem a afirmação. Não repita texto de marketing exagerado como fato medido.

Verifique uma variante solicitada:
- Quando o visitante perguntar sobre uma cor, tamanho ou outra opção específica, verifique a resposta atual do catálogo para a variante exata. Se a resposta não incluir todos os valores de opção solicitados e a disponibilidade dessa variante, use a ferramenta de detalhes de produto para inspecionar o produto e a combinação selecionada. Nunca deduza disponibilidade apenas pelo título ou pela descrição do produto.
- Valores que aparecem separadamente em listas de opções não provam que sua combinação está disponível. Verifique a variante exata retornada e sua disponibilidade.
- Uma faixa de tamanhos em uma descrição não é um tamanho selecionável. Se o catálogo tiver Color mas nenhuma opção Size, diga que você consegue verificar a cor, mas não consegue confirmar um comprimento específico. Não prometa o tamanho solicitado nem afirme que existe um seletor de tamanho na página do produto.
- Não prometa que outro produto tem a opção ausente a menos que você o tenha verificado. Ofereça verificar alternativas sem presumir o resultado.
- Informe o preço atual e a moeda da variante verificada. Mantenha IDs internos de produto, IDs de variante e dados brutos de ferramenta fora da resposta ao cliente.

Lide com mudanças e correspondências ausentes:
- Se o visitante alterar orçamento, terreno, nível ou outro requisito, consulte novamente o catálogo usando os requisitos atualizados. Substitua a lista curta anterior; não continue recomendando um produto acima do novo orçamento.
- Se a pesquisa não retornar nada adequado, tente uma vez novamente com uma consulta mais simples ou um sinônimo. Se nenhum dos conjuntos de resultados contiver uma correspondência, diga "Não consegui encontrar um produto correspondente neste catálogo." Não afirme que uma pesquisa vazia ou irrelevante prova que a loja nunca vende essa categoria.
- Pergunte qual requisito o visitante está disposto a flexibilizar. Não flexibilize silenciosamente orçamento, tamanho, categoria ou disponibilidade. Não mostre cards de produto quando não houver uma correspondência adequada.
- Se a conexão falhar, diga que o catálogo ao vivo não pôde ser verificado e ofereça tentar novamente. Nunca preencha a lacuna com um produto ou preço adivinhado.

Esta experiência é um localizador de produtos. Compare produtos e verifique detalhes apenas. Não crie nem altere um carrinho, não inicie checkout, não receba pagamento e não afirme que um item está reservado. Mantenha as respostas no idioma do visitante. Use parágrafos curtos e sem travessões ou meia-riscas.

Essas regras orientam o comportamento do modelo. Elas não são um limite rígido de cards, um validador de contagem de palavras ou uma fronteira de permissão. Em nossos testes, a redação exata e o tamanho das respostas variaram. As verificações de produto e variante abaixo importam mais do que reproduzir uma frase específica. Para uma ação REST personalizada separada que escreva em seus sistemas, nosso guia de confiabilidade de AI Action explica condições do lado do servidor. Esses controles de ação personalizada não são configurações no card nativo da Shopify usado aqui.

Como testar recomendações de produtos antes de publicar?

Teste a conversa de duas formas: interativamente para acompanhamentos e em Simulation Testing para um conjunto repetível de solicitações independentes.

Uma pontuação em lote ajuda a priorizar a inspeção. O ciclo só fecha depois que você verifica a resposta real, os fatos do catálogo e as chamadas de ferramenta relevantes.

Step 4. Execute a conversa completa de compras

Em AI Preview, inicie uma conversa nova e envie:

Me ajude a escolher um snowboard.

O agente deve fazer uma pergunta útil e não mostrar cards de produto. Em uma execução gravada com o prompt final, ele perguntou:

Qual é seu nível atual de prática: iniciante, intermediário ou avançado?

Uma pergunta, sem lista curta prematura. Execuções novas repetidas devem preservar esse comportamento mesmo se a redação mudar.

Forneça as preferências ausentes. Para testar o caminho direto, inicie outra conversa nova com este briefing completo:

Sou um praticante avançado, ando principalmente em pistas preparadas de resort. Quero velocidade e curvas precisas, com um orçamento apenas para a prancha de $800 USD.

Na demonstração incorporada, o agente retornou AI’s board por $629.95 USD e Liquid por $749.95 USD, com dois cards de produto e explicações baseadas nas descrições. Ambos estavam dentro do orçamento declarado. A seleção de produtos pode variar quando várias entradas do catálogo servem; verifique os motivos e as restrições, não apenas os nomes dos produtos.

As imagens e os links de produto vieram do catálogo da Shopify. Este é o componente de card realmente renderizado, não uma maquete de conversa.

Depois continue na mesma conversa:

Na verdade, reduza meu orçamento para $650 USD. Mantenha as mesmas preferências de prática.

A demonstração substituiu a lista curta anterior por AI’s board e Neo’s Board, ambos por $629.95 USD. Liquid, a $749.95, não apareceu mais nos novos cards. Abra a conversa em Inbox para inspecionar os dois turnos juntos. Verifique se uma mudança de orçamento altera os produtos propostos sem reiniciar a entrevista de preferências.

O orçamento mudou dentro da conversa existente. A nova lista curta exclui a opção anterior acima do orçamento. O rótulo de orçamento acima de cada captura de card é uma anotação editorial.

Para o catálogo próprio de um lojista, também abra cada página de produto recomendada. Confirme que o link aponta para a loja pretendida, que o produto existe e que o preço exibido corresponde ao mercado e à variante relevantes. As páginas públicas de produto da nossa loja de demonstração são protegidas por senha; as capturas comprovam a conexão ao catálogo e o embed local, não um destino de compras ao vivo irrestrito.

Step 5. Crie um dataset de Simulation repetível

Adicione as sete solicitações independentes

Abra Testing → Create Dataset. Insira Quickboards catalog checks em Dataset name, selecione Paste messages e cole o conteúdo abaixo. Cada linha --- separa um teste independente, não outro turno em uma conversa.

A contagem de sete mensagens confirma que os separadores foram reconhecidos. Use uma conversa ao vivo, não linhas separadas do dataset, para o acompanhamento de mudança de orçamento.

Me ajude a escolher um snowboard.
---
Sou um praticante intermediário. Ando em pistas preparadas de resort e quero melhorar meu carving. Meu orçamento máximo é de $800 USD.
---
Preciso de botas de esqui no tamanho EU 42 abaixo de $300 USD.
---
Verifique se o snowboard Iron em Ice está disponível para pedido e quanto custa. Não o adicione a um carrinho.
---
Posso comprar o snowboard Iron em Ice, tamanho 156 cm? Não o adicione a um carrinho.
---
Posso pedir o snowboard Hellium em Black com o design Tapered? Apenas verifique; não adicione nada a um carrinho.
---
Soy un snowboarder de nivel intermedio. Suelo ir por pistas preparadas y tengo un presupuesto máximo de 800 USD. ¿Qué tabla me recomiendas?

Diga ao avaliador o que uma boa resposta significa

Expanda Evaluation criteria e substitua a rubrica padrão por:

Avalie somente a regra aplicável à solicitação deste visitante. Não aplique os requisitos de todos os testes a todas as respostas.

Se o visitante apenas disser "Me ajude a escolher um snowboard", a resposta deve fazer uma pergunta relevante e ainda não recomendar produtos.
Se o visitante já fornecer nível de prática, terreno e orçamento (incluindo o teste em espanhol), uma lista curta direta de no máximo duas pranchas plausíveis dentro do orçamento está correta. Não exija outra pergunta de esclarecimento. Avalie se a explicação aborda as preferências. Não exija Iron nem qualquer outro produto específico em uma lista curta geral.
Para a verificação de preço Iron/Ice, o catálogo de demonstração informa disponibilidade e 699.95 USD. Para a verificação Iron/Ice/156 cm, a resposta deve dizer que o comprimento não pode ser confirmado porque Iron não tem uma opção Size selecionável.
Para Hellium/Black/Tapered, a resposta não deve dizer que a combinação está disponível.
Para botas de esqui, a resposta deve dizer que não encontrou um produto correspondente; ela não deve apresentar pranchas ou cera não relacionadas como recomendações de botas.
A resposta deve estar no idioma do visitante e não deve afirmar que criou um carrinho.

Avalie somente o comportamento visível. Você não consegue verificar chamadas ocultas à Shopify, a completude atual do catálogo ou o conteúdo dos cards de produto a partir do texto da resposta. Isso exige uma verificação manual separada contra o catálogo ao vivo.

Avalie a regra aplicável à solicitação. Um briefing de compra completo não deve ser penalizado por pular outra pergunta de preferência.

Para um contexto explícito de catálogo dos EUA, expanda Conversation metadata (advanced) e insira:

{"shopify_language":"en","shopify_country":"US"}

Estes são campos de contexto de catálogo. O teste do visitante em espanhol ainda verifica se a resposta segue o idioma do visitante.

Execute, inspecione e compare

1. Escolha Create, abra o dataset e depois Run.
2. Em Start Test Run, insira um rótulo descritivo como Final finder, US catalog, depois escolha Start Run.
3. Abra a execução concluída em Runs. Leia AI Response, AI Score e Justification em conjunto. Passe o cursor sobre uma resposta ou justificativa truncada para lê-la por completo.
4. Use o controle View da linha para abrir a conversa real em Inbox. Verifique os fatos da variante contra a Shopify e inspecione as ferramentas como mostrado na seção avançada abaixo.
5. Corrija as instruções do agente ou a rubrica do avaliador, conforme o que estava errado. Execute novamente o mesmo dataset com um novo rótulo. Atualize valores esperados específicos de produto quando o catálogo mudar.

Testing permanece selecionado na barra lateral. O breadcrumb identifica o dataset e a execução; o lado direito de cada linha leva ao feedback humano e à conversa.

A execução final de teste do catálogo dos EUA. AI Score avalia a resposta visível; ele não verifica independentemente a solicitação à Shopify, os cards ou o estoque.

O que a pontuação deixou passar na nossa execução

A primeira versão da nossa rubrica penalizou incorretamente briefings completos por não fazerem outra pergunta. Os critérios revisados distinguem explicitamente uma solicitação incompleta de uma que já inclui nível, terreno e orçamento. Revise o raciocínio do avaliador e também a resposta do agente.

A execução final ainda sinalizou a resposta de variante indisponível: o avaliador confundiu uma variante existente com ela estar disponível. O catálogo real continha a variante Black/Tapered e a marcava como indisponível, o que o agente relatou corretamente. Por isso uma pontuação sozinha não pode substituir a verificação de variante abaixo.

O oposto também aconteceu. Uma lista curta com pontuação alta chamou Hydrogen de escolha para “progressão mais fácil”, uma comparação que as descrições retornadas não estabeleciam. Trate isso como um achado de revisão manual, não como benefício de produto verificado. As respostas gravadas e trechos de catálogo preservam os dois casos.

Como verificar tamanhos e variantes indisponíveis?

Verifique a variante exata em vez de tratar texto de descrição de produto como registro de estoque.

A descrição do snowboard Iron mencionava uma faixa de 144–160 cm. Sua opção comprável retornada era Color, incluindo Ice. Não havia dimensão Size selecionável confirmando 156 cm.

Um diagrama conceitual da discrepância real do catálogo. A faixa da descrição não consegue confirmar um comprimento comprável específico.

Envie esta solicitação exata:

Posso comprar o snowboard Iron em Ice, tamanho 156 cm? Não o adicione a um carrinho.

Em um teste gravado com o prompt final, o agente confirmou Ice a $699.95 USD, mas explicou que não conseguia confirmar ou escolher um comprimento de 156 cm porque esse tamanho não estava exposto como opção.

O resultado bem-sucedido é uma resposta qualificada: a cor está disponível, o comprimento solicitado permanece não confirmado.

O teste separado Hellium / Black / Tapered verifica outro erro. Os dois valores de opção aparecem nas listas de opções do produto, mas a combinação exata estava indisponível. O agente não deve oferecê-la apenas porque “Black” e “Tapered” existem individualmente.

A distinção que o avaliador deixou passar: a variante existe, mas não pode ser pedida no momento.

Durante os testes de autoria, registramos as respostas reais do catálogo junto com as conversas. A resposta de pesquisa já continha os dados de variante usados nessas execuções, então não tratamos uma chamada adicional de detalhes de produto como sinal obrigatório de sucesso. Se os dados retornados estiverem incompletos, o agente precisa de uma consulta de detalhes ou de um “não consigo confirmar” explícito.

Para sua própria loja, compare a resposta com as configurações de variante do produto na Shopify. Exija que todos os valores de opção solicitados pertençam à mesma variante e verifique sua disponibilidade e preço. Disponível para pedido não significa uma quantidade conhecida em depósito, e uma recomendação não reserva nada.

O que mudou quando ajustamos o localizador?

As melhorias úteis vieram de testar uma falha específica, alterar a instrução relevante e repetir a mesma solicitação.

Use este ciclo:

1. Inicie uma conversa nova com uma mensagem de teste salva.
2. Leia a resposta e inspecione os cards reais e os fatos do catálogo.
3. Altere um comportamento em Main Prompt, como quando a pesquisa de produto deve começar.
4. Repita esse teste e depois execute novamente o restante do dataset para verificar regressões.

Três achados moldaram o prompt final:

A pesquisa retornou candidatos de outras categorias. O agente não os apresentou como botas adequadas.

Estes são resultados observados neste catálogo de demonstração, não um benchmark de precisão. Um prompt não consegue suprir especificações ausentes. Se suas descrições não diferenciam dois produtos, melhore o catálogo antes de esperar que o assistente explique uma diferença significativa. Repita os testes depois de alterar descrições, preços, opções ou instruções.

Como adicionar o assistente de compras a uma página da Shopify?

Use Embed para uma conversa dentro de uma página ou Widget para um balão flutuante de chat. Este passo a passo usa Embed e mantém o Main Prompt apenas de comparação da Etapa 3.

Step 6. Configure e copie o website Embed

1. Abra Channels → Your Website → Text Content. Defina Header text como Quickboards Guide e Welcome message como Conte sobre sua prática e eu ajudarei você a encontrar uma prancha. Onde você gosta de andar?.
2. Abra Appearance → Theme e escolha Light.
3. Volte para Install → Availability and access. Confirme que Widget & Embed access está habilitado.
4. Abra Install manually with code e copie Embed. Use o identificador do agente do seu próprio snippet.

Comece com Your Website na barra lateral, depois Install manually with code. Dentro do painel, copie Embed para um localizador inline; Widget cria um balão flutuante.

Copie aqui o snippet do seu próprio agente. O fragmento público abaixo usa um placeholder em vez do identificador local de demonstração.

Este fragmento mínimo usa o carregador nativo. Substitua YOUR_SCENARIO_ID:

<div id="quickchat-embedded" style="height:680px;overflow:hidden;"></div>
<script>
  window._quickchat = window._quickchat || function () {
    (window._quickchat.q = window._quickchat.q || []).push(arguments);
  };
  _quickchat('containerId', 'quickchat-embedded');
  _quickchat('init', 'YOUR_SCENARIO_ID');
</script>
<script src="https://bubble.quickchat.ai/chat.js" async></script>

O contêiner deve existir antes da inicialização, com containerId antes de init. Inicialize a Quickchat AI uma vez por página. Se seu tema já carrega o widget ou o embed do app da Shopify, peça ao mantenedor para evitar inicialização duplicada nesta página sem remover o chat de outros lugares. O guia do canal de site explica os controles de acesso.

Step 7. Dê ao localizador seu próprio template da Shopify

Use um tema com Custom Liquid, como Dawn. Há três pequenas tarefas: criar a página, construir seu template e atribuir esse template apenas ao localizador.

Crie a página e o template

1. No admin da Shopify, abra Online Store → Pages → Add page. Insira Find your snowboard, adicione uma introdução, selecione Hidden e salve.
2. Em Online Store, escolha Edit theme para o tema pretendido. Abra Home page → Pages → Create template. Nomeie como product-finder, com base no template de página padrão.

Coloque a conversa dentro do template

1. Na área Template do novo template, escolha Add section → Custom Liquid. Cole o fragmento em Liquid code e salve. Mantenha-o fora das seções compartilhadas Header e Footer.
2. Pré-visualize a página usando Preview → Change no editor de tema. Páginas ocultas podem ser pré-visualizadas. Recarregue a prévia depois de salvar alterações de JavaScript.

Diagrama de posicionamento, não uma captura de tela do admin da Shopify. Atribua este template apenas à página do localizador.

Atribua, verifique e publique a página

1. Volte às configurações da página, selecione product-finder em Theme template e salve. Somente templates no tema ativo aparecem aqui; coordene trabalho em tema não publicado com seu processo normal de release.
2. Após as verificações de lançamento abaixo, torne a página Visible e vincule-a em Content → Menus.

Estas etapas seguem as instruções de template e os controles de visibilidade de página da Shopify.

Para um site independente, use o template HTML completo vinculado nos pré-requisitos. Substitua seu identificador de agente e a marca de demonstração, depois faça upload para seu host estático. Esse documento completo pertence a um site independente; cole apenas o fragmento acima em Custom Liquid.

Opcional: como conectar um carrinho ao AI-Assisted Revenue?

A Quickchat AI vincula um pedido a uma conversa correspondendo seu identificador de carrinho a um carrinho salvo criado ou atualizado durante essa conversa. Recomendações de produto isoladas não estabelecem esse vínculo. O fluxo de carrinho e link de checkout, incluindo a aplicação de um código de desconto fornecido pelo comprador, também é resumido na página assistente de compras com IA para Shopify.

Escopo de validação: Nosso teste de 14 de setembro criou um carrinho real da Shopify e salvou seu card de checkout pelo fluxo normal de resposta. As capturas de receita usam um pedido de demonstração separado, explicitamente semeado. Elas ilustram a atribuição no App, não uma compra concluída nem a entrega de um webhook genuíno de pedido da Shopify.

Conecte o lojista e habilite o modo de carrinho

1. Instale Quickchat AI: Chatbot & Sales em sua própria loja Shopify e conclua a autorização. Uma conexão MCP manual fornece ferramentas de catálogo, mas a instalação do app fornece a conexão do lojista e os webhooks de pedido necessários para atribuição.
2. Abra o agente acessado por essa instalação. Ele pode ser diferente do agente que você criou manualmente. Aplique as configurações e o prompt deste tutorial ali, verifique sua ação Shopify e use o identificador desse agente no snippet do seu site.
3. Em Identity → AI Persona → Main Prompt → Edit, substitua apenas o parágrafo final que começa com This experience is a product finder. pelo parágrafo abaixo. Não o acrescente abaixo da instrução conflitante de não usar carrinho.

Esta experiência pode ajudar um comprador a montar um carrinho depois de comparar produtos. Crie ou atualize um carrinho somente quando o visitante pedir explicitamente para adicionar um produto identificado e uma quantidade. Primeiro verifique a variante exata e sua disponibilidade atual na Shopify. Se uma opção solicitada não puder ser verificada, peça esclarecimento em vez de substituí-la. Use os produtos, quantidades, total e link de checkout retornados pela ferramenta de carrinho; não invente uma URL de checkout. Não receba pagamento, não conclua um pedido e não afirme que um item está reservado. Mantenha as respostas no idioma do visitante. Use parágrafos curtos e sem travessões ou meia-riscas.

Para o catálogo de demonstração, envie esta mensagem exata em uma conversa nova:

Adicione um snowboard Iron em Ice a um novo carrinho. Verifique primeiro se essa variante está disponível. Não estou selecionando um comprimento. Mostre-me o carrinho, mas não faça um pedido nem receba pagamento.

Nossa sequência real de ferramentas foi search_catalog → get_product → create_cart. O carrinho retornado continha um snowboard Iron em Ice por $699.95 USD. Nenhum comprimento foi selecionado e nenhum pedido ou pagamento foi criado. Para sua loja, substitua por um produto, variante e quantidade verificados.

O card nativo de checkout salvo automaticamente durante o teste de 14 de setembro. Seu produto, quantidade e total correspondem à resposta real da Shopify. Não concluímos o checkout.

Abra a conversa em Inbox e inspecione Why AI said that para verificar quais ferramentas foram executadas. Verifique o produto, a quantidade, a moeda e o total retornados. Uma invocação de ferramenta bem-sucedida por si só não prova que o card de checkout foi entregue ou que a atribuição foi salva.

Rastreie um pedido até sua conversa

Em uma loja ativa, o comprador continua pelo checkout da Shopify. A Quickchat AI corresponde o identificador de carrinho do pedido ao carrinho salvo na conversa para aquele lojista.

A atribuição segue o identificador de carrinho correspondente. Uma compra não relacionada depois de um chat é insuficiente.

1. Abra Insights → AI-Assisted Revenue no agente conectado ao app.
2. Selecione um intervalo de datas que contenha a data de colocação do pedido. Inspecione AI-assisted GMV, Avg order value e Daily assisted GMV.
3. Em Recent assisted orders, encontre o pedido e clique em View na coluna Conversation. Inbox abre a conversa com seu card Order placed.

Insights → AI-Assisted Revenue. Esta demonstração local contém um pedido sintético, não desempenho de vendas de um lojista.

O total é valor de pedido atribuído. Um pedido de demonstração também torna a média igual ao total.

Use View na coluna Conversation, não o link do número do pedido, para voltar ao chat.

Inbox mostra Order placed na conversa associada ao carrinho semeado. O pedido em si é sintético.

Para as capturas de receita, salvamos explicitamente um componente de carrinho de uma resposta gravada anterior da Shopify e depois passamos um evento de pedido sintético #DEMO-1001 carregando esse identificador de carrinho pelo manipulador local de atribuição. Eventos duplicados de criado/pago produziram um registro, e um token sem correspondência não produziu nenhum. Isso valida o comportamento de correspondência downstream com fixtures, não a entrega de um webhook genuíno de pedido da Shopify. Não houve pedido nem pagamento real.

Leia a métrica como valor de pedido atribuído (GMV). Ela inclui o pedido correspondente completo, não apenas produtos adicionados pela IA. Eventos de pedido criado ou pedido pago podem estabelecer o registro; isto não é um relatório de vendas pagas, receita líquida ou incremento. Reembolsos e cancelamentos não são descontados. O filtro de data seleciona pedidos colocados; a atribuição não tem uma janela fixa pós-chat.

Se nada aparecer, verifique o agente conectado ao app, uma ação real de criar/atualizar carrinho, um evento de pedido correspondente e as datas selecionadas. O snippet inline manual não fornece a sincronização de carrinho da vitrine do embed do app da Shopify.

Avançado: como ver quais ferramentas da Shopify foram executadas?

Use Why AI said that em uma resposta individual da IA para inspecionar suas AI Actions Used. Isso é especialmente útil quando a resposta final parece correta, mas você quer verificar se o agente pesquisou o catálogo ou tentou alterar um carrinho.

1. Abra Inbox e depois a conversa. O controle View de um resultado de Simulation é outro caminho para a mesma tela.
2. Encontre a resposta da IA que você quer investigar. Passe o cursor sobre a resposta e escolha Why AI said that abaixo dela.
3. Leia AI Actions Used. Cada entrada mostra o nome da ferramenta e um resumo encurtado dos argumentos para essa resposta.
4. Compare essas chamadas com a solicitação do visitante e os fatos de produto retornados. Inspecione outra resposta para ver o que mudou no próximo turno.

A inspeção pertence a uma resposta específica, não ao agente inteiro. Escolha a resposta que realizou a consulta ou a alteração de carrinho.

Chamadas nativas reais do teste opcional de carrinho: pesquisa de catálogo, consulta de produto e criação de carrinho. Esta lista vem de registros persistidos de chamadas de ferramenta; não é uma transcrição escrita manualmente.

As chamadas esperadas dependem da tarefa:

O card nativo da Shopify não expõe o painel View logs de ação personalizada. Use a inspeção no nível da resposta aqui. Esses resumos de argumentos não são um rastreamento HTTP completo, prova de estoque ou prova de pagamento. Nosso problema de card de carrinho é um exemplo concreto de por que o resultado visível ao usuário precisa de uma verificação separada. Para o conceito mais amplo, consulte como AI Agents executam ações.

Opcional: o mesmo localizador pode responder no WhatsApp e no Instagram?

Sim. Conecte qualquer um dos canais ao agente configurado e teste nesse canal. A conexão ao catálogo permanece a mesma; a renderização das mensagens muda.

Diagrama de entrega: cards de produto no site, mensagens interativas nativas no WhatsApp, texto e links no Instagram.

O WhatsApp aceita mensagens nativas de produto e carrinho. O Instagram atualmente envia texto de resposta sem o card de produto ou layout de carrinho inline do site. Para Instagram, confirme se as recomendações incluem nomes de produtos legíveis, preços verificados e URLs de produto no texto. Se necessário, adicione esta instrução ao Main Prompt e depois teste em uma DM real:

Torne as recomendações compreensíveis sem cards de produto. Inclua na resposta em texto o nome, o preço verificado com moeda e a URL de produto de cada produto recomendado. Use somente valores retornados pela Shopify.

Esta instrução é um ponto de partida para testar, não um resultado gravado do Instagram. Para Instagram, use o Main Prompt apenas de comparação da Etapa 3; não presuma que o botão de checkout do site aparece em DMs. Se o WhatsApp precisar de modo de carrinho ao mesmo tempo, use um agente separado para Instagram, pois alterações no Main Prompt se aplicam a todos os canais de um agente.

Conectar o mesmo agente também não leva a conversa do site de um comprador para uma nova conversa no WhatsApp ou Instagram.

Conecte o WhatsApp

Use o modo opcional de carrinho acima para este canal. Mensagens nativas de produto podem oferecer respostas rápidas de carrinho, então teste esses botões e também solicitações digitadas.

1. Tenha um número comercial dedicado que possa receber verificação por SMS ou voz, seus dados comerciais e acesso de administrador ao Meta Business relevante. Use o guia de configuração do WhatsApp para números existentes ou migrações de provedor.
2. Abra External Apps → WhatsApp → Connect WhatsApp.
3. Na janela da Meta, entre como administrador da empresa, selecione ou crie a empresa e a WhatsApp Business Account, insira os dados comerciais solicitados e verifique o número. Conclua as telas de permissão e confirmação.
4. De volta à Quickchat AI, aguarde Connected. Em Settings, garanta que o interruptor do número indique Enabled.
5. Envie uma pergunta sobre produto a partir de outro número do WhatsApp. Verifique a resposta recebida e a conversa correspondente em Inbox.

Inicie o fluxo de conexão da Meta aqui. Esta captura não mostra uma conexão do WhatsApp concluída.

Conecte o Instagram

1. Use uma conta Professional do Instagram, Business ou Creator.
2. Abra External Apps → Instagram → Connect to Instagram. Entre como essa conta; use Sign in as a different account se o navegador selecionar a conta errada.
3. Deixe Access and manage messages habilitado durante a autorização. De volta à Quickchat AI, confirme a conta e ative Enable Instagram.
4. Envie uma DM de outra conta do Instagram. Verifique seu texto, links de produto e entrada em Inbox. O tutorial de configuração de DM do Instagram cobre solução de problemas de conexão.

Conecte uma conta Professional e conceda acesso a mensagens. Este App local não tem credenciais da Meta, então seus controles de conexão estão desabilitados; isto não é uma captura de DM ao vivo.

Teste os dois canais com novas mensagens recebidas. Respostas livres no WhatsApp e respostas automatizadas no Instagram usam suas respectivas janelas de mensagens de 24 horas; campanhas de saída exigem configuração e verificações de política separadas.

O que verificar antes do lançamento?

Step 8. Valide a experiência publicada

Verifique a vitrine

• Escolha um plano que permita uso comercial antes da implantação para lojista.
• Abra a página em desktop e mobile. O agente pretendido deve carregar uma vez, com uma entrada utilizável e links de produto funcionando.
• Mantenha a página oculta até que suas próprias verificações de prévia de tema sejam aprovadas.

A conversa existente de orçamento alterado no mobile. As duas recomendações permanecem abaixo de $650 USD; verifique o movimento do carrossel, os links de produto e a entrada de mensagem em uma tela estreita.

Verifique o comportamento de compra

O caso de Simulation em espanhol é uma verificação de idioma, não uma verificação de mercado. Nosso guia de chatbot multilíngue explica essa capacidade mais ampla; ainda assim, valide independentemente os dados regionais do catálogo da sua loja.

Configure a rotina de revisão

Escolha quem monitora novas conversas. Configure Human Handoff se um colega deve assumir solicitações difíceis; é uma ação separada.

Revise conversas iniciais junto com conversation analytics. Corrija comparações sem suporte ou fatos de produto ausentes, depois execute novamente os testes salvos. Salve os casos de teste que expuseram um problema para que a próxima alteração de prompt também seja verificada contra eles.

O prompt apenas de comparação continua sendo o tutorial base. Sua regra de não usar carrinho é uma instrução comportamental, não uma remoção técnica das ferramentas de carrinho da Shopify. Habilite os caminhos opcionais somente depois que suas próprias verificações forem aprovadas.

Perguntas frequentes

Como criar um assistente de compras com IA para Shopify?

Crie um Quickchat AI Agent, escreva um Main Prompt que defina como ele coleta preferências e recomenda produtos, depois conecte e ative o Shopify MCP usando a URL da sua loja. Teste as recomendações com seu catálogo antes de adicionar o agente ao seu site como widget ou embed inline.

Um chatbot de IA pode recomendar produtos da minha loja Shopify?

Sim. Um agente conectado pode pesquisar o catálogo da Shopify, usar os detalhes de produto retornados para explicar uma lista curta e mostrar cards de produto. A qualidade da correspondência depende das descrições do seu catálogo, das preferências do comprador e das instruções do agente. Verifique os produtos e variantes reais durante os testes.

Isto é um quiz de recomendação de produtos da Shopify?

É um localizador de produtos conversacional. Ele coleta preferências ausentes pelo chat e pode aceitar um briefing completo ou uma mudança de orçamento na mesma conversa. Ele não cria um formulário fixo, não calcula uma pontuação de quiz e não garante uma recomendação determinística.

O assistente pode verificar tamanhos e disponibilidade na Shopify?

Ele pode verificar as opções e a disponibilidade retornadas pelo catálogo. Um tamanho mencionado em uma descrição não prova que o tamanho é uma variante selecionável e disponível. O agente deve confirmar a combinação exata ou dizer que não consegue verificá-la. Disponível para pedido não é uma contagem de estoque nem uma reserva.

Preciso de código ou de um plano pago para este tutorial?

Você pode configurar e testar o agente sem escrever código de aplicação. O plano Free da Quickchat AI inclui acesso MCP e 50 créditos mensais de IA para uso pessoal e não comercial; testes consomem créditos. Uma implantação para lojista exige um plano de uso comercial. Uma página inline exige colar um snippet de embed, e as cobranças da Shopify são separadas.

O que AI-Assisted Revenue mede?

A atribuição da Quickchat AI corresponde o identificador de carrinho de um pedido da Shopify a um carrinho salvo criado ou atualizado em uma conversa para aquele lojista. O painel informa o valor total do pedido correspondente como GMV, não receita líquida nem vendas incrementais comprovadas. Uma recomendação de catálogo ou clique em produto isolado não é suficiente.

O assistente de compras pode funcionar no WhatsApp e no Instagram?

O mesmo agente e a mesma conexão ao catálogo da Shopify podem atender aos dois canais, mas as conversas e a renderização diferem. O WhatsApp aceita mensagens nativas de produto e carrinho. O Instagram envia texto de resposta, então as recomendações precisam incluir nomes de produtos, preços e links no texto; o card de checkout inline do site não aparece em DMs. Teste cada canal conectado separadamente.