Como criar uma tabela de preços responsiva no Squarespace sem CSS personalizado

Uma tabela de preços facilita para seus clientes visualizarem o que estão recebendo pelo valor investido. Isso é importante tanto se você vende planos SaaS, pacotes de agência, assinaturas ou planos recorrentes. De fato, em um estudo de 2024 da Zuora/Harris Poll, 80% dos adultos norte-americanos afirmaram que a flexibilidade na forma de comprar e pagar por produtos recorrentes é “importante”, “muito importante” ou “absolutamente essencial”.

O Squarespace, no entanto, não inclui um bloco nativo para uma tabela de preços convencional com linhas e colunas. Você pode criar a sua própria com texto, botões e o Fluid Engine, mas precisará fazer isso separadamente para os layouts de desktop e mobile. 

Ou, se ajustar manualmente três cards de preços em dois tamanhos de tela diferentes não é como você quer passar sua tarde, deixe-me mostrar um caminho menos trabalhoso.

Opção 1: Criar uma tabela usando os blocos de layout nativos do Squarespace

O Squarespace já possui um bloco de Plano de Preços, então, dependendo do que você vende, talvez não precise montar uma tabela do zero. O bloco funciona com tabela de planos para assinaturas e conteúdo restrito, incluindo Member Sites, cursos, vídeos e blogs com paywall. 

Você pode oferecer acesso gratuito, pagamento único, parcelado ou recorrente, e posicionar vários blocos de planos juntos para um comparativo de valores.

Se isso descreve o que você vende, veja como configurar:

1. Crie seu plano de preços: Em Produtos, crie o conteúdo ou a assinatura que deseja vender e depois adicione os preços e as regras de acesso. Você também pode criar planos que agrupem conteúdos elegíveis.
2. Adicione um bloco de Plano de Preços: Edite sua página, clique em Adicionar bloco (+), escolha Plano de Preços e selecione o plano que você criou.
3. Estilize o plano: Em Design, escolha se deseja exibir o título, a descrição, o preço, os benefícios e o botão. Adicione mais blocos se quiser vários planos lado a lado.

O porém, no entanto, é que o bloco de Plano de Preços do Squarespace está vinculado às suas assinaturas e conteúdo restrito. Isso não funciona para uma tabela de preços comparando planos SaaS, pacotes de agência, contratos de freelancer ou outros serviços.

Para esses casos, a alternativa nativa é o Fluid Engine, onde você monta cada plano a partir de blocos separados de texto e botão e os alinha em colunas. No entanto, desktop e mobile precisam de ajustes separados. 

A própria documentação do Squarespace afirma que o bloco existe para vender acesso a conteúdo restrito, não para criar uma tabela de planos de uso geral para comparativo de pacotes ou serviços.

Você também pode comprar plug-ins de tabela de preços específicos para o Squarespace de desenvolvedores independentes. Will Myers, por exemplo, vende um por US$ 25 por site, com três estilos predefinidos e suporte ao Squarespace 7.1. Porém, eu não recomendaria, pois ele não faz parte do marketplace oficial de Extensões do Squarespace nem é uma integração oficial do Squarespace.

Opção 2: Adicionar um widget de tabela de preços gratuito e personalizável

Use o Widget de Tabela de Preços do Jotform se você preferir uma tabela comparativa em vez de vários cards alinhados.

O construtor visual permite adicionar tabelas mensais e anuais; editar planos e funcionalidades; vincular cada chamada para ação (CTA) ao destino desejado; e escolher entre layouts de cards, carrossel ou comparativo completo. 

Você também pode destacar um plano recomendado com o selo Popular; adicionar descontos e preços anteriores; e controlar cores, tipografia, botões, largura das colunas e comportamento no mobile. 

Comece de forma rápida e sem complicações: 

1. Monte sua tabela de preços: Adicione seus planos, preços, funcionalidades, descrições e links de CTA. Você pode criar várias tabelas (por exemplo, preços mensais e anuais) e permitir que os visitantes alternem entre elas.
2. Escolha um layout e estilize: Selecione um modelo predefinido como Grade Moderna, Colunas Compactas, Comparativo Clássico ou Carrossel de Cards e ajuste o design para combinar com seu site Squarespace. 
3. Incorpore no Squarespace: Clique em Experimente no Seu Site Gratuitamente, copie o código de incorporação gerado e abra sua página no Squarespace. Adicione um bloco de Código, cole o código como HTML, certifique-se de que Exibir Fonte esteja desativado e salve e visualize a página.

O Jotform gerencia a tabela de preços como uma única incorporação, então o Squarespace só precisa exibi-la. E, por enquanto, não há cobrança recorrente pelo widget: os Widgets para Sites do Jotform são gratuitos até 2027.

Já que você está na biblioteca de widgets…

Não pare na tabela de preços. Você pode adicionar outras funcionalidades com os Widgets para Sites do Jotform, incluindo

• O Widget de FAQ para perguntas sobre preços, cobranças, cancelamentos, funcionalidades e onboarding
• O Widget de Avaliações do Google para colocar prova social ao lado da decisão de compra, em vez de enviar os visitantes ao Google para encontrá-la
• O Widget de Popup para inscrições em newsletters, descontos, demonstrações, anúncios de lançamento ou ofertas de saída

E depois que a tabela de preços cumprir seu papel, a integração do Jotform com o Squarespace pode assumir a próxima etapa com formulários de cadastro ou pagamento incorporados.