Criar um Botão Comprar
Depois de adicionar o canal de vendas Botão Comprar no admin da Shopify, será possível criar um Botão Comprar para um produto ou uma coleção.
Depois de criar um Botão Comprar, copie o código gerado automaticamente e adicione-o à página da web ou ao post do blog em que você quer que o botão seja exibido. Por exemplo, você pode adicionar o Botão Comprar a um blog do WordPress ou a um site do Squarespace.
A aparência do Botão Comprar não pode ser alterada depois que ele é incorporado ao site. Para alterá-la, é preciso criar um novo botão no canal e substituir o código original pelo novo.
Nesta página
Personalizar os Botões Comprar
É possível personalizar a aparência e o comportamento de um Botão Comprar:
- a cor
- o tamanho
- a fonte
- a ação que ocorre quando o botão é clicado
- se o checkout abre em uma nova janela do navegador
Enquanto personaliza o botão, você pode visualizar as alterações. É possível testar o comportamento do Botão Comprar clicando na visualização.
Estilo de layout
É possível escolher o layout do Botão Comprar.
| Básico | Selecione este layout para adicionar um Botão Comprar sem nenhuma imagem do produto. Essa pode ser uma boa opção se você já exibe seus produtos em outro lugar online e quer apenas adicionar um botão para efetuar a compra. |
| Clássico | Selecione este layout para exibir uma imagem e o preço do produto ao lado do Botão Comprar. Esse layout é útil para uma prévia rápida do produto, como em um post de blog. |
| Visão total | Selecione este layout para exibir uma imagem, o preço e a descrição do produto ao lado do Botão Comprar. Esse layout simula uma página de informações do produto da sua loja virtual. |
Ações do Botão Comprar
Ao criar um Botão Comprar, é possível selecionar a ação que ocorre quando o botão é clicado.
Se o Botão Comprar for para uma coleção, a ação se aplicará a cada produto da coleção.
- A opção Adicionar produto ao carrinho adiciona o produto a um carrinho de compras. Assim, os clientes podem continuar comprando e adicionar outros produtos ao carrinho.
- A opção Direcionar para o checkout leva o cliente direto para seu checkout, no qual ele pode comprar o produto. Os clientes não podem adicionar outros produtos ao pedido.
- Abrir informações do produto exibe um Ver produto botão. Quando o cliente clica no botão, ele pode ver a descrição do produto, selecionar as variantes de produto disponíveis e adicionar o produto ao carrinho. Se um produto tiver várias imagens de produto, elas também serão exibidas.
- Essa opção não está disponível quando você escolhe o layout Visualização completa, pois esse layout já exibe todas as informações do produto.
Você também pode escolher se o checkout abre em uma nova janela do navegador ou na mesma aba do site. O comportamento-padrão é que o checkout abra em uma nova janela.
Aparência do Botão Comprar
- O Estilo do botão inclui o formato, a cor e a tipografia da parte do botão do Botão Comprar.
- Layout: dependendo do estilo de layout que você escolher, será 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 sobre o pedido . Você pode usar as observações sobre o pedido para coletar instruções especiais dos clientes sobre como preparar e entregar um pedido. O campo Informações adicionais permite que você comunique uma mensagem aos clientes.
- Só é possível editar as configurações do carrinho de compras se você tiver escolhido Adicionar produto ao carrinho ou Abrir informações do produto como a ação do botão.
- A opção Pop-up detalhado inclui as configurações da janela pop-up de informações do produto. É possível personalizar o texto do botão, a inclusão ou não do campo de quantidade, as cores usadas para o plano de fundo e as etiquetas, além da fonte e do tamanho da fonte das etiquetas. Só é possível editar essas configurações se você tiver escolhido Abrir informações do produto como a ação do botão.
Criar um Botão Comprar para um único produto
É possível criar um Botão Comprar para um único produto. O Botão Comprar pode incluir uma ou todas as variantes do produto. Ao criar o Botão Comprar, você escolhe um estilo de layout e personaliza a cor, o texto e a aparência do botão, bem como a ação que ocorre quando um 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 admin da Shopify e disponibilizado para o canal de vendas Botão Comprar.
Etapas:
Desktop
No admin da Shopify, acesse Canais de vendas > Botão Comprar.
Clique em Criar um Botão Comprar.
Clique em Botão Comprar do produto.
Selecione o produto no catálogo ou use a busca para encontrá-lo. Clique em Selecionar.
Opcional: personalize o Botão Comprar.
- Se o produto tiver variantes, selecione Todas as variantes ou a variante que você quer incluir.
- Escolha um estilo de layout e a ação que ocorre quando um cliente clica no botão. Você também pode personalizar a aparência do botão.
- Por padrão, o comportamento do checkout é abrir uma nova janela, mas você pode escolher que o checkout abra na mesma aba do navegador do seu site. Clique em Configurações avançadas > Redirecionar na mesma aba.
Clique em Avançar.
Clique em Copiar código.
Abra o editor de HTML da página da web em que você quer exibir o Botão Comprar. Consulte Adicionar o código do Botão Comprar ao HTML.
Cole o código no HTML onde você quer que o Botão Comprar apareça e salve as alterações.
Dispositivo móvel
No Shopify app, toque no ícone
.
Na seção Canais de vendas, toque em Botão de compra.
Toque em Criar um Botão Comprar.
Toque em Botão Comprar do produto.
Selecione o produto no catálogo ou use a busca para encontrá-lo e toque em Selecionar.
Opcional: toque em Personalizar.
- Se o produto tiver diversas variantes, selecione Todas as variantes ou uma variante na lista suspensa.
- Escolha um estilo de layout e a ação que ocorre quando um cliente clica no botão. Você também pode personalizar a aparência do botão.
- Por padrão, o comportamento do checkout é abrir uma nova janela, mas você pode escolher que o checkout abra na mesma aba do navegador do seu site. Toque em Configurações avançadas > Redirecionar na mesma aba.
Toque em Concluído.
Toque em Copiar código.
Abra o editor de HTML da página da web em que você quer exibir o Botão Comprar. Consulte Adicionar o código do Botão Comprar ao HTML.
Cole o código no HTML onde você quer que o Botão Comprar apareça e salve as alterações.
Criar um Botão Comprar para uma coleção
Ao criar um Botão Comprar para uma coleção, na verdade você está criando um botão para cada produto da coleção.
Ao criar o Botão Comprar, você escolhe um estilo de layout e personaliza a cor, o texto e a aparência do botão, bem como a ação que ocorre quando um 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:
- adicionado os produtos no admin da Shopify;
- disponibilizado os produtos para o canal de vendas Botão Comprar
- Criou a coleção.
Etapas:
Desktop
No admin da Shopify, acesse Canais de vendas > Botão Comprar.
Clique em Criar um Botão Comprar.
Clique em Botão Comprar da coleção.
Selecione a coleção ou use a busca para encontrá-la. Clique em Selecionar.
Opcional: personalize o Botão Comprar.
- Escolha a ação que ocorre quando um cliente clica no botão. Também é possível personalizar a aparência do botão.
- Por padrão, o comportamento do checkout é abrir uma nova janela, mas você pode escolher que o checkout abra na mesma aba do navegador do seu site. Clique em Configurações avançadas > Redirecionar na mesma aba.
Clique em Avançar.
Clique em Copiar código.
Abra o editor de HTML da página da web em que você quer exibir o Botão Comprar. Consulte Adicionar o código do Botão Comprar ao HTML.
Cole o código no HTML onde você quer que o Botão Comprar apareça e salve as alterações.
Dispositivo móvel
No Shopify app, toque no ícone
.
Na seção Canais de vendas, toque em Botão de compra.
Toque em Criar um Botão Comprar.
Toque em Botão Comprar da coleção.
Selecione a coleção ou use a busca para encontrá-la e, em seguida, toque em Selecionar.
Opcional: toque em Personalizar.
- Escolha a ação que ocorre quando um cliente clica no botão. Também é possível personalizar a aparência do botão.
- Por padrão, o comportamento do checkout é abrir uma nova janela, mas você pode escolher que o checkout abra na mesma aba do navegador do seu site. Toque em Configurações avançadas > Redirecionar na mesma aba.
Toque em Concluído.
Toque em Copiar código.
Abra o editor de HTML da página da web em que você quer exibir o Botão Comprar. Consulte Adicionar o código do Botão Comprar ao HTML.
Cole o código no HTML onde você quer que o Botão Comprar apareça e salve as alterações.