Como personalizar sua página de carrinho
A página de carrinho aparece automaticamente no site da sua loja virtual assim que ativada. Nessa página, os visitantes podem selecionar o método de pagamento, opção de entrega e outros detalhes ao fazer um pedido.
Nas configurações do widget de Carrinho, você pode personalizar o estilo do seu cartão de produto e ícone de carrinho, ativar o minicarrinho, adicionar métodos de pagamento disponíveis, mais informações e conectar análises.
Você também pode adicionar outros elementos à sua página de carrinho e ajustar seu estilo para combinar com a identidade visual e as necessidades da sua marca. Por exemplo, pode adicionar um menu superior, rodapé da página ou recomendações de produtos relacionados.
Agora, vamos ver como personalizar o estilo do widget de Carrinho e seus elementos e configurar o minicarrinho.
Vá até a lista de páginas do site e selecione Editar no menu ao lado da página de Carrinho . Você também pode acessar sua página de carrinho na lista de páginas do construtor.
Clique no widget e, no painel de edição do elemento, selecione o elemento que deseja personalizar.
Personalizar a aparência do seu carrinho
Na seção Estilo do carrinho, clique no elemento que deseja atualizar.
Carrinho
Na seção de Configurações do carrinho, você pode personalizar o estilo do elemento no seu cartão de produto adicionado:
| Tamanho da pré-visualização | Essa configuração altera o tamanho da pré-visualização do seu produto. Selecione P, M ou G. |
| Divisor | Essa configuração adiciona espaçamento entre as pré-visualizações de produto. Escolha um tamanho, estilo e cor. |
| Tipografia | Altera o estilo do texto nas pré-visualizações de produto. Selecione um tamanho de texto, formato e cor para o nome do produto, opção, preço e valor total. |
| Botão de excluir produto | Altera o ícone de remoção do carrinho. Selecione uma cor para o ícone e cor de fundo. Se adicionar uma cor, o ícone será circular. |
| Contador de produtos no carrinho | Altera o estilo do contador onde os usuários podem selecionar quantos itens adicionar ao carrinho. Selecione um estilo de campo, cor, arredondamento e tamanho. |
Ícone do carrinho
Nas Configurações do ícone do carrinho, você pode definir o estilo do ícone que será exibido em todas as páginas do seu site. Em Aparência, selecione um ícone de estilo.
| Flutuante | O ícone ficará fixo no canto inferior direito da tela e continuará visível conforme o usuário rolar a página. |
| No cabeçalho | O ícone será incorporado ao cabeçalho do seu site. |
Você pode escolher o formato do ícone, as cores dos elementos, o arredondamento e o tamanho.
Use o modo de visualização ou acesse o site publicado para ver como o ícone do carrinho aparece.
Configure o minicarrinho
O minicarrinho é um pop-up compacto que mostra os produtos adicionados ao carrinho. Ele aparece ao lado do ícone do carrinho quando o cliente adiciona um produto ou clica no ícone.
No minicarrinho, os clientes podem visualizar os produtos adicionados, alterar as quantidades ou remover itens e conferir o valor total do pedido sem sair da página.
Por exemplo, em uma loja de eletrônicos, o cliente pode adicionar um teclado e continuar procurando um mouse compatível sem sair da página.
Ative o minicarrinho
Para exibir o minicarrinho no seu site, acesse Sites, selecione o site e clique em Editar ao lado da página Carrinho. No criador de sites, clique no widget Carrinho.
No painel de edição do elemento, ative a opção Minicarrinho. Ao conectar uma loja online, essa opção é ativada automaticamente.
Com essa opção ativada, o ícone do carrinho abre o minicarrinho em vez da página do carrinho.
Se a opção Redirecionar automaticamente para o carrinho após adicionar um produto estiver marcada nas configurações da loja online, o cliente vai direto para a página do carrinho ao adicionar um produto, mesmo com o minicarrinho ativo. Para exibir o minicarrinho, desmarque essa opção.
Personalize o estilo do minicarrinho
Para combinar o minicarrinho com o design do seu site, altere as cores e o arredondamento dos cantos. O minicarrinho usa os estilos de texto definidos nas Configurações do carrinho.
Com a opção Minicarrinho ativada, na seção Estilo do carrinho, clique em Configurações do minicarrinho. Uma prévia do minicarrinho aparecerá ao lado das configurações.
Para personalizar a janela do minicarrinho, use as seguintes configurações:
| Fundo da janela modal | Define a cor de fundo da janela do minicarrinho. |
| Arredondamento | Arredonda os cantos da janela do minicarrinho. Insira um valor em pixels. |
| Cor da linha divisória | Define a cor das linhas que separam o título, os produtos e o valor total. |
Na seção Tipografia, defina as seguintes cores de texto:
| Cor do texto | Define a cor do título, dos nomes dos produtos e dos demais textos. |
| Cor do preço | Define a cor dos preços dos produtos e do valor total. |
| Cor do preço anterior | Define a cor dos preços anteriores, exibidos com um risco. |
Na seção Botão de excluir produto , defina as seguintes cores do ícone usado para remover um produto:
| Cor do ícone | Define a cor do ícone de exclusão. |
| Cor de fundo | Define a cor do círculo atrás do ícone de exclusão. |
Na seção Contador de produtos no carrinho, personalize o campo de quantidade usando estas configurações:
| Cor do texto | Define a cor do texto no contador. |
| Cor de fundo | Define a cor de preenchimento do contador. |
| Cor da borda | Define a cor do contorno do contador. |
| Arredondamento | Arredonda os cantos do contador. Insira um valor em pixels. |
Para aplicar as alterações, clique em Salvar.
Altere o botão do minicarrinho
O botão do minicarrinho leva os clientes à página do carrinho, onde eles preenchem o formulário do pedido e fazem o pagamento. Por padrão, o botão exibe o texto Finalizar compra.
Para alterar o botão, clique no ícone de lápis na seção Botão do minicarrinho.
No campo Texto, insira o texto do botão. Esse campo é obrigatório.
No campo Estilo, selecione Primário, Secundário ou Personalizado e escolha o tamanho do botão.
Você também pode alterar a largura do botão, adicionar um ícone ou ativar as opções Efeito adicional e Sombra.
Para aplicar as alterações, clique em Salvar.
Saiba mais: Como escolher o estilo de um botão.
Visualize o minicarrinho no seu site
Para visualizar o minicarrinho com os estilos e o texto do botão que você definiu, publique seu site. Depois, adicione um produto ao carrinho ou clique no ícone do carrinho.
Para alterar a quantidade de um produto, os clientes podem clicar em − ou + ou inserir um número no contador. Produtos digitais não têm contador.
Os clientes podem clicar na imagem ou no nome de um produto para voltar à página em que o adicionaram ao carrinho.
Para fechar o minicarrinho, os clientes podem clicar no ícone × ao lado do título ou em qualquer área fora da janela.
Personalize seu formulário de pedido
Especificar um método de pagamento
Para adicionar um novo método de pagamento, clique em Adicionar método de pagamento. Para editar um método de pagamento existente, clique no ícone de lápis ao lado dele.
Selecione o sistema de pagamento que você usará para aceitar pagamentos. Se aceitar pagamentos por vários métodos, você pode adicionar um adicional..
Você precisa adicionar métodos de pagamento que utilizem a mesma moeda da sua loja. Se as moedas não coincidirem, o valor do pagamento será incorreto.
Para saber mais sobre como conectar diversos métodos de pagamento, consulte a seção Aceitar pagamentos.
Você também pode dar um nome personalizado ao seu método de pagamento. Os visitantes do site verão esse nome no momento do checkout. Na seção Nome do método de pagamento, insira o nome que deseja exibir.
Você também pode redirecionar os usuários para uma página específica após a confirmação do pagamento. Para isso, role para baixo e selecione a seção Configurações adicionais do formulário. Selecione ou insira o link da página que deve aparecer após a confirmação do pagamento.
Durante o checkout, o sistema verifica se os produtos do CRM estão em estoque. Se um produto estiver esgotado ou houver quantidade insuficiente, o cliente verá uma mensagem informando que a compra não pode ser concluída. O valor e o total do pedido serão atualizados com base no estoque atual.
Adicionar campos
Por padrão, seu formulário de pedido já inclui o campo E-mail, que o sistema usa para identificar os clientes em todas as ferramentas da SendPulse. Você também pode adicionar seus próprios campos para coletar mais informações, como nomes, endereços e números de telefone.
Clique em Adicionar na seção Campos do formulário. Para configurar um campo, clique no ícone de lápis ao lado dele. Selecione o tipo de campo, insira seu nome e placeholder e vincule-o aos campos do CRM. Você também pode mover e excluir campos.
Saiba mais: Tipos de campos personalizados que você pode configurar.
Integre com outras ferramentas
Para integrar com o sistema CRM, insira um nome de acordo, selecione um pipeline e defina o estágio do acordo onde ele deve ser salvo. Quando um visitante do site fizer um pedido, um negócio e um contato serão criados no sistema CRM usando os dados preenchidos no campo do carrinho, e a lista de produtos pedidos será adicionada aos comentários do negócio.
Para salvar contatos com tags de CRM específicas, ative a chave Atribuir tag a um contato e selecione as tags. A lista inclui todas as tags criadas em todos os pipelines e abas do sistema de CRM.
Você também pode integrar com a seção E-mail. Ative a opção Adicionar à lista de endereçamento e selecione uma lista de endereçamento.
Selecione uma opção de entrega
Assim que você adicionar produtos físicos às configurações da sua loja virtual, as opções de entrega disponíveis aparecerão automaticamente.
Se os usuários adicionarem apenas produtos digitais ao carrinho, nenhuma opção de entrega será exibida.
Personalize o botão de pagamento
Para personalizar o botão de Pagamento, clique no ícone de lápis na seção Botão. No campo Texto, insira o texto do seu botão e, no campo Estilo, selecione o tamanho e estilo do botão. Primário e Secundário seguem o estilo geral da sua página, enquanto Personalizado permite que você defina a cor do texto, cor de fundo, borda e efeitos hover.
Adicione a página pós-pagamento
Você pode redirecionar os usuários para uma página específica após a confirmação do pagamento. Use páginas de pagamento para orientar os clientes sobre os próximos passos.
Para adicionar uma página, role para baixo e selecione Configurações adicionais do formulário. Adicione o link da página para a qual os usuários serão redirecionados após pagamentos concluídos com sucesso. Você também pode selecionar uma página do site no menu ou adicionar um link para um chatbot.
Saiba mais: Como criar uma página após o pagamento.
Adicione um código promocional
Você pode permitir que os usuários apliquem códigos promocionais do CRM durante o checkout, oferecendo descontos ou bônus.
Acesse Configurações adicionais do formulário, ative a opção Adicionar campo de código promocional e escolha quais códigos poderão ser usados.
No campo Título, insira o texto que será exibido acima do campo (por exemplo, “Aplicar código promocional”). No campo Texto auxiliar, insira o texto que aparecerá dentro do campo. Em Código promocional, selecione um ou mais códigos que poderão ser aplicados.
Após publicar o site, o formulário de pagamento incluirá um campo para aplicação de códigos promocionais. Quando o usuário inserir um código, o sistema fará a validação automaticamente e, se for válido, o desconto será aplicado ao valor total do pedido.
Configure o Analytics
Você pode transferir metas do seu formulário para o Google Analytics e eventos do Facebook Pixel. Clique em Configurações do Analytics.
Ative a opção Transferir a meta para o Google Analytics ou Transferir a meta para o pixel do Facebook.
Para concluir a transferência de dados, adicione o código do Facebook Pixel e do Google Analytics nas configurações do seu site. Saiba mais: Como conectar o Google Analytics ao seu site e Como conectar o Facebook Pixel ao seu site.
Depois de terminar de editar sua página de carrinho, clique em Publicar.
Última Atualização: 05.11.2026
ou