Adicionar um botão Comprar ou uma coleção incorporada ao seu site

Após adicionar o canal de vendas Botão Comprar no seu admin da Shopify, você pode criar um novo Botão Comprar para um produto ou coleção.

Exemplo de botão de compra

Existem duas maneiras de criar Botões Comprar:

  • Você pode gerar código para incorporar no HTML de uma página da Web que exibe um Botão Comprar nessa página. Você pode personalizar a aparência dos Botões Comprar e vinculá-los ao seu checkout da Shopify, a um carrinho de compras ou a uma descrição do produto. O código do Botão Comprar pode destacar um único produto ou uma coleção.

  • Você pode gerar um link de checkout para adicionar a uma campanha por e-mail, mensagem direta ou publicação em redes sociais.

Obs.: Você pagará uma taxa de transação cada vez que um cliente fizer uma compra usando o botão Comprar, a menos que ative também o Shopify Payments.

Criar um Botão Comprar para um único produto

Você pode criar um Botão Comprar que destaca um único produto. Ao criar o Botão Comprar, você pode escolher um modelo e personalizar a cor, o texto e a aparência do botão, bem como a ação que acontece quando um cliente clica nele. Saiba mais sobre como personalizar os Botões Comprar.

Passos:

  1. Clique em Criar Botão Comprar.

  2. Selecione um produto do seu catálogo ou use a pesquisa para encontrar um produto. Clique em Selecionar produto.

  3. Escolha um modelo e personalize a cor, o texto e a aparência do botão, bem como a ação que acontece quando um cliente clica no botão:

    Criação do botão Comprar

    Para saber mais sobre as diferentes maneiras de personalizar os Botões Comprar, consulte Personalizar os Botões Comprar

  4. Clique em Gerar código.

  5. Clique em Copiar código na área de transferência para copiar o código.

  6. Abra o editor de HTML para a página da Web em que você deseja exibir o Botão Comprar. Consulte Adicionar o código do Botão Comprar ao HTML.

  7. Cole o código dentro do HTML onde você deseja que o Botão Comprar apareça e salve as suas alterações.

Criar uma coleção incorporada

Você pode criar uma coleção incorporada para destacar os produtos em uma coleção com os Botões Comprar:

A coleção incorporada exibe cada produto na coleção com seu próprio Botão Comprar, para que os clientes possam escolher qualquer produto da coleção. Ao criar a coleção incorporada, você pode personalizar a cor, o texto e a aparência dos Botões Comprar nos produtos em destaque, bem como a ação que acontece quando um cliente clica no botão. O botão para cada produto na coleção usa as mesmas personalizações. Saiba mais sobre como personalizar os Botões Comprar.

Passos:

  1. Clique em Criar Botão Comprar.

  2. Clique em Coleções.

  3. Selecione uma coleção e clique em Selecionar coleção.

  4. Personalize a cor, o texto e a aparência, bem como a ação que acontece quando um cliente clica no botão:

    Para saber mais sobre as diferentes maneiras que você pode personalizar os Botões Comprar, consulte Personalizar os Botões Comprar.

  5. Clique em Gerar código.

  6. Clique em Copiar código na área de transferência para copiar o código.

  7. Abra o editor de HTML para a página da Web em que você deseja exibir a coleção incorporada. Consulte Adicionar o código do Botão Comprar ao HTML.

  8. Cole o código de incorporação dentro do HTML onde você deseja que a coleção incorporada apareça e salve as suas alterações.

Personalizar os Botões Comprar

Você pode personalizar a cor, o tamanho e a aparência do botão Comprar, além de selecionar a ação que acontece quando o botão é clicado. Quando você cria um Botão Comprar para um único produto, também pode escolher um modelo para o botão Comprar. Você pode pré-visualizar suas escolhas antes de gerar o código na página Criar.

Modelos do Botão Comprar

Ao criar um Botão Comprar para um único produto, você pode escolher entre os seguintes modelos:

<table>
  <tr>
    <td style="min-width: 90px"><img src="/assets/manual/buy-button/icon-product-button.png" width="60" alt="Icon of a product image with a button"></td>
    <td><strong>Basic template</strong></td>
    <td>Select this template to display a product image and price beside the Buy Button.</td>
  </tr>
  <tr>
    <td><img src="/assets/manual/buy-button/icon-button.png" width="60" alt="Icon of only a rounded button"></td>
    <td><strong>Button template</strong></td>
    <td>Select this template to add a Buy Button without any product image. You might want to do this if you already display your products elsewhere online but want to add a checkout link.</td>
  </tr>
  <tr>
    <td><img src="/assets/manual/buy-button/icon-product-desc-button.png" width="60" alt="Icon of a product image with text and a button on the right side"></td>
    <td><strong>Enhanced template</strong></td>
    <td>Select this template to display a product image, price, and description beside the Buy Button.</td>
  </tr>
</table>

Ações do Botão Comprar

Ao criar um Botão Comprar, você pode selecionar uma ação na lista Ação no clique. Quando alguém clica no Botão Comprar em uma página, uma das seguintes coisas acontecerá:

  • Adiciona produto ao carrinho adiciona o produto ao carrinho de compras. Os clientes podem continuar comprando e adicionar mais produtos ao carrinho.
  • Direciona compradores para o checkout leva o cliente diretamente ao seu checkout, onde ele pode comprar o produto. Os clientes não podem adicionar mais produtos ao pedido deles.
  • Exibe detalhes do produto apresenta uma descrição do produto com um botão Adicionar ao carrinho. Se um produto tiver várias imagens de produto, elas também serão exibidas.

Tamanho e alinhamento do Botão Comprar

Você pode selecionar o tamanho e o alinhamento das partes do Botão Comprar nos menus suspensos Tamanho e Alinhamento. É possível visualizar o botão Comprar para ajudá-lo a decidir quais opções se adequarão melhor à sua página da Web.

Aparência do Botão Comprar

  • Estilo e texto do botão inclui as opções de estilo e cor para a parte do Botão Comprar.
  • Estilo da fonte inclui opções de fonte e cor para o texto do botão Comprar e suas informações sobre o produto.
  • O carrinho de compras inclui opções de texto e cor para o carrinho de compras incorporado.

Você pode usar o canal Botão Comprar para criar links de checkout, nos quais os clientes podem clicar para adicionar uma única variante de produto em um checkout. Você pode adicionar links de checkout a mensagens de e-mail, publicações de redes sociais ou mensagens diretas para compartilhar facilmente um produto com os clientes.

Passos:

  1. Clique em Criar link de checkout.

  2. Selecione o produto e clique em Selecionar produto.

  3. Se o seu produto tiver mais de uma variante, selecione uma variante. Cada link de checkout pode destacar apenas uma variante de produto.

  4. Clique em Copiar Link para copiar o link.

  5. Cole o link diretamente em uma mensagem, e-mail, ou publicação de redes sociais.

Você pode compartilhar links de checkout em campanhas por e-mail, publicações de redes sociais ou mensagens diretas. Depois de criar o link, você pode copiar o texto do link e colá-lo em qualquer lugar para compartilhar o checkout transparente com os clientes.

Os exemplos a seguir mostram algumas maneiras diferentes que você pode usar links de finalização da compra:

Pronto(a) para começar a vender com a Shopify?

Experimente de graça