Botão Comprar da Shopify: como transformar qualquer site em uma loja virtual

A Shopify não é apenas para negócios de e-commerce estabelecidos. Qualquer pessoa que busca monetizar projetos⁠ (blogueiros, artistas, escritores, designers, podcasters ou influenciadores⁠) pode se beneficiar com a venda on-line.

Porém, configurar uma loja on-line demanda tempo, e redirecionar o tráfego da web pode dificultar o processo de checkout, impactando negativamente suas vendas. O botão Comprar da Shopify é a solução!

Comece com o botão Comprar da Shopify em três etapas

1. Adicione o canal de vendas do botão Comprar à sua loja da Shopify
2. Crie um botão Comprar
3. Adicione o código de incorporação do botão Comprar ao HTML do seu site

1. Adicione o canal de vendas do botão Comprar à sua loja da Shopify

Comece fazendo login na sua loja da Shopify. Se você já vê o botão Comprar listado sob seus canais de vendas no menu à esquerda, você pode pular para a segunda etapa.

No desktop

1. Acesse a página do canal de vendas do botão Comprar na Shopify App Store (você também pode chegar a essa página acessando “Configurações” > “Visitar a Shopify App Store” e pesquisando “botão Comprar”).
2. Clique em “Adicionar app”, depois em “Adicionar canal de vendas” na próxima tela.

Após a página ser atualizada, você deverá ver o botão Comprar listado sob “Canais de vendas” no menu à esquerda. Certifique-se de fixar o canal na sua navegação para ter um fácil acesso no futuro.

Se você não fixar o botão Comprar, pode encontrá-lo novamente clicando em “Canais de vendas” e no “botão Comprar” sob seus canais instalados.

Em dispositivos móveis

1. Abra o app da Shopify no seu dispositivo móvel e selecione “Loja” no menu inferior.
2. Ao lado de “Canais de vendas”, selecione “Adicionar canal” (no iPhone) ou + (no Android).
3. Selecione “botão Comprar” na lista de opções e toque em “Adicionar botão Comprar”.

2. Crie um botão Comprar

Depois de adicionar o canal de vendas do botão Comprar, você está pronto para começar a criar o seu botão Comprar. Navegue até a sua página do botão Comprar, clicando em “botão Comprar” (se você o fixou na navegação) ou indo em “Configurações” > “Apps e canais de vendas” > “botão Comprar”.

Depois, clique em “Criar um botão Comprar”.

Você pode criar botões Comprar para um único produto ou para uma coleção inteira de produtos. Na próxima tela, você precisará selecionar qual opção prefere. Clique nela, depois pesquise o produto ou coleção que deseja usar para criar seu botão Comprar.

Certifique-se de que a caixa de seleção esteja marcada e clique em “Selecionar”.

Depois de fazer sua seleção, você será redirecionado ao editor do botão Comprar, onde poderá personalizar a aparência do seu botão Comprar.

Como personalizar seu botão Comprar

No editor do botão Comprar, você verá várias opções listadas no lado esquerdo para personalizar a aparência do seu botão Comprar. À direita, você verá uma prévia de como seu botão Comprar ficará.

Ajuste as opções à esquerda conforme sua preferência. Sua prévia será atualizada automaticamente para que você possa ver como seu botão Comprar ficará enquanto faz os ajustes. Você também pode ver como seu botão Comprar aparecerá em telas de desktop e móveis clicando nos ícones de desktop ou móvel centralizados na parte superior do editor.

Confira um resumo das opções que você pode personalizar.

• Variantes do produto: selecione quais variantes do produto você deseja que sejam compráveis por meio do botão Comprar. Todas as variantes serão selecionadas por padrão.
• Layout: escolha entre “Básico”, “Clássico” e “Visão completa”. À direita, você verá uma prévia de cada layout ao selecioná-lo no menu suspenso “Layout”.
• Ação ao clicar: escolha entre “Adicionar produto ao carrinho”, “Direto para checkout” ou “Abrir detalhes do produto”. A opção “Adicionar produto ao carrinho” criará um widget de carrinho no lado direito da sua tela. A opção “Direto para checkout” criará um botão de “Comprar agora” que levará o usuário diretamente ao checkout (observe que os clientes não poderão adicionar mais de um item ao carrinho usando esta opção). A opção “Abrir detalhes do produto” criará um botão de “Visualizar produto” que abre um pop-up com informações do produto e um botão de “Adicionar ao carrinho”.
• Estilo do botão: aqui você pode ajustar as cores, fonte, tamanho e formato das bordas do seu botão Comprar.
• Layout: permitirá que você faça ajustes mais finos no layout do seu botão. Você pode personalizar as cores da fonte, o texto do botão e as configurações de tipografia.
• Carrinho de compras: aqui você poderá ajustar as configurações do widget do carrinho de compras, incluindo texto e cores. Observe que esta opção ficará desativada se você usar o layout “Direto para checkout”, pois não há widget de carrinho.
• Pop-up detalhado: se você selecionar “Abrir detalhes do produto” em “Ação ao clicar”, poderá personalizar o texto, as cores e as opções de tipografia para o pop-up nesta seção.
• Configurações avançadas: aqui você pode ajustar como seu checkout é apresentado ao usuário. Você pode selecionar “Abrir janela pop-up” (que criará um checkout em pop-up que se fecha quando o pedido é concluído) ou “Redirecionar na mesma aba” (que levará o usuário à sua página de checkout da Shopify e retornará à sua página quando a transação for concluída).

Lembre-se de que ajustar essas configurações não mudará os botões Comprar que já foram incorporados. Reserve um tempo e certifique-se de que o botão Comprar esteja formatado de acordo com sua preferência antes de passar para a próxima etapa.

Quando você estiver satisfeito com seu design, clique no botão “Próximo” no canto superior direito.

3. Adicione o código de incorporação do botão Comprar ao HTML do seu site

Quando você clicar em “Próximo”, o código de incorporação do seu botão Comprar será gerado automaticamente. Clique no botão “Copiar código” se você estiver pronto para incorporá-lo em uma página da web, ou no botão “Continuar personalizando” se quiser voltar ao editor do botão Comprar para fazer ajustes.

O código que você copiou aqui pode ser colado no HTML de qualquer página da web. Ele criará um botão Comprar e um carrinho que se conectarão diretamente ao seu administrador da Shopify, permitindo que você gerencie e processe pedidos de qualquer página.

O processo de adicionar o código de incorporação varia dependendo de como você deseja que o botão apareça e qual criador de sites e tema você está usando.

Confira os passos que você precisa seguir para incorporar um botão Comprar da Shopify na página inicial da sua loja da Shopify ou em um post de blog, em um site Squarespace ou em um blog WordPress.

Adicione o código de incorporação a uma página de destino ou post de blog na sua loja da Shopify

Sua loja da Shopify já terá páginas de produtos e um carrinho integrados, mas ocasionalmente pode haver situações em que você gostaria de adicionar um botão Comprar diretamente em uma página ou post de blog para maior conveniência.

Por exemplo, se você estivesse escrevendo um post de blog sobre um produto recém-lançado, poderia querer oferecer aos leitores uma maneira fácil de comprar diretamente do post em vez de redirecioná-los para uma página separada.

Nesse caso, siga os passos a seguir.

1. Primeiro, siga os passos acima para copiar o código de incorporação do botão Comprar.
2. No seu administrador da Shopify, acesse “Loja on-line” > “Posts de blog” ou “Loja on-line” > “Páginas”, dependendo se você está adicionando a um post de blog ou a uma página.
3. Selecione o post de blog ou a página onde deseja adicionar o botão Comprar.
4. Na janela “Conteúdo”, selecione o botão “<>” para alternar da visualização de edição para a visualização HTML.
   
   

Cole o código de incorporação que você copiou anteriormente no editor HTML onde você quer que ele apareça. Clique em “Salvar”.

Quando você tiver salvo sua página ou post de blog, seu botão Comprar será adicionado à página. Se você quiser ver como fica sem publicar, selecione “Visualizar” (ou “Ver página” se você estiver adicionando a uma página) no canto superior direito do editor de página.

Adicione um botão Comprar a um site Squarespace

No Squarespace, você poderá adicionar seu botão Comprar a posts individuais ou a menus na sua página inicial. 

Para adicionar um botão Comprar ao seu site Squarespace…

1. Primeiro, siga os passos acima para copiar o código de incorporação do botão Comprar.
2. Faça login no seu painel do Squarespace e abra a página onde deseja adicionar um botão Comprar.
3. Passe o mouse sobre a área de “Conteúdo da Página” onde deseja que o botão Comprar apareça e clique em “Editar”.
4. Selecione o ponto de inserção onde deseja adicionar o código de incorporação.
5. No menu “Blocos de Conteúdo”, na seção “Mais”, selecione “Código”.
6. Certifique-se de que “HTML” esteja selecionado no menu suspenso no canto superior direito e cole o código de incorporação do botão Comprar no campo “Código”.
7. Clique em “Aplicar”.

Lembre-se de que alguns temas personalizados do Squarespace podem exigir mais conhecimento avançado de HTML para personalizações. Nesses casos, é melhor entrar em contato diretamente com um desenvolvedor para ajudar a adicionar um código personalizado ao seu site.

Adicione um botão Comprar a um blog WordPress

Para adicionar um botão Comprar a um post no seu site WordPress.org…

1. Primeiro, siga os passos acima para copiar o código de incorporação do botão Comprar.
2. Do seu painel do WordPress, vá para seus posts e selecione aquele ao qual você gostaria de adicionar um botão Comprar.
3. Dependendo da versão do editor do WordPress que você está usando, complete um dos seguintes passos:
   1. se você estiver usando o Editor clássico para seu site WordPress, clique na aba “Texto” no editor para alternar da visualização “Visual” para a visualização de “Texto”;
   2. se você estiver usando o Editor de blocos para seu site WordPress, clique no botão “+”, depois pesquise e selecione “HTML personalizado”.
4. Cole o código de incorporação do botão Comprar no espaço onde você gostaria que ele aparecesse.
5. Clique em “Salvar rascunho”, “Visualizar” ou “Publicar”, dependendo da ação que você gostaria de realizar.

Você também pode adicionar o código de incorporação a um menu do WordPress completando os passos a seguir.

1. Primeiro, siga os passos acima para copiar o código de incorporação do botão Comprar.
2. Do seu painel do WordPress, clique em “Aparência”.
3. Selecione “Personalizar” para abrir o editor de temas, depois selecione “Widgets”.
4. Selecione a área onde você gostaria de adicionar seu botão Comprar.
5. Clique em “Adicionar um Widget”, depois em “Texto”.
6. Cole o código de incorporação do botão Comprar.
7. Clique em “Salvar e publicar”.

Observe que os botões Comprar Shopify são compatíveis com a plataforma WordPress.org, mas não com o WordPress.com, devido a limitações de personalização HTML.

Adicione um botão Comprar ao Wix

Para adicionar um botão Comprar da Shopify ao seu site Wix, siga os passos a seguir.

1. Primeiro, siga os passos acima para copiar o código de incorporação do botão Comprar.
2. Do seu painel Wix, selecione o site na página “Meus sites” ao qual você gostaria de adicionar o botão Comprar e selecione “Editar site”.
3. No editor do site Wix, clique em “+”, depois em “Mais”. Selecione “Código HTML”. Isso adicionará um widget de código HTML à sua página.
4. Clique em “Inserir código”. Na janela de “Configurações HTML”, cole seu código de incorporação do botão Comprar no campo “Adicione código aqui”.
5. Clique em “Aplicar”.
6. Ajuste o tamanho do widget de código HTML conforme sua preferência. Lembre-se de garantir que a aba do carrinho esteja visível se você incorporou um botão Comprar com um carrinho.
7. Quando terminar os ajustes, clique em “Salvar”.

Vale ressaltar que, se você deseja incorporar botões Comprar para vários produtos, é melhor incorporar um botão Comprar de coleção em vez de um botão Comprar para um único produto. Se você incorporar vários botões Comprar de produtos únicos, os visitantes verão um carrinho separado para cada produto.

Adicione tags de script do botão Comprar da Shopify

Em alguns casos, criadores de sites (como o Unbounce) exigirão que você cole as tags script separadamente no seu cabeçalho enquanto cola o restante do código no corpo da sua página, onde você gostaria que o botão Comprar aparecesse.

Para fazer isso, você precisará separar o elemento script do elemento div no seu código de incorporação do botão Comprar. Você verá o elemento div no topo do código. Ele aparece da seguinte forma:

<div id="product-component-1655929612938"></div>

O elemento script (que é muito mais longo) compõe o restante do código de incorporação, começando com script type="text/javascript" e terminando com script.

Quando você tiver esses elementos separados, siga os passos abaixo.

1. Abra o cabeçalho da página para o site onde você deseja incorporar seu botão Comprar.
2. Copie e cole o elemento script, na íntegra, no cabeçalho da sua página do site.
3. Salve suas alterações.
4. Agora, abra o editor da página onde você deseja adicionar seu botão Comprar da Shopify.
5. Copie e cole o elemento div na página, onde você deseja que seu botão Comprar apareça.
6. Salve suas alterações.

Adicione um e-commerce a qualquer site com um botão Comprar da Shopify

Os botões Comprar Shopify ajudam os vendedores a encontrar clientes onde quer que eles estejam⁠, não importa a página ou a plataforma. A conveniência de vender diretamente aos clientes sem precisar redirecioná-los para outra página reduz os obstáculos e pode ajudar a aumentar as vendas.

Para os proprietários de lojas, um botão Comprar estrategicamente posicionado em uma página de blog pode oferecer aos clientes uma maneira fácil de comprar produtos sem sair da página em que estão.

Para blogueiros, artistas, escritores, designers, podcasters, influenciadores e qualquer outra pessoa que busca monetizar o próprio trabalho, os botões Comprar da Shopify oferecem uma maneira simples de aproveitar a plataforma de e-commerce da Shopify sem precisar construir um site novo.

Com estilos, cores e funcionalidades personalizáveis, os botões Comprar da Shopify permitem que você transforme qualquer página ou site em uma loja on-line completa.