O aplicativo Connectif Checkout Extension é um aplicativo para personalizar a tela de pagamento no Shopify, que serve para mostrar na página de checkout um componente personalizado com recomendações de produtos enviadas pela Connectif.
Neste artigo, explicamos como configurar a extensão Connectif Checkout no seu eCommerce para poder adicionar o componente de recomendação de produtos.
Para configurar este componente, você deve ter uma conta Shopify Plus. Além disso, para que o eCommerce possa receber eventos de produtos recomendados, é necessário criar e configurar os workflows necessários com o nó “Compartilhar dados”.
1. Propriedades
- Nas integrações com o Shopify existe uma extensão de interface de usuário compatível com Shopify Plus que permite adicionar, na página de checkout da sua loja Shopify, blocos de produtos personalizados.
- Esse bloco exibirá os produtos personalizados e permitirá adicioná-los diretamente ao carrinho, desde que sua integração com o Shopify esteja configurada para registrar os produtos na Connectif por ID.
- Se estiverem configurados para serem registrados por SKU, o bloco mostrará um botão para "Ver" o produto, mas não para adicioná-lo ao carrinho.
Se você precisar de mais informações sobre a configuração do registro de produtos na Connectif na sua integração com Shopify, confira este artigo.
- Para exibir o bloco de produtos, você deve configurar o workflow responsável por isso na Connectif, por meio do nó "Compartilhar dados" (ver item 2.2.).
- Se o workflow não estiver configurado, você verá uma pré-visualização do bloco na sua loja Shopify, mas ele não será exibido para seus contatos.
- Além disso, mesmo que essa informação não seja exibida, o nó "Compartilhar dados" gerará a atividade no perfil do contato e na sua Loja Connectif.
2. Como usar na Connectif
2.1. Configurar a extensão de Checkout no Shopify
Certifique-se de que a integração com o Shopify está ativa na sua Loja Connectif antes de configurar este componente. Além disso, se você deseja que os contatos possam adicionar produtos ao carrinho pela página de checkout, é necessário ter o registro de produtos por ID.
1. Acesse sua conta do Shopify, vá para Tela de pagamento e clique em Personalizar. Você também pode acessar por "Loja online > Temas > Personalizar tema" e selecionar a página de pagamento.
2. No menu lateral, vá para Aplicativos.
3. Procure por "Connectif Checkout Extension" e adicione.
4. Uma vez concluída a instalação, você poderá adicionar o elemento do componente personalizado. Para isso, no menu lateral, vá para Seções.
5. Clique em Adicionar bloco de aplicativo onde deseja adicionar o bloco e, no menu suspenso, selecione Connectif Checkout Extension.
5. Configure os parâmetros do componente. As alterações serão exibidas em tempo real na pré-visualização.
- Identificador: para indicar o ID do nó "Compartilhar dados" do qual serão extraídas as informações para mostrar os produtos. Este deve ser o mesmo configurado nesse nó, caso contrário, não funcionará.
- Número de produtos: para configurar a quantidade de produtos que o bloco irá exibir.
- Proporção da imagem: para selecionar a proporção da imagem que será exibida no bloco.
- Ajuste da imagem: para selecionar como a imagem será exibida dentro do contêiner.
- Mostrar descrição do produto: para escolher entre mostrar ou ocultar a descrição.
- Estilo do botão: para escolher o estilo do botão, de acordo com o que está configurado para o seu checkout no Shopify.
2.1.1. Desativar a opção WebPixel
Se você tiver a extensão de Checkout do Shopify ativada, pode desativar o evento de visita de página do Web Pixel para evitar que os eventos de Page Visit sejam duplicados no Connectif.
Se você ativar a extensão de Checkout, recomendamos desativar a extensão WebPixel para evitar duplicidade na coleta de dados sobre as visitas à página de checkout.
1. No seu conta Shopify, vá para "Aplicativos e canais de vendas" e acesse as configurações da sua integração com Connectif.
2. Na seção Web Pixel, marque a caixa Desabilitar evento de visita de página no checkout.
Esta opção estará disponível apenas se você tiver uma conta Shopify Plus, para que possa desativá-la caso ative a extensão de checkout.
3. Clique em Salvar configurações.
2.2. Como exibir o componente personalizado para seus contatos
Para que o componente seja exibido aos seus contatos com os produtos personalizados, além de adicionar o bloco do aplicativo na configuração da sua página de pagamento no Shopify, você deve ter um workflow responsável por isso.
Você pode adicionar vários blocos personalizados à sua página de checkout, desde que cada um deles esteja vinculado a um nó "Compartilhar dados", seguindo o procedimento mostrado neste exemplo.
1. Na sua Loja Connectif, vá até Workflows e crie um novo Workflow Personalizado.
2. Na interface do nó "Início" defina o público para o qual deseja mostrar este conteúdo ao visitar a página de checkout. No nosso exemplo, determinamos que a estratégia se ative para Toda a minha lista e para Todos os contatos existentes e novos.
3. Adicione ao seu workflow um nó "Ao visitar página web" e conecte-o ao nó "Início".
4. Na interface dele, escolha a opção Qualquer página que comece por e insira a URL da sua página de checkout. Em Limitações, desative a opção Desativar após disparar. Assim, qualquer contato que visitar a página de checkout entrará no workflow, todas as vezes que visitar a página de checkout.
Certifique-se de ativar a estratégia apenas nas páginas onde você terá o contêiner do nó "Compartilhar dados".
5. Adicione um nó "Obter produtos" e conecte-o ao nó "Ao visitar página web".
6. Na interface, selecione entre os casos de uso disponíveis aquele ou aqueles que mais se adequam à sua estratégia e configure-os.
Se precisar de mais informações sobre como configurar o nó "Obter produtos", consulte este artigo.
7. Adicione um nó "Compartilhar dados" e conecte-o ao nó "Obter produtos".
8. Na interface do nó, atribua um Identificador que possa ser utilizado depois para recuperar os dados do nó e salve para poder vincular no Shopify. Configure também o Nó de Origem e escolha os dados que deseja compartilhar com o Shopify.
Se precisar de mais informações sobre como configurar o nó "Compartilhar dados", consulte este artigo.
9. Salve e ative seu workflow.
10. Volte à sua conta do Shopify, nas configurações do componente que você adicionou à sua página de pagamento. No campo Identificador, insira o ID que você atribuiu ao nó "Compartilhar dados". Dessa forma, esse bloco obterá as informações do nó "Compartilhar dados" e as usará para personalizar o bloco de produtos do checkout.
Parabéns!
Você chegou ao final da lição.
Ficou com alguma dúvida?
Lembre-se que você tem à disposição nossos especialistas da Connectif. Para entrar em contato, basta abrir um ticket de suporte clicando no botão azul “Ajuda” do seu dashboard.
Continue aprendendo!
Para aproveitar ao máximo o potencial da sua conta Connectif, recomendamos continuar com os seguintes artigos:
- Guia para integrar com Shopify, para aprender passo a passo como integrar sua Loja Connectif com este CMS.
- Nó "Compartilhar dados", para entender o funcionamento deste nó.
- Nó "Obter produtos", para aprender como configurá-lo e obter os produtos desejados em cada caso.
- Produtos automaticamente relacionados, para entender como funciona o mecanismo de relação automática de produtos da Connectif.