Elemento do botão Adicionar ao carrinho do produto

Sobre o botão do carrinho de produtos

O botão Adicionar ao Carrinho é de grande importância para qualquer loja, pois permite que os clientes adicionem produtos ao carrinho de compras com um simples clique. No GemPages, esse botão é chamado de Botão do Carrinho de Produtos e oferece uma ampla gama de funcionalidades que vão além de apenas adicionar produtos aos carrinhos.

Para adicionar o botão Carrinho de produtos à sua página, siga os passos abaixo. 

Passo 1: De acordo com o relatório Painel GemPages, selecione sua página para trabalhar e entre no Editor.

Passo 2: Como o botão do carrinho de produtos é um elemento filho do Elemento do produto, ele precisa estar aninhado dentro de um módulo de Produto para funcionar corretamente. Se você não tiver um módulo de Produto, arraste e solte um na sua página.

Passo 3: Arraste e solte o elemento Botão do carrinho de produtos dentro do módulo Produto, no local de sua preferência.

Uma vez adicionado, clique no elemento para acessar as configurações no barra lateral esquerda. A configuração é dividida em duas abas principais: Configurações e Avançado.

Configurar a guia Configurações

traçado

Escolha as configurações de layout do botão para adequá-las ao design da sua página.

Origem do produto

Especifique a qual produto o botão deve ser vinculado. Isso garante o funcionamento correto do botão, sincronizando-o com os dados corretos do produto.

Dimensões:

• Largura: Defina a largura do botão.
• Altura: Ajuste a altura do botão.
• Acolchoamento: Defina o preenchimento dentro do botão.

Contexto

Personalize a cor de fundo do botão usando o seletor de cores. Isso ajuda a combinar o botão com o estilo da sua marca.

Shape

• Fronteira: Escolha o estilo da borda, como Linha ou Sólido, para dar um contorno visual ao botão.
• Corner: Selecione o quão arredondados os cantos devem ser (Afiado, Arredondado ou Pilar).
• Shadow: Aplique e personalize uma sombra projetada para dar ao botão uma aparência elevada ou em camadas.

ícone

• Escolha o ícone: Selecione um ícone para exibir no botão ou você pode carregar um novo arquivo SVG.
• Posição do ícone: Posicione o ícone no lado esquerdo ou direito do texto.
• Espaçamento: Ajuste o espaçamento entre o ícone e o texto.

Texto

• Conteúdo: Você pode personalizar totalmente o texto exibido no botão Carrinho. O texto padrão é "ADICIONAR AO CARRINHO", mas você pode modificá-lo para qualquer texto que se alinhe ao seu design e objetivos.
• Estilos: Selecione um estilo para o rótulo do botão do carrinho entre os estilos pré-determinados disponíveis.
• fonte: Escolha a fonte para o seu rótulo de texto no menu suspenso. Caso queira usar outras fontes, veja como usar uma fonte personalizada clique aqui.
• tamanhos: Determine seu tamanho de fonte preferido.

Clique no Botão “Mostrar mais” para revelar mais opções de personalização. 

• Peso da fonte: Escolha a espessura de fonte desejada no menu suspenso fornecido.
• Altura da linha: Ajuste a altura do texto especificando um valor percentual.
• Espaçamento entre Letras: Modifique o espaçamento entre as letras inserindo um valor em pixels.
• Transformam: Transforme o texto em maiúsculas, minúsculas ou em caixa alta, conforme desejado.

separador

Ative esta opção para adicionar um separador visual entre o texto e o preço dentro do botão. Você pode escolher entre os estilos de linha, ponto ou barra.

Preço

Habilite esta opção para mostrar o preço do produto no botão.

• traçado: Selecione o layout preferido para exibição de preços.
• Preço do produto: Personalize como o preço atual aparece.
• Comparar preço: Opcionalmente, mostre o preço original (tachado) para promoções.

Efeito pairar

Personalize o comportamento do cursor do mouse sobre o botão.

• Contexto: Defina uma nova cor de fundo ao passar o mouse.
• Cor do texto: Altere a cor do texto ao passar o mouse para melhor interatividade.

Estado fora de estoque

Esta opção permite que você personalize a exibição do botão do carrinho quando o estoque do produto chegar a 0. Ao habilitar o Estilo Personalizado switch, opções de estilo adicionais para o botão serão reveladas, permitindo que você personalize ainda mais sua aparência.

Redirecionar para

Esta opção define o que vai acontecer depois que um cliente clica o botão Adicionar ao carrinho. Você pode escolher entre as seguintes ações:

• Continue comprando: Sem redirecionamento. O cliente permanece na página atual após adicionar o produto ao carrinho.
• Ir para o checkoutDireciona o cliente para a página de finalização de compra padrão da Shopify. com os itens existentes no carrinho (se houver).
• Carrinho aberto: Abre a gaveta do carrinho ou a página do carrinho, dependendo das configurações do seu tema.
• URL aberto: Redireciona o usuário para uma URL específica. Um novo campo de entrada aparecerá para você colar o link de destino.

Use esta configuração estrategicamente para guiar os clientes pelo seu funil de conversão. Por exemplo, levando-os ao carrinho para oportunidades de venda cruzada ou diretamente ao checkout para compras por impulso.

Alinhar

Escolha o alinhamento do botão dentro de sua seção: esquerda, centro ou direita.

Observação: O alinhamento horizontal é desativado quando a largura é definida como 100% ou mais.

Configurar a guia Avançado

Para uma personalização mais avançada, navegue até a guia Avançado e siga as instruções em Este artigo.

Usar com assinaturas (Adicionar assinatura ao carrinho)

Antes de começar

• Instalar e configurar um aplicativo de assinatura (por exemplo, Aplicativo, Recarregar, Subificar, Selar, etc.) e definir Opções de compra (planos de venda) para o produto no Shopify Admin.
• Garantir que o aplicativo widget de assinatura (alternância entre assinatura e recebimento único, intervalo de entrega, etc.) está habilitado para esse produto.

Configurar no GemPages

Passo 1: Coloque a Produto elemento, seletores de variantes, o widget de assinatura, e a Botão do carrinho de produtos dentro do mesmo módulo Produto (ordem: seletores → widget → Adicionar ao carrinho).

Passo 2: In Botão do carrinho de produtos > Configurações > Origem do produto, confirme que aponta para o mesmo produto como o widget.

Passo 3: In Redirecionar para, prefira Carrinho aberto or Continue comprando para que o plano de vendas seja anexado corretamente antes da finalização da compra.

Passo 4: Salvar e ppublique sua página. Na página ao vivo, selecione uma tudo incluso no widget e clique Adicionar ao Carrinho para verificar se o item do carrinho é exibido como um tudo incluso.

Anotações importantes

• A seleção do widget controla o comportamento: se Subscrever for selecionado, a linha do carrinho inclui um selling_plan_id; se De uma só vez, não.
• Coloque o widget de assinatura e o botão do carrinho de produtos dentro do mesmo módulo de produto (widget acima do botão).
• O botão mostra o preço da variante; descontos/etiquetas de assinatura são exibidos no widget ou na gaveta do carrinho/finalização de compra.
• Prefira “Carrinho abertoouContinue comprando" para o Redirecionar para seção para que o plano de vendas seja anexado antes da finalização da compra.
• A variante selecionada deve pertencer ao plano de venda do produto.
• Use o botão do carrinho de produtos para ações do carrinho, não o elemento de botão genérico.

Solução de problemas de adicionar ao carrinho no GemPages

Se o botão “Adicionar ao carrinho” no GemPages não estiver funcionando como esperado, aqui estão alguns problemas comuns e suas soluções:

1. Certifique-se de que o botão esteja aninhado dentro de um módulo de produto

O processo de Botão do carrinho de produtos deve ser colocado dentro de um Módulo de Produto para funcionar corretamente. Se estiver fora deste módulo, não funcionará.

Solução:

• No Editor GemPages, arraste e solte um Módulo de Produto na sua página.
• Depois, coloque o Botão do carrinho de produtos dentro deste módulo.

Essa configuração garante que o botão esteja vinculado corretamente aos dados do produto.

 2. Configure a ação do botão corretamente

Certifique-se de que a ação do botão esteja definida como "Adicionar ao carrinho". Se estiver definida como outra ação, como "Link para a página", ele não adicionará produtos ao carrinho.

Solução:

• Selecione os Adicionar ao Carrinho botão no Editor GemPages.
• No painel de configurações à direita, certifique-se de que a ação esteja definida como "Adicionar ao carrinho."

Essa configuração garante que o botão execute a ação desejada.

 3. Evite usar o elemento genérico “Botão” para ações de carrinho

GemPages oferece um genérico Botão elemento, mas não foi projetado para funcionalidades de carrinho. Usá-lo para adicionar produtos ao carrinho pode causar problemas.

Solução: Use o Botão do carrinho de produtos em vez do elemento genérico Button.

Esses botões especializados são adaptados para ações de carrinho e garantem a funcionalidade adequada.

4. Verifique a visibilidade e a disponibilidade do produto

Se o produto não estiver ativo ou disponível no canal de vendas da Loja Online, o botão “Adicionar ao Carrinho” não funcionará.

Solução:

• No seu Admin do Shopify, navegue até Produtos e selecione o produto relevante.
• Certifique-se de que o status do produto é Ativo.
• Debaixo Canais de vendas e aplicativos, confirme que Loja Online é selecionado.

Isso garante que o produto esteja disponível para compra em sua loja.

Perguntas frequentes sobre o elemento Adicionar produto ao carrinho

1. Por que não consigo adicionar um botão "Adicionar ao carrinho" a uma seção de tema salva?

As seções de tema salvas no GemPages não podem ser editadas e você não pode adicionar novos elementos dentro delas, incluindo o botão "Adicionar ao carrinho". Para usar um botão "Adicionar ao carrinho", crie um nova seçãoInsira todos os elementos necessários (Produto → Adicionar ao Carrinho) e então salvar a seção inteira como uma nova seção de tema reutilizável.

Saiba mais sobre a seção de temas: Seção de tema GemPages e perguntas frequentes.

2. Por que o preço não está aparecendo no meu botão "Adicionar ao carrinho"?

Verifique se o Preço A opção está ativada na aba Configurações. Se o seu produto não tiver preço ou estiver indisponível, o preço poderá não aparecer.

3. Por que o botão "Adicionar ao carrinho" tem uma aparência diferente ao passar o mouse sobre ele?

Verifique o Efeito pairar Configurações. Você pode ter cores de fundo ou de texto diferentes configuradas para o estado de foco.

4. Por que a opção de alinhamento está desativada?

O alinhamento é desativado quando a largura do botão é definida como 100% ou maior, pois o elemento já ocupa toda a largura disponível.

5. Posso colocar o botão "Adicionar ao carrinho" dentro de uma janela pop-up?

• Usar um regular Elemento de botão Para abrir a janela pop-up.
• Mantenha o botão "Adicionar ao carrinho" na página principal do produto.

6. Como faço para que o botão "Adicionar ao carrinho" abra um carrinho deslizante?

Você não precisa de código personalizado—defina Botão do Carrinho de Produtos → Redirecionar para → Abrir carrinhoEm seguida, configure o carrinho de compras ou o carrinho deslizante do seu tema seguindo as instruções. este guia.