Se você utiliza a Shopify como plataforma de e-commerce, é possível potencializar sua operação com os Botões de compra da Yampi — uma funcionalidade que permite criar botões de compra personalizados e integrá-los diretamente nas páginas de produto da sua loja da Shopify ou em landing pages, blogs, por exemplo.
Nesse artigo, vamos mostrar o que é o Buy Button e como você pode criar na Yampi:
O que é o Buy Button/Botão de compra e como funciona?
O Buy Button da Yampi é uma funcionalidade que permite criar um botão de compra personalizado e integrá-lo diretamente na sua loja Shopify. Ele redireciona o cliente para o Checkout da Yampi, com o produto já adicionado ao carrinho — oferecendo uma experiência de compra fluida, rápida e integrada.
Ele é ideal para quem quer:
Criar um botão de compra personalizado e integrá-lo diretamente na sua loja Shopify
Criar kits ou bundles diretamente no painel da Yampi, mantendo o controle de estoque centralizado;
Evitar o uso do App Bundle da Shopify, que não possui compatibilidade com o checkout da Yampi;
Personalizar a jornada de compra e substituir o botão de compra padrão da Shopify.
Divulgar produtos fora da loja (como em blogs ou landing pages);
O comportamento do botão varia de acordo com o tipo de produto:
Produtos sem variação: o item é adicionado diretamente ao Checkout;
Produtos com variações ou campos de personalização: é exibido um modal para que o cliente selecione as opções antes de finalizar a compra.
Como criar Buy Button/Botão de compra na Yampi?
⚠️Atenção: Antes de realizar o tutorial abaixo, é necessário que a Yampi esteja integrada na Shopify . Caso ainda não esteja, você pode integrar seguindo o nosso tutorial: Como configurar o Checkout da Yampi na Shopify?
Passo 1 - Acesse o seu Painel da Yampi.
Passo 2 - Clique em "Produtos" → "Botões de compra" → "+Novo botão de compra".
Passo 3 - Escolha se deseja criar o botão para um Produto ou para um Kit.
Passo 4 - Complete com as informações abaixo.
Nome do botão
Nome do botão
Insira um nome para identificar o botão (esse nome não será visível para os seus clientes).
Produto
Produto
Selecione o produto que deseja vincular ao botão. Caso o produto tenha variantes, escolha se o botão será para uma variante específica ou para todas.
Botão
Botão
Configure as opções visuais do botão:
- Escolha se deseja exibir a foto, nome e preço do produto.
- Decida se quer incluir um campo para o cliente selecionar a quantidade.
- Personalize o texto do botão (CTA), a cor do botão e do texto, e o formato dos cantos.
Passo 5 - Após finalizar as configurações, salve o botão.
Passo 6 - Copie o código HTML gerado, você pode inseri-lo em sua landing page ou loja da Shopify. Para saber como instalar o Buy Button na Shopify, prossiga para o próximo tópico.
Para saber mais detalhes, veja o nosso tutorial completo: Como criar um botão de compra na Yampi?
Como instalar o Buy Button/Botão de compra da Yampi na Shopify?
Passo 1 - Copie código HTML do Buy Button criado no Painel da Yampi.
Passo 2 - Entre em seu painel do Shopify em: "Produtos" → Selecione o produto.
Passo 3 - Na descrição do produto, clique em "Mostrar HTML" e cole o seu código.
Passo 4 - Clique em "Salvar".
E pronto, botão criado! 🥳
Como centralizar o Buy Button/Botão de compra na Shopify?
Passo 1 - Acesse o produto que contém o botão que deseja centralizar.
Passo 2 - Na descrição do produto, clique em "Mostrar HTML" e envolva o código com as tags "<center>" e fechar com "</center>".
<center>
[COLE AQUI O CÓDIGO DO BUY BUTTON]
</center>
Conforme o exemplo abaixo:
Logo após, caso o botão de compra da Shopify esteja ativo em sua loja, basta seguir esses passos:
1. Acesse na Shopify: "Loja virtual" → "Temas" → "Personalizar".
2. Clique em "Página de produtos" → "Botões de compra".
3. Desabilite a opção "Botões de checkout dinâmico" → "Salvar":
Assim, o Buy Button da Yampi estará ativo em sua loja Shopify:
Dúvidas frequentes
▶️Clique na setinha para abrir o conteúdo de Dúvidas frequentes*
Estou copiando o código HTML do botão para usar na minha Landing page, mas não está funcionando. O que fazer?
Estou copiando o código HTML do botão para usar na minha Landing page, mas não está funcionando. O que fazer?
amos revisar o processo para garantir que tudo esteja configurado corretamente:
1. No painel da Yampi, acesse Produtos > Botões de Compra e copie o código HTML do botão que você criou.
2. No editor da sua landing page, como o PageFly, vá em Adicionar Elemento > HTML / Liquid e arraste o bloco para o local onde deseja posicionar o botão.
3. Clique no bloco que você adicionou e selecione Open Code Editor. Cole o código HTML do botão de compra da Yampi no editor e salve as alterações.
4. Após salvar, publique a página para verificar se o botão está funcionando corretamente.
Se ainda assim não funcionar, verifique se o código foi copiado integralmente e se a página foi publicada corretamente.
🗨️Caso precise de mais orientações, você pode entrar em contato com o nosso suporte, clicando no ícone de atendimento em seu painel da Yampi
Posso personalizar a cor, fonte ou tamanho do Buy button?
Posso personalizar a cor, fonte ou tamanho do Buy button?
Essas alterações visuais não são possíveis de forma nativa. Você pode considerar a possibilidade de ajustar isso através de um código CSS customizado. Para isso, recomendamos que você entre em contato com um programador de confiança para te ajudar com essa personalização.
Se precisar de alguma indicação de desenvolvedores ou agências que fazem esse tipo de trabalho, você pode conferir os especialistas parceiros da Yampi aqui: https://www.yampi.com.br/especialistas/lista
Em caso de dúvidas, nos encaminhe para [email protected] ou clique no balãozinho que consta em sua dashboard 😉