Se você vende na Shopify, o design do seu botão de CTA é fundamental. Seja ele direcionado para uma página promocional, para o cadastro em uma newsletter VIP ou para um link de afiliado, um botão que chama a atenção recebe mais cliques do que um que se mistura ao restante da página — e, em uma loja virtual, mais cliques significam mais vendas.
Os temas Shopify OS 2.0, incluindo o Dawn, têm blocos de botão nativos, mas oferecem pouco controle sobre a aparência desses botões. O bloco permite definir o texto, o link e se o estilo é sólido ou com contorno, enquanto as cores vêm das configurações globais do tema. Isso mantém a sua loja consistente (que é justamente o objetivo das configurações de tema), mas também significa que um botão feito para se destacar terá a mesma aparência de todos os outros botões do seu site.
Para ter um botão independente, com cores, efeito hover ou ícone próprios, existem duas abordagens. Você pode adicionar um bloco Liquid personalizado no editor de temas e escrever o HTML e o CSS por conta própria, ou usar um widget hospedado gratuito que cuida da estilização e fornece um código de incorporação para você colar.
Se você quer um botão de CTA personalizado e otimizado para conversão na sua loja Shopify, sem editar o código do tema nem pagar um desenvolvedor, este guia mostra como adicionar um botão na Shopify usando os dois métodos.
Opção 1: usar Liquid personalizado e CSS
A maneira padrão de incluir um design de botão exclusivo em uma loja Shopify sem instalar um aplicativo de terceiros é escrever o código você mesmo. O editor de temas da Shopify inclui uma seção de Liquid personalizado, na qual você pode adicionar seu próprio HTML e CSS, definindo um botão e estilizando-o exatamente como quiser, sem editar diretamente os arquivos do tema.
Veja como adicionar um botão na Shopify usando Liquid personalizado e CSS:
- No painel de administração da Shopify, acesse Loja virtual no menu do lado esquerdo. Em seguida, clique no ícone de lápis ao lado de Loja virtual ou clique em Editar tema na tela.
- Na barra lateral esquerda, clique em Adicionar seção, pesquise por Liquid personalizado e selecione essa opção. Um campo de texto aparece à direita, onde você deve inserir o seu código.
- Adicione o HTML do seu botão junto com um bloco <style> contendo o seu CSS e, depois, clique em Salvar no canto superior direito. As alterações aparecem na pré-visualização conforme você trabalha.
Um alerta sobre este método: escrever a estilização por conta própria significa correr o risco de cometer erros. Regras escritas sem seletores com escopo definido podem afetar outros elementos da página, e um Liquid personalizado adicionado ao cabeçalho ou ao rodapé é exibido em todas as páginas da sua loja — ou seja, um pequeno erro pode ter um impacto maior do que apenas o botão que você estava estilizando. A Shopify também recomenda duplicar o tema como backup antes de editar o código, o que mostra como a plataforma enxerga esse risco.
Contratar um desenvolvedor pode resolver o problema técnico, mas acrescenta um custo difícil de justificar para um único botão, principalmente quando você quer testar algumas versões e cada alteração significa um novo pedido.
Opção 2: adicionar um widget de botão gratuito e personalizável (recomendado)
Quer ter controle sobre o design sem correr riscos? Um widget de botão gratuito hospedado é uma alternativa ao Liquid personalizado na Shopify, com cores, estado de hover e ícone próprios. Você pode personalizar o botão em um construtor visual, copiar o código de incorporação e colá-lo em um bloco Liquid personalizado no editor de temas.
O widget Botão da Jotform oferece as opções de estilo que o bloco nativo da Shopify deixa de fora. Você define de forma independente as cores de fundo, do texto e de hover, adiciona um ícone antes ou depois do texto e ajusta o raio dos cantos, a altura, o espaçamento interno e a sombra.
Veja como adicionar um botão na Shopify usando o widget de botão da Jotform:
- Na página do seu Workspace da Jotform, clique em Criar, selecione Widget para site, pesquise por “Botão” e, em seguida, clique em Usar widget.
- Na guia Geral, escolha a ação do botão, informe os dados solicitados (e-mail, número de telefone, link de URL etc.) e escreva o texto do botão. Adicione uma segunda linha ou um texto ao redor se a sua oferta precisar de contexto.
- Na guia Estilos, defina as cores, ative um ícone e escolha a posição dele e, depois, ajuste o formato e o tamanho. A guia Layout controla se o botão fica embutido no conteúdo ou flutuante, e se ele aparece no computador, no celular ou em ambos.
- Clique em Publicar na barra de navegação superior e, em seguida, clique em Copiar código na seção Incorporar no menu à esquerda.
Você também pode clicar em Plataformas e selecionar a Shopify para ver instruções de incorporação específicas da plataforma.
- Para incorporar o seu botão personalizado na Shopify, abra o editor de temas, selecione o modelo da sua página, clique em Adicionar seção ou Adicionar bloco, escolha Liquid personalizado, cole o código de incorporação e clique em Salvar no canto superior direito.
Com essa opção, como você estiliza o botão na Jotform em vez de diretamente no tema do seu site, as alterações ficam separadas das configurações globais do tema. Testar uma cor ou um texto diferente significa editar o widget, e não mexer novamente no código do tema. Para ver a configuração completa, confira como adicionar um botão a um site.
Impulsione a sua loja na Shopify com widgets inteligentes e sem servidor
O botão é um dos vários recursos que você pode adicionar ao seu site sem contratar um desenvolvedor nem pagar por mais um aplicativo mensal. Como alternativa de call to action para a Shopify, o diretório de widgets para site gratuitos da Jotform tem mais de 150 opções, incluindo várias voltadas para as mesmas lacunas da loja que o botão resolve.
Por exemplo, um widget de Barra de anúncios coloca o valor mínimo para frete grátis ou as datas de promoção no topo de todas as páginas, onde os clientes veem antes de finalizar a compra. Um widget de Botão de compra leva os clientes direto para a URL de um produto, do carrinho ou do checkout com um CTA de compra, o que é ideal para uma página de destino de campanha ou um upsell pós-compra. Além disso, a categoria de e-commerce conta com cartões de produtos e tabelas de preços. Também existe uma integração entre a Jotform e a Shopify que permite coletar informações dos clientes junto com a sua loja.
Cada widget é incorporado da mesma forma que o botão, então você não precisa pagar a assinatura de mais um aplicativo toda vez que quiser adicionar um recurso simples.
Como marca de e-commerce, seu tempo e seu orçamento devem ser dedicados a atividades como encontrar fornecedores de produtos e melhorar seus funis de anúncios, e não a escrever Liquid personalizado só para que um botão fique diferente dos demais. O widget Botão da Jotform oferece um CTA que você pode reestilizar em um minuto, sem mexer no seu tema. Experimente gratuitamente hoje mesmo.
Este artigo é para proprietários de lojas na Shopify, dropshippers e gerentes de e-commerce que querem adicionar botões de call to action altamente personalizados e otimizados para conversão, sem ficar limitados pelas configurações do tema nem precisar escrever código Liquid personalizado.
Enviar Comentário: