Botão comprar da Shopify: como transformar qualquer site numa loja online

A Shopify não é apenas para negócios com sites de e-commerce. Qualquer pessoa que queira monetizar um projeto — blogueiros, artistas, escritores, designers, podcasters, influenciadores — pode usar a Shopify para vender online.

Para quem não deseja configurar uma loja online completa ou complicar o processo pedindo ao seu público que visite um destino externo, o “Botão comprar” da Shopify é uma solução conveniente. Ao longo deste guia, verá formas de usar botões de compra Shopify para vender diretamente no seu próprio site ou blogue.

O que é o “Botão comprar” da Shopify?

O “Botão comprar” da Shopify permite criar e incorporar uma opção de checkout em qualquer tipo de site, para que os clientes possam comprar os seus produtos diretamente na página que estão a visitar.

A Shopify gera o código para incorporar e exibir os seus itens à venda, garantindo que o botão é fácil de configurar, compatível com dispositivos móveis e seguro. Também pode personalizar o esquema de cores, os detalhes do produto e as imagens apresentadas com o “Botão Comprar” para corresponder ao estilo da sua página.

Começar com o “Botão comprar” da Shopify em três passos

1. Adicionar o canal de vendas “Botão comprar” à sua loja Shopify
2. Criar um “Botão comprar”
3. Adicionar o código de incorporação do “Botão comprar” ao HTML do seu site

1. Adicionar o canal de vendas do “Botão Comprar” à sua loja Shopify

Comece por iniciar sessão na Shopify. Se vir o “Botão Comprar” listado nos seus Canais de vendas no menu à esquerda, pode avançar para o passo 2.

No computador

1. Vá à página do canal de vendas “Botão Comprar” na Shopify App Store.

1. Instale a aplicação
2. Fixe a aplicação na sua navegação de Administração (opcional)

Se não fixar o “Botão Comprar”, pode encontrá-lo novamente clicando em Canais de vendas e depois “Botão Comprar” nos seus canais instalados.

Na versão móvel

Abra a aplicação da Shopify no seu dispositivo móvel e selecione “Loja” no menu inferior. Ao lado de “Canais de vendas”, selecione ”Adicionar canal” no iPhone ou + no Android. Selecione “Botão Comprar” e depois toque em “Adicionar Botão Comprar”.

2. Criar um “Botão Comprar”

Depois de adicionar o canal de vendas “Botão Comprar”, está pronto para criar o seu botão.

Na aba “Botão Comprar”, clique em “Criar um Botão Comprar”.

Pode criar “Botão de compra” para um único produto ou para uma coleção inteira de produtos. No ecrã seguinte, ser-lhe-á solicitado que selecione a opção preferida.

Escolha uma opção e, em seguida, selecione quais dos seus produtos gostaria de transformar em “Botão de compra”.

Depois de fazer a sua seleção, será levado ao editor do “Botão Comprar”, onde poderá personalizar a aparência do seu “Botão Comprar”.

Como personalizar o seu “Botão Comprar”

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

Ajuste as opções à esquerda conforme desejar. A sua pré-visualização será atualizada automaticamente, para que possa ver como o seu “Botão Comprar” fica à medida que o ajusta. Também pode ver como o seu “Botão Comprar” aparecerá em ecrãs de computadores e de dispositivos móveis clicando nos ícones de computador ou dispositivo móvel centrados na parte superior do editor.

Aqui está uma descrição das opções que pode personalizar:

• Variante do produto: selecione quais variantes do produto deseja que sejam compráveis através do” Botão Comprar”. Todas as variantes são selecionadas por predefinição.
• Layout: escolha entre “Básico”, “Clássico” e “Visualização completa”. À direita verá uma pré-visualização de cada layout quando o selecionar no menu pendente “Layout”.
• Ação quando as pessoas clicam: escolha entre “Adicionar produto ao carrinho”, “Direto para checkout” ou “Abrir detalhes do produto”.
  
  
  • “Adicionar produto ao carrinho” cria um widget de carrinho no lado direito do ecrã.
  • “Direto para checkout” cria um botão “Comprar agora” que leva o utilizador diretamente para o checkout (tenha em atenção que os clientes não poderão adicionar mais de um item ao carrinho usando esta opção).
  • “Abrir detalhes do produto” cria um botão “Ver produto” que abre um pop-up com informações do produto e um botão “Adicionar ao carrinho”.
    
• Estilo do botão: ajuste cores, tipo de letra, tamanho e raio dos cantos do seu “Botão Comprar”.
  
• Layout (ajustes finos): personalize cores da fonte, texto do botão e definições de tipografia.
• Carrinho de compras: ajuste as definições do widget do carrinho, incluindo texto e cores. Esta opção fica inativa se usar “Direto para checkout”, uma vez que não existe widget de carrinho.
• Pop-up detalhado: se selecionar “Abrir detalhes do produto” em “Ação quando as pessoas clicam”, personalize texto, cores e tipografia do pop-up nesta secção.
• Configurações avançadas: ajuste como o checkout é apresentado ao utilizador. Selecione “Abrir janela pop-up” (cria um checkout em pop-up que se fecha quando o pedido é concluído) ou “Redirecionar na mesma aba” (envia o utilizador para a página de checkout da Shopify e regressa à sua página após a transação).

Lembre-se: ajustar estas definições não altera os “Botões de Compra” que já foram incorporados. Dedique o tempo necessário e assegure-se de que o “Botão Comprar” está formatado como pretende antes de avançar.

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

3. Adicionar o código de incorporação do “Botão Comprar” ao HTML do seu site

Ao clicar em “Próximo”, o código de incorporação para o seu “Botão Comprar” é gerado automaticamente. Clique em “Copiar código” se estiver pronto para incorporá-lo numa página web, ou em Continuar a personalizar se quiser voltar ao editor para fazer ajustes.

O código copiado pode ser colado no HTML de qualquer página web. Ele cria um “Botão Comprar” e um carrinho ligados diretamente à sua administração da Shopify, permitindo que gerencie e processe pedidos a partir de qualquer página.

O processo para adicionar o código varia conforme o construtor de sites, o tema e a forma como deseja que o botão apareça. Abaixo estão os passos para incorporar um “Botão Comprar” da Shopify numa página de destino ou artigo de blogue da sua loja Shopify, num site “Squarespace” ou num blogue “WordPress”.

Adicionar código de incorporação a uma página de destino ou artigo de blogue na sua loja Shopify

A sua loja Shopify já tem páginas de produto e carrinho integrados, mas pode haver situações em que deseja colocar um “Botão Comprar” diretamente numa página ou artigo para maior conveniência.
Exemplo: num artigo sobre um produto recém-lançado, permitir que os leitores comprem sem sair da página.

Siga estes passos:

1. Primeiro, copie o código de incorporação do “Botão Comprar” (passos anteriores).
2. Na administração da Shopify, vá a “Loja online” > “Artigos do blog” ou “Loja online” > “Páginas”, conforme o destino.
3. Selecione o artigo ou a página onde deseja adicionar o “Botão Comprar”.
4. Na janela “Conteúdo”, clique em <> para mudar da vista de edição para a vista HTML.

5. Cole o código de incorporação no editor HTML, no local onde quer que apareça. Clique em “Guardar”.

Depois de guardar, o “Botão Comprar” é adicionado à página. Para ver como fica sem publicar, selecione “Pré-visualizar” (ou “Ver página”, se estiver a editar uma página) no canto superior direito do editor.

Adicionar um “Botão Comprar” a um site Squarespace

No Squarespace, pode adicionar o “Botão Comprar” a artigos individuais ou a menus na página inicial.

1. Copie o código de incorporação do “Botão Comprar”.
2. Inicie sessão no painel do Squarespace e abra a página onde deseja adicionar o botão.
3. Passe o cursor sobre “Conteúdo da página” no bloco onde o Botão deve aparecer e clique em Editar.
4. Selecione o ponto de inserção onde pretende colocar o código.
5. No menu “Blocos de conteúdo”, em “Mais”, selecione “Código”.
6. Garanta que HTML está selecionado no menu no canto superior direito e cole o código no campo “Código”.
7. Clique em “Aplicar”.

Alguns temas personalizados do Squarespace podem exigir conhecimentos avançados de HTML para personalizações. Nestes casos, contacte um programador para ajudar a adicionar código personalizado ao seu site.

Adicionar um “Botão Comprar” a um blog WordPress

Para adicionar um “Botão Comprar” a um artigo no seu site WordPress.org:

1. Copie o código de incorporação do “Botão Comprar”.
2. No painel do WordPress, vá a “Artigos” e selecione o artigo onde pretende adicionar o Botão.
3. Dependendo do editor em uso:
   
   
   • Editor Clássico: clique na aba “Texto” para mudar da vista Visual para Texto.
   • Editor de Blocos (Gutenberg): clique em +, pesquise HTML Personalizado e selecione o bloco.
     
4. Cole o código no local pretendido.
5. Clique em “Guardar rascunho”, “Pré-visualizar” ou “Publicar”.

Para adicionar o código de incorporação a um menu/widget do WordPress:

1. Copie o código de incorporação.
2. No painel do WordPress, clique em “Aparência”.
3. Selecione “Personalizar” para abrir o editor de temas e depois “Widgets”.
4. Escolha a área onde quer adicionar o “Botão Comprar”.
5. Clique em “Adicionar um widget” e selecione “Texto”.
6. Cole o código do “Botão Comprar”.
7. Clique em “Guardar” e “Publicar”.

Os “Botões de Compra” da Shopify são compatíveis com WordPress.org, mas não com WordPress.com, devido a limitações de personalização de HTML.

Adicionar um “Botão Comprar” ao Wix

Para adicionar um “Botão Comprar” da Shopify ao seu site Wix, siga estes passos:

1. Copie o código de incorporação do “Botão Comprar”.
2. No painel do Wix, clique em “Os meus sites”, selecione o site e clique em “Editar site”.
3. No editor do Wix, clique em “+” > “Mais” > “Código HTML” para adicionar um widget de código à página.
4. Clique em “Inserir código”. Em “Configurações HTML”, cole o código no campo “Adicionar código aqui”.
5. Clique em “Aplicar”.
6. Ajuste o tamanho do widget de código HTML conforme necessário. Garanta que a aba do carrinho fica visível se tiver incorporado um “Botão com carrinho”.
7. Clique em “Guardar”.

Se pretende incorporar Botões para vários produtos, opte por um “Botão Comprar” de coleção. Se incorporar múltiplos botões de produto único, os visitantes verão um carrinho separado para cada produto.

Adicionar tags de script do Botão Comprar da Shopify

Alguns construtores (por exemplo, Unbounce) exigem colar as tags de script separadamente no cabeçalho, enquanto o restante código vai no corpo da página, no local onde o Botão deve aparecer.

Para isso, separe o elemento script do elemento div no seu código de incorporação do Botão Comprar.

• O elemento div encontra-se no topo do código e tem aspeto semelhante a:
  <div></div>
• O elemento script (mais longo) compõe o restante do código, começando com script type="text/javascript" e terminando com /script.
  

Passos:

1. Abra o cabeçalho da página do site onde deseja incorporar o Botão.
2. Copie e cole o elemento script, na íntegra, no cabeçalho. Guarde as alterações.
3. Abra o editor da página onde deseja adicionar o Botão Comprar.
4. Copie e cole o elemento div na posição onde quer que o Botão apareça.
5. Guarde as alterações.

Adicionar e-commerce a qualquer site com um “Botão Comprar” da Shopify

Os “Botão de compra” da Shopify ajudam a encontrar os clientes onde eles já estão, independentemente da página ou plataforma. Vender diretamente na página reduz a fricção e pode aumentar as vendas.

Para lojistas, colocar estrategicamente um botão num artigo de blogue dá aos clientes uma forma imediata de comprar sem sair da página.

Para blogueiros, artistas, escritores, designers, podcasters, influenciadores e outros criadores que querem monetizar o seu trabalho, os “Botão de compra” oferecem formas de usar botões de compra Shopify para vender e aproveitar a plataforma de e-commerce da Shopify sem construir um site novo de raiz.

Com estilos, cores e funcionalidades personalizáveis, os “Botão de compra” da Shopify permitem transformar qualquer página num site de comércio eletrónico completo.