Cómo crear una tabla de precios responsive en Squarespace sin CSS personalizado

Una tabla de precios facilita que tus clientes vean exactamente lo que obtienen por su dinero. Esto es importante tanto si vendes planes SaaS, paquetes de agencia, membresías o suscripciones. De hecho, en un estudio de Zuora/Harris Poll de 2024, el 80 por ciento de los adultos estadounidenses afirmó que la flexibilidad en cómo compran y pagan por productos recurrentes es “importante”, “muy importante” o “absolutamente esencial”.

Sin embargo, Squarespace no incluye un bloque nativo para una tabla convencional de filas y columnas. Puedes crear la tuya propia con texto, botones y Fluid Engine, pero tendrás que hacerlo por separado para las versiones de escritorio y móvil. 

O, si ajustar manualmente tres tarjetas de precios en dos tamaños de pantalla distintos no es la forma en que quieres pasar tu tarde, déjame mostrarte una manera menos dolorosa.

Opción 1: Crear una tabla de precios con los bloques nativos de Squarespace

Squarespace ya cuenta con un bloque de Plan de Precios, así que, dependiendo de lo que vendas, puede que no necesites armar una tabla desde cero. El bloque funciona con planes de precios para membresías y contenido restringido, incluyendo Member Sites, cursos, videos y blogs de pago. 

Puedes ofrecer acceso gratuito, de pago único, en cuotas o recurrente, y colocar varios bloques de planes juntos para facilitar la comparativa de opciones.

Si eso describe lo que vendes, aquí tienes los pasos de configuración:

1. Crea tu plan de precios: Desde Productos, crea el contenido o la membresía que quieres vender, y luego añade su precio y reglas de acceso. También puedes crear planes que agrupen contenido elegible.
2. Añade un bloque de Plan de Precios: Edita tu página, haz clic en Añadir bloque (+), elige Plan de Precios y selecciona el plan que creaste.
3. Dale estilo al plan: En Diseño, elige si quieres mostrar el título, la descripción, el precio, los beneficios y el botón. Añade más bloques si quieres colocar varios planes uno junto a otro.

El inconveniente, sin embargo, es que el bloque de Plan de Precios de Squarespace está vinculado a sus membresías y contenido restringido. Esto no funcionará para una tabla comparativa de niveles SaaS, paquetes de agencia, contratos de freelance u otros servicios.

Para esos casos, la alternativa nativa es Fluid Engine, donde construyes cada nivel a partir de bloques de texto y botones independientes, y luego los alineas en columnas. Sin embargo, las versiones de escritorio y móvil requieren ajustes por separado. 

La propia documentación de Squarespace indica que el bloque existe para vender acceso a contenido restringido, no para crear un cuadro de precios de uso general para planes, paquetes o servicios.

También puedes comprar complementos de tabla de precios específicos para Squarespace de desarrolladores independientes. Will Myers, por ejemplo, vende uno por 25 $ por sitio con tres estilos predefinidos y compatibilidad con Squarespace 7.1. Sin embargo, no lo recomendaría, ya que no forma parte del marketplace oficial de Extensiones de Squarespace ni es una integración oficial de Squarespace.

Opción 2: Añadir un widget gratuito y personalizable de tabla de precios

Usa el Widget de Tabla de Precios de Jotform si prefieres tener una tabla comparativa en lugar de varias tarjetas alineadas.

El constructor visual te permite añadir tablas mensuales y anuales; editar planes y características; enlazar cada llamada a la acción (CTA) a donde necesites; y elegir entre diseños de tarjeta, carrusel o comparativa de planes completa. 

También puedes destacar un nivel recomendado con una etiqueta de Popular; añadir descuentos y precios anteriores; y controlar colores, tipografía, botones, anchos de columna y comportamiento en móvil. 

Empieza de forma rápida y sencilla: 

1. Crea tu tabla de precios: Añade tus planes, precios, características, descripciones y enlaces de CTA. Puedes crear varias tablas (por ejemplo, precios mensuales y anuales) y permitir que los visitantes alternen entre ellas.
2. Elige un diseño y personalízalo: Selecciona un estilo predefinido como Cuadrícula Moderna, Columnas Compactas, Comparativa Clásica o Carrusel de Tarjetas, y luego ajusta el diseño para que combine con tu sitio de Squarespace. 
3. Insértalo en Squarespace: Haz clic en Pruébalo en tu sitio web gratis, copia el código de inserción generado y luego abre tu página de Squarespace y añade un bloque de Código. Pega el código como HTML, asegúrate de que Mostrar código fuente esté desactivado, y luego guarda y previsualiza la página.

Jotform gestiona la tabla de precios como una sola inserción, así que Squarespace solo tiene que mostrarla. Y, por ahora, no hay ningún coste recurrente por el widget: los Widgets para Sitios Web de Jotform son gratuitos hasta 2027.

Ya que estás en la biblioteca de widgets…

No te quedes solo con las tablas de precios. Puedes añadir otras funcionalidades con los Widgets para Sitios Web de Jotform, incluyendo

• El Widget de Preguntas Frecuentes para dudas sobre precios, facturación, cancelaciones, características e incorporación
• El Widget de Reseñas de Google para colocar prueba social junto a la decisión de compra en lugar de enviar a los visitantes a Google a buscarla
• El Widget de Popup para suscripciones a newsletters, descuentos, demos, anuncios de lanzamiento u ofertas de salida

Y después de que la tabla de precios haya cumplido su función, la integración de Jotform con Squarespace puede encargarse del siguiente paso con formularios de registro o pago integrados.