Elemento de adicionar ao carrinho fixo

Sobre o elemento Adicionar ao carrinho fixo

A Botão fixo Adicionar ao carrinho em uma página da web é um botão que permanece visível e “paus” na tela enquanto você rola a tela. É um elemento valioso da interface do usuário em sites de e-commerce que aprimora a experiência de compra, facilitando o acesso ao carrinho e agilizando o processo de finalização da compra. 

Contribui para um melhor envolvimento do usuário, melhores taxas de conversão e satisfação geral do usuário ao reduzir o atrito na jornada de compras on-line.

Como adicionar um elemento fixo de adicionar ao carrinho à sua página?

Para incorporar um Sticky Add-to-Cart no GemPages Editor v7, siga estas etapas:

Passo 1: Acessar o Painel GemPages > PÁGINAS > Coleção, clique na página da coleção de destino para localizar o editor.

Passo 2: Na barra lateral esquerda, procure por "pegajoso adicionar ao carrinho" e arraste e solte na sua página.

Importante: O elemento fixo "Adicionar ao carrinho" só pode ser colocado no primeiro or último seção da sua página.

Essa limitação é intencional e ajuda a garantir que a barra fixa funcione corretamente em diferentes dispositivos e comportamentos de rolagem. Como o elemento foi projetado para permanecer fixo na tela enquanto os usuários rolam a página, colocá-lo no meio da página poderia causar conflitos de layout, problemas de sobreposição ou comportamento de exibição inconsistente com outras seções.

Para manter uma experiência de compra estável e fluida, o GemPages suporta apenas a exibição do botão "Adicionar ao Carrinho" fixo na parte superior ou inferior da estrutura da página.

Por padrão, o elemento Sticky Add-to-Cart vem pré-carregado com componentes essenciais:

• Módulo de produto (Imagem do produto, título do produto e preço do produto)
• Variante e amostras do produto
• Quantidade de produto
• Adicionar produto ao carrinho

Esta configuração pronta garante que sua barra adesiva esteja funcionando imediatamente. Você pode simplesmente "Salvar" e "Publicar" a página, e o Sticky Add-to-Cart estará pronto na sua página ativa. 

No entanto, para uma integração perfeita com o design geral da sua página, você tem flexibilidade completa para personalizar tanto o próprio Sticky Add-to-Cart quanto seus elementos filhos.

Configurar a guia Configurações

Quando você seleciona o Elemento fixo de adicionar ao carrinho, você descobrirá todas as opções de configuração convenientemente localizadas na barra lateral esquerda, incluindo:

traçado

De traçado seção, você pode escolher a posição do item fixo para adicionar ao carrinho na sua página:

• Posição inferior
• Topo da página (funciona como um cabeçalho personalizado fixo com botão de carrinho)

Alguns comerciantes desejam colocar um botão Adicionar ao Carrinho dentro do cabeçalho para que ele permaneça visível enquanto os clientes rolam a página. Como um botão Adicionar ao Carrinho de Produtos requer um módulo Produto (que não é suportado dentro de um cabeçalho de tema), a melhor alternativa é usar o Elemento fixo de adicionar ao carrinho.

Ao definir sua posição de layout para Soutien, ele se comporta como um botão de carrinho de compras no cabeçalho, sempre acessível sem atrapalhar o design da página.

Dimensões:

O processo de Dimensões: A seção permite que você controle as dimensões gerais do seu botão Adicionar ao carrinho, garantindo que ele se encaixe perfeitamente no layout da sua página.

Largura: Personalize a largura do elemento. Você pode inserir um valor específico (em px) na caixa ou escolher entre as opções disponíveis:

• Ajustar conteúdo (Automático): O botão será ajustado automaticamente para corresponder ao tamanho do seu conteúdo (texto + ícone).
• Completo (100%): O botão será expandido para preencher toda a largura do contêiner, tornando-o mais proeminente na página.

padding: O preenchimento define o espaçamento interno entre o conteúdo do botão (texto, ícone, preço) e suas bordas.

Contexto

Definir um sólido or fundo de cor gradiente para o seu item fixo para adicionar ao carrinho. Você pode ajustar a cor:

• Digite o código de cor
• Arraste ou selecione nas amostras de cores
• Use o seletor de cores para selecionar qualquer cor na sua página atual
• Escolha um dos Cores recentes  or Sugerido para você listas

Se você preferir um fundo da imagem, carregue uma nova imagem ou escolha na sua galeria para defini-la como plano de fundo do elemento.

Shape

• Fronteira: Você pode alterar a cor, a espessura e o traço da borda.
• Corner: O canto da seção pode ser quadrado, redondo ou em formato de pílula. Além disso, você pode inserir um raio exato para personalizar o canto do elemento à sua maneira.
• Shadow: Adicione uma sombra e ajuste sua exibição (tamanho, cor, desfoque e distância).

Opção de exibição

Defina a condição para definir quando o seu item fixo para adicionar ao carrinho será exibido na sua página. Você pode escolher duas opções, conforme abaixo:

• Sempre mostrar: O botão Adicionar ao Carrinho Fixo permanecerá visível o tempo todo enquanto o cliente rola a página. Isso garante acesso rápido ao carrinho, reduzindo o atrito durante a jornada de compra.
• Após o primeiro botão do carrinho: Este elemento só aparecerá depois que o primeiro botão padrão "Adicionar ao Carrinho" aparecer. Essa opção ajuda a evitar redundância no topo da página e torna o botão fixo mais contextual.

Configurar a guia Avançado

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

Perguntas frequentes sobre o elemento fixo "Adicionar ao carrinho"

1. O Sticky Add-to-Cart é responsivo em dispositivos móveis?

Sim. O recurso padrão de Adicionar ao Carrinho Fixo é totalmente responsivo. Em dispositivos móveis, ele é exibido em um formato simplificado (geralmente apenas o botão) para economizar espaço e garantir um layout limpo.

2. Por que meu Sticky Add-to-Cart não aparece na página ativa?

Uma causa comum é que o Opção de exibição está definido para “Após o primeiro botão do carrinho” enquanto sua página não contém nenhum botão Adicionar ao carrinho acima da dobra. Nesse caso, a barra fixa nunca aparecerá.

Como consertar:

• alterar o Opção de exibição a "Mostrar sempre" or
• Adicione um Botão Adicionar ao carrinho para sua página se preferir a opção de exibição “Após o primeiro botão do carrinho”.

3. Posso usar uma imagem de fundo para o Sticky Add-to-Cart?

Sim. Na seção Plano de fundo, você pode definir uma cor sólida/gradiente ou carregar uma imagem para usar como plano de fundo do botão.

4. Como posso alterar o formato do Sticky Add-to-Cart?

De acordo com o relatório Shape configurações, você pode personalizar o fronteira, raio de canto (quadrado, redondo ou em forma de pílula) e sombra.

5. O recurso Adicionar ao Carrinho Fixo não está sendo exibido no celular. O que devo fazer?

Isso pode acontecer por alguns motivos:

• Configurações de visibilidade: Verifique as configurações do elemento na aba Avançado e certifique-se de que ele não esteja oculto no celular.
• Opção de exibição: Se definido para Após o primeiro botão do carrinho, mas o seu layout móvel não inclui um botão padrão Adicionar ao carrinho acima da dobra, a barra fixa não aparecerá. Mude para Mostrar sempre.
• Diferenças de layout no celular: Em celulares, o Adicionar ao Carrinho Fixo pode ser exibido em uma versão simplificada (apenas botão). Role para baixo para confirmar se ele não está minimizado.

6. O botão Adicionar ao carrinho fixo pode substituir o botão de carrinho do cabeçalho do meu tema?

Sim, na prática. Se o cabeçalho do seu tema não tiver um botão de carrinho, basta ativar a opção Adicionar ao carrinho no topo da página. Ela oferece a mesma funcionalidade, sempre visível à medida que os clientes rolam a página.

7. Posso usar o elemento "Adicionar ao Carrinho" fixo como um botão fixo comum (não "Adicionar ao Carrinho")?

O elemento "Adicionar ao Carrinho" fixo foi projetado especificamente para ações de "Adicionar ao Carrinho" de produtos. Ele requer um contexto de produto e não se destina a ser usado como um botão de chamada para ação (CTA) genérico.

No entanto, se você precisar de um botão CTA fixo que direcione para outra página (por exemplo, coleção, página de destino etc.), recomendamos que remova todos os elementos incluídos dentro do elemento "Adicionar ao carrinho fixo" e, em seguida, insira o elemento padrão. Elemento Botão ao invés.

Verifique este guia de vídeo para mais instruções.