Criar um Botão Comprar

Esta página foi impressa em Apr 24, 2024. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/online-sales-channels/buy-button/create-buy-button.

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

Depois de criar o Botão Comprar, copie o código gerado automaticamente e adicione-o à página da web ou post do blog em que você deseja que o botão apareça. Por exemplo, você pode adicionar o Botão Comprar ao seu blog do WordPress ou ao site do Squarespace.

Não foi possível alterar a aparência do Botão Comprar depois de incorporá-lo ao seu site. Se quiser alterá-lo, você precisa criar um novo botão no canal e substituir o código original pelo novo código.

Nesta página

Personalizar os Botões Comprar

Você pode personalizar a aparência do Botão Comprar e como ele se comporta:

  • sua cor
  • seu tamanho
  • sua fonte
  • a ação que acontece quando o botão é clicado
  • Se o checkout é aberto em uma nova janela do navegador

Você pode pré-visualizar as alterações enquanto personaliza o botão. É possível testar o comportamento do Botão Comprar clicando na pré-visualização.

Estilo de layout

Você pode escolher o layout do Botão Comprar.

Layouts disponíveis para Botões Comprar
Basic Selecione este layout para adicionar um Botão Comprar sem a imagem do produto. Isso pode ser desejável quando você já exibe seus produtos em outro local virtual, mas quer adicionar o botão apenas para fazer a compra.
Clássico Selecione este layout para exibir uma imagem do produto e o preço ao lado do Botão Comprar. Este layout é útil para uma pré-visualização rápida do produto, como em um post de blog.
Visão total Selecione este layout para exibir uma imagem do produto, o preço e a descrição ao lado do Botão Comprar. Este layout emula uma página de informações do produto de sua loja virtual.

Ações do Botão Comprar

Ao criar o Botão Comprar, é possível selecionar a ação que acontece quando o botão é clicado.

Se o Botão Comprar se refere a uma coleção, a ação se aplicará a cada produto da coleção.

  • Adicionar produto ao carrinho adiciona o produto ao carrinho de compras. Os clientes podem continuar comprando e adicionar mais produtos ao carrinho.
  • Direto para a finalização da compra leva o cliente diretamente ao seu checkout, onde ele pode comprar o produto. Os clientes não podem adicionar mais produtos ao pedido deles.
  • Abrir informações do produto exibe um botão Ver produto. Quando o cliente clica no botão, ele pode ver a descrição do produto, selecionar todas as variantes disponíveis do produto e adicionar o produto ao carrinho. Se houver várias imagens do produto, elas também são exibidas.
    • Esta opção não está disponível quando você escolhe o layout Visão total, porque o layout Visão total já exibe todas as informações do produto.

Você também pode escolher se o checkout é aberto em uma nova janela do navegador ou se ele é aberto na mesma aba que o seu site. O comportamento padrão é que o checkout é aberto em uma nova janela.

Aparência do Botão Comprar

  • Estilo do botão inclui a forma, a cor e a tipografia da parte do botão em si do Botão Comprar.
  • Layout Dependendo do estilo de layout que você escolher, é possível personalizar configurações como alinhamento do botão, tamanho da imagem, texto do botão, fonte, cor e tamanho.

  • Carrinho de compras inclui opções de texto e cor para o carrinho de compras incorporado. Você também pode habilitar e personalizar a etiqueta do campo Observação do pedido. Use as observações de pedido para coletar instruções especiais dos clientes sobre como preparar e entregar um pedido. O campo Informações adicionais permite que você transmita uma mensagem para seus clientes.

    • Você pode editar as configurações do carrinho de compras apenas se tiver escolhido Adicionar produto ao carrinho ou Abrir informações do produto como açãodo botão.

  • Pop-up detalhado inclui as configurações da janela pop-up de informações do produto. Você pode personalizar o texto do botão, a exibição ou não do campo de quantidade, as cores usadas para o plano de fundo e a fonte e o tamanho da fonte das etiquetas. Só é possível editar essas configurações se você tiver selecionado Abrir informações do produto como ação do botão.

Criar um Botão Comprar para um único produto

Você pode criar um Botão Comprar para um único produto. Cada Botão Comprar pode incluir uma ou todas as variantes do produto. Ao criar o Botão Comprar, você pode escolher um estilo de layout e personalizar a cor, o texto e a aparência do botão, bem como a ação que acontece quando o cliente clica nele. Saiba mais sobre como personalizar os Botões Comprar.

Antes de criar um Botão Comprar para um produto, você precisa ter adicionado o produto no seu admin da Shopify e disponibilizado-o para o canal de vendas Botão Comprar.

Etapas:

  1. No admin da Shopify, clique em Configurações > Apps e canais de vendas.

  2. Na página Apps e canais de vendas, clique em Buy Button.

  3. Clique em Abrir canal de vendas.

  4. Clique em Criar um Botão Comprar.

  5. Clique no Botão Comprar produto.

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

  7. Opcional: personalize o Botão Comprar.

    1. Se o seu produto tiver variantes, selecione Todas as variantes ou selecione a variante que deseja incluir.
    2. Escolha um estilo de layout e a ação que acontece quando o cliente clica no botão. Você também pode personalizar a aparência do botão.
    3. Por padrão, o comportamento de checkout abre uma nova janela, mas você pode optar por abrir o checkout na mesma aba do navegador que o seu site. Clique em Configurações avançadas > Redirecionar na mesma aba.

  8. Clique em Avançar.

  9. Clique em Copiar código.

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

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

  1. No app da Shopify, toque no botão ….
  2. Na seção Canal de vendas, toque em Botão Comprar.
  3. Clique em Criar um Botão Comprar.
  4. Clique no Botão Comprar produto.
  5. Selecione um produto do seu catálogo ou use a pesquisa para encontrar um produto. Clique em Selecionar.

  6. Opcional: clique em Personalizar.

    1. Se o seu produto tiver múltiplas variantes, selecione Todas as variantes ou selecione uma variante na lista suspensa.
    2. Escolha um estilo de layout e a ação que acontece quando o cliente clica no botão. Você também pode personalizar a aparência do botão.
    3. Por padrão, o comportamento de checkout abre uma nova janela, mas você pode optar por abrir o checkout na mesma aba do navegador que o seu site. Clique em Configurações avançadas > Redirecionar na mesma aba.

  7. Clique em Pronto.

  8. Clique em Copiar código.

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

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

  1. No app da Shopify, toque no botão ….
  2. Na seção Canal de vendas, toque em Botão Comprar.
  3. Clique em Criar um Botão Comprar.
  4. Clique no Botão Comprar produto.
  5. Selecione um produto do seu catálogo ou use a pesquisa para encontrar um produto. Clique em Selecionar.

  6. Opcional: clique em Personalizar.

    1. Se o seu produto tiver múltiplas variantes, selecione Todas as variantes ou selecione uma variante na lista suspensa.
    2. Escolha um estilo de layout e a ação que acontece quando o cliente clica no botão. Você também pode personalizar a aparência do botão.
    3. Por padrão, o comportamento de checkout abre uma nova janela, mas você pode optar por abrir o checkout na mesma aba do navegador que o seu site. Clique em Configurações avançadas > Redirecionar na mesma aba.

  7. Clique em Pronto.

  8. Clique em Copiar código.

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

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

Criar um Botão Comprar para uma coleção

Quando você cria um Botão Comprar de uma coleção, na verdade está criando um botão para cada produto da coleção.

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

Antes de criar um Botão Comprar para uma coleção, você precisa ter:

Etapas:

  1. No admin da Shopify, clique em Configurações > Apps e canais de vendas.

  2. Na página Apps e canais de vendas, clique em Buy Button.

  3. Clique em Abrir canal de vendas.

  4. Clique em Criar um Botão Comprar.

  5. Clique em Botão Comprar para coleções.

  6. Selecione a coleção ou use a pesquisa para encontrar a coleção. Clique em Selecionar.

  7. Opcional: personalize o Botão Comprar.

    1. Escolha a ação que acontece quando o cliente clica no botão. Você também pode personalizar a aparência do botão.
    2. Por padrão, o comportamento de checkout abre uma nova janela, mas você pode optar por abrir o checkout na mesma aba do navegador que o seu site. Clique em Configurações avançadas > Redirecionar na mesma aba.

  8. Clique em Avançar.

  9. Clique em Copiar código.

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

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

  1. No app da Shopify, toque no botão ….
  2. Na seção Canal de vendas, toque em Botão Comprar.
  3. Clique em Criar um Botão Comprar.
  4. Clique em Botão Comprar para coleções.
  5. Selecione a coleção ou use a pesquisa para encontrar a coleção. Clique em Selecionar.

  6. Opcional: clique em Personalizar.

    1. Escolha a ação que acontece quando o cliente clica no botão. Você também pode personalizar a aparência do botão.
    2. Por padrão, o comportamento de checkout abre uma nova janela, mas você pode optar por abrir o checkout na mesma aba do navegador que o seu site. Clique em Configurações avançadas > Redirecionar na mesma aba.

  7. Clique em Pronto.

  8. Clique em Copiar código.

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

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

  1. No app da Shopify, toque no botão ….
  2. Na seção Canal de vendas, toque em Botão Comprar.
  3. Clique em Criar um Botão Comprar.
  4. Clique em Botão Comprar para coleções.
  5. Selecione a coleção ou use a pesquisa para encontrar a coleção. Clique em Selecionar.

  6. Opcional: clique em Personalizar.

    1. Escolha a ação que acontece quando o cliente clica no botão. Você também pode personalizar a aparência do botão.
    2. Por padrão, o comportamento de checkout abre uma nova janela, mas você pode optar por abrir o checkout na mesma aba do navegador que o seu site. Clique em Configurações avançadas > Redirecionar na mesma aba.

  7. Clique em Pronto.

  8. Clique em Copiar código.

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

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

Tudo pronto para começar a vender com a Shopify?

Experimente de graça