Neste artigo, você aprenderá a instalar Brilliant em sua loja, ativar a conexão inicial e verificar se todos os elementos funcionam corretamente antes de começar a vender com IA.
1. Requisitos prévios
Antes de começar, certifique-se de cumprir o seguinte para evitar erros durante o processo:
- Ter uma loja ativa na plataforma Shopify.
- Possuir permissões de administrador ou permissões suficientes para instalar aplicativos no seu painel de controle.
2. Instalação pelo Marketplace
Para adicionar o Brilliant ao seu ecommerce, siga estes passos:
-
Localização do app:
Acesse seu painel do Shopify, vá para a seção Apps e selecione a Shopify App Store.
-
Busca:
Digite "Brilliant AI assistant" na barra de busca da loja de aplicativos.
-
Instalação:
Clique no botão Instalar. O Shopify irá redirecioná-lo para uma tela que detalha as permissões necessárias. Clique novamente em Instalar para aceitar e concluir a conexão.
3. Configuração inicial após a instalação
Após confirmar a instalação, acesse o Brilliant na sua lista de aplicativos no Shopify para entrar no backoffice.
Primeiros passos recomendados
-
Criação do agente:
Inicie a criação do agente para que a IA analise seu catálogo. Este processo é automático, mas pode levar várias horas dependendo do volume de produtos. Você pode continuar usando sua loja normalmente enquanto isso.
-
Ativação do agente:
Depois que o catálogo for processado, certifique-se de marcar o agente como Ativo no painel de controle.
-
Habilitar o widget no tema:
Para que o assistente seja visível, vá para Loja online / Temas / Personalizar. Na seção de Incrustações de aplicativo, ative o interruptor do Brilliant e salve as alterações.
- Adicionar perguntas sugeridas na página do produto:
Vá para Loja online / Temas / Editar. Selecione a página do produto e adicione um novo bloco:
Selecione o bloco "Perguntas do produto", dentro da aba "Apps":
Você verá a pré-visualização das perguntas e poderá salvar as alterações:
- Adicionar carrosséis de produtos similares ou que combinam na página do produto:
Vá para Loja online / Temas / Editar. Selecione a página do produto e adicione um novo bloco:
Selecione o bloco "Carrossel de produtos", dentro da aba "Apps":
Agora você pode clicar nesse bloco e escolher o título e o tipo de lista de produtos que deseja mostrar:
Produtos similares: mostrará produtos similares ao que o usuário está visitando.
Produtos que combinam bem: mostrará produtos que combinam bem com o produto que está sendo visitado.
-
Mostrar botão de ações contextuais do Brilliant sobre os cartões de produto:
Depois de ativar o widget do Brilliant no tema, além de aparecer o botão principal do Brilliant no canto inferior da tela, os botões de ações contextuais também devem começar a aparecer sobre os cartões de produto do seu site.
Se isso não acontecer, é porque ocorre um dos seguintes casos:
-
Você usa um tema público do Shopify sem modificações no código. Se você não vê os botões de ações contextuais sobre os cartões de produto do seu site e está usando um tema público do Shopify, é porque o Brilliant ainda não oferece suporte para esse tema. Se for esse o caso, por favor, entre em contato conosco pelo e-mail support@getbrilliant.ai informando o domínio do seu ecommerce e o nome do tema público que você está utilizando. Nossos desenvolvedores atualizarão o suporte do Brilliant para o seu tema com máxima prioridade.
-
Você usa um tema público do Shopify com modificações no código ou um tema privado personalizado. Se for esse o caso, será necessário adicionar um pequeno trecho de código HTML ao seu tema para que o Brilliant possa exibir os botões de ações contextuais nos cartões de produto. O código que você precisa adicionar em cada cartão de produto é data-bri-product-card data-bri-product-id=“id do produto”. No código Liquid do Shopify, normalmente você deve inserir algo assim: data-bri-product-card data-bri-product-id=“{{ product.id }}”.
Você deve inseri-lo em todos os cartões de produto onde desejar exibir o botão contextual do Brilliant. O habitual é ter o arquivo `product-card.liquid` ou similar, e que esse componente seja reutilizado em vários tipos de página, como a página inicial, produtos de uma coleção, resultados de pesquisa etc.; portanto, basta adicionar esse código nesse arquivo, e ele já será aplicado a todo o seu tema. O código acima é um atributo HTML que você deve inserir no elemento pai do DOM que engloba cada ficha de produto.
Exceto em casos muito excepcionais, o normal é que você possa inserir esse código em um elemento HTML já existente no seu tema; ou seja, não deve ser necessário criar um novo elemento com esse atributo que englobe toda a ficha de produto.
-
- Traduzido com a versão gratuita do tradutor - DeepL.com
-
O objetivo é gerar um código semelhante ao seguinte:
<body> ... <div class="my-theme-product-card" data-bri-product-card data-bri-product-id="86461581684"> ... inner html of this product card </div> ... <div class="my-theme-product-card" data-bri-product-card data-bri-product-id="95168765168"> ... inner html of this product card </div> ... <div class="my-theme-product-card" data-bri-product-card data-bri-product-id="21564846848"> ... inner html of this product card </div> </body>
-
Personalização de estilos:
Na página de gerenciamento do Brilliant, vá para Configurações / Estilos gerais e ajuste as cores e a tipografia para que o assistente se pareça o máximo possível com sua loja:
4. Verificações de funcionamento
Para verificar se a instalação foi bem-sucedida, navegue pela sua loja e confira os seguintes elementos:
-
Botão flutuante: O botão de ativação do Brilliant deve aparecer no canto do seu site.
-
Cartões de produto: Você deve ver os chips ou etiquetas inteligentes integrados nos cartões de produto.
-
Interação: Faça uma pergunta ao assistente e verifique se as respostas são geradas corretamente com base no seu catálogo.
Quer saber mais?