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.

Criar um Botão Comprar para um único produto

Você pode criar um Botão Comprar que destaca um único produto que inclua uma ou todas as variantes de um 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. Se o seu produto tiver múltiplas variantes, selecione Todas as variantes ou selecione uma variante na lista suspensa.

  4. 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

  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 o Botão Comprar. Consulte Adicionar o código do Botão Comprar ao HTML.

  8. 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:

Ícone de uma imagem de produto com um botão Modelo básico Selecione este modelo para exibir uma imagem do produto e preço ao lado do botão Comprar.
Ícone de apenas um botão arredondado Modelo de botão Selecione este modelo para adicionar um botão Comprar sem imagem do produto. Você pode querer fazer isso se já apresentar os seus produtos em outro local online, mas quer adicionar um link de pagamento.
Ícone de uma imagem de produto com texto e um botão no lado direito Modelo avançado Selecione este modelo para exibir uma imagem do produto, preço e descrição ao lado do botão Comprar.

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.

Depois de criar um link de checkout, você precisa compartilhar o link com os clientes para que eles possam usá-lo. Você pode copiar o texto do link e colá-lo em campanhas de e-mail, postagens de mídia social ou mensagens diretas. Por exemplo, você pode colar o link em uma postagem do Twitter para permitir que seus seguidores comprem facilmente um produto à venda ou enviar um link para um cliente que mande uma mensagem perguntando como comprar um produto.

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

Experimente de graça