Criar um Botão Comprar

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 um Botão Comprar, você copia o código gerado automaticamente e, em seguida, adiciona o código à página da web ou post do blog onde deseja que o botão seja exibido. Por exemplo, você pode querer adicionar o Botão Comprar ao seu blog Wordpress ou site 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.

Descrições dos layouts Básico, Clássico e Visão total 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:

Desktop

No admin da Shopify, acesse Configurações > Apps e canais de vendas.
Na página Apps e canais de vendas, clique em Buy Button.
Clique em Abrir canal de vendas.
Clique em Criar um Botão Comprar.
Clique no Botão Comprar produto.
Selecione um produto do seu catálogo ou use a pesquisa para encontrar um produto. Clique em Selecionar.
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.
Clique em Avançar.
Clique em Copiar código.
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.
Cole o código dentro do HTML onde você deseja que o Botão Comprar apareça e salve as suas alterações.

iPhone

No app da Shopify, toque no botão ….
Na seção Canal de vendas, toque em Botão Comprar.
Toque em Criar um Botão Comprar.
Toque no Botão Comprar produto.
Selecione um produto do seu catálogo ou use a pesquisa para encontrar um produto e toque em Selecionar.
Opcional: toque 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 do seu site. Toque em Configurações avançadas > Redirecionar na mesma aba.
Toque em Pronto.
Toque em Copiar código.
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.
Cole o código dentro do HTML onde você deseja que o Botão Comprar apareça e salve as suas alterações.

Android

No app da Shopify, toque no botão ….
Na seção Canal de vendas, toque em Botão Comprar.
Toque em Criar um Botão Comprar.
Toque no Botão Comprar produto.
Selecione um produto do seu catálogo ou use a pesquisa para encontrar um produto e toque em Selecionar.
Opcional: toque 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 do seu site. Toque em Configurações avançadas > Redirecionar na mesma aba.
Toque em Pronto.
Toque em Copiar código.
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.
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: