Botão Adicionar carrinho acima da imagem do produto

Por que adicionar um botão de carrinho acima da imagem?

Colocando o Adicionar ao Carrinho botão diretamente na imagem do produto ajuda os clientes a comprarem de forma mais rápida e conveniente. 

Em vez de rolar a tela para baixo para encontrar o botão, eles podem adicionar itens ao carrinho imediatamente com um clique.

Benefícios:

• Reduza o atrito: Os clientes não precisam procurar o botão do carrinho abaixo dos detalhes do produto.
• Incentive compras por impulso: Uma opção de adição rápida torna mais fácil para os clientes adicionarem vários produtos de uma só vez.
• Melhore a experiência móvel: Em telas pequenas, uma sobreposição de botões economiza espaço e mantém o layout limpo.
• Promoções em destaque: Você pode estilizar o botão para combinar com campanhas sazonais ou descontos, fazendo com que ele se destaque na imagem.

Como exibir o botão do carrinho acima da imagem do produto?

No GemPages v7, você pode criar sua própria seção de lista de produtos com um botão “Adicionar ao carrinho” acima da imagem.

Primeiro, no seu administrador do Shopify, navegue até Painel GemPages > PÁGINAS. Clique na página de destino para abrir o editor.

Em seguida, siga estas etapas:

Etapa 1: adicione um elemento de lista de produtos à sua página

• Na barra lateral esquerda, procure por Elemento da lista de produtos, então arraste e solte o elemento na sua página.

• Para garantir um design limpo, você pode excluir vários elementos filho aninhados no elemento Lista de Produtos. 

Por exemplo, remova as Variantes e Amostras do Produto clicando no elemento e clicando em caixa ícone.

Etapa 2: adicionar um elemento Linha ao elemento Lista de produtos

• Na barra lateral esquerda, adicione um Elemento de linha para a lista de produtos que você criou na Etapa 1.

• Arraste e solte os elementos Imagem do produto e Botão Adicionar ao carrinho nesta linha.

Etapa 3: Configurar a posição do botão do carrinho

• Clique no elemento do botão Adicionar ao carrinho para abrir seu painel de configurações.
• Vou ao Avançado guia> Posição.

• Na lista suspensa, selecione absoluto posição.

Então, o botão do carrinho estará acima da imagem do produto.

• Colocou o Parte inferior = 0 para exibir o botão na parte inferior da imagem.

• Volte para a Configurações para configurar a visibilidade do botão conforme sua preferência. Por exemplo, você pode remover o texto, alterar a cor de fundo ou configurar o estado de foco.

Para obter mais informações sobre como configurar o elemento Botão Adicionar ao carrinho, consulte Este artigo.

Etapa 4: salvar e publicar

• Você pode visualização para verificar os resultados clicando em olho ícone na barra superior.
• Se tudo estiver bem, salvar as mudanças e acertar o Publicar botão para republicar sua página.

Resultado: