Cómo añadir una tabla de precios a Squarespace
Si vendes servicios, afiliaciones, paquetes, cursos, contratos de retención o suscripciones, una tabla de precios puede hacer que tu oferta resulte mucho más fácil de entender.
En lugar de obligar a los visitantes a leer largos párrafos con detalles sobre los precios, una tabla de precios les permite comparar las opciones de un solo vistazo.
Esto es importante porque la mayoría de la gente no solo se fija en el precio. Intentan responder a unas cuantas preguntas rápidas:
¿Qué opción es la más adecuada para mí?
¿Qué me dan?
¿En qué se diferencian los distintos planes?
¿Dónde tengo que hacer clic ahora?
Squarespace no cuenta con un bloque de «tabla de precios» perfecto que sirva para todos los casos de uso. Sin embargo, hay varias formas de añadir uno, dependiendo del nivel de acabado, la capacidad de edición y la interactividad que necesites que tenga.
Puedes crear una tabla de precios sencilla con las secciones nativas de Squarespace. También puedes integrar un widget de precios de terceros. O bien, puedes utilizar una biblioteca de secciones como Kleemt si quieres una tabla de precios con un diseño más elaborado sin tener que crear el diseño desde cero.
Opción 1: Crear manualmente una tabla de precios sencilla en Squarespace
La opción más sencilla es crear tu tabla de precios directamente en Squarespace utilizando secciones, columnas, bloques de texto, botones y bloques de formas o imágenes.
Esto funciona mejor cuando tienes dos o tres ofertas.
Por ejemplo, podrías crear tres fichas de precios una al lado de la otra:
Paquete inicial
500 $
Ideal para proyectos pequeños
Incluye los ejes X, Y y Z
Botón: Solicitar una llamada
Crecimiento
1.500 $
Ideal para proyectos más completos
Incluye X, Y, Z y mucho más
Botón: Reservar una llamada
Premium
3.500 $
Ideal para un servicio de asistencia integral
Incluye todo lo anterior más estrategia
Botón: Solicitar ahora
Esta opción es interesante porque todo se gestiona directamente en Squarespace. Puedes editar los nombres de los planes, los precios, las descripciones y los botones sin tener que modificar el código ni recurrir a otra plataforma.
El inconveniente es que puede llevar algo de tiempo y esfuerzo conseguir que las columnas tengan un aspecto impecable. Si un plano tiene más texto que otro, es posible que las tarjetas no queden alineadas de forma uniforme. También hay que comprobarlo bien en dispositivos móviles, ya que las columnas suelen apilarse de forma diferente en pantallas más pequeñas.
Utiliza esta opción si:
Solo necesitas una sección sencilla de precios
quieres que todo siga siendo nativo de Squarespace
No necesitas botones de alternancia, animaciones ni funciones avanzadas de comparación.
quieres que la sección sea fácil de editar para un cliente o un miembro del equipo
Este es el punto de partida más práctico para crear una tabla de precios básica de Squarespace.
Opción 2: Utilizar un widget de tabla de precios de terceros
Otra opción es utilizar una herramienta de widgets de terceros, como «Elfsight Pricing Table » o «Common Ninja Pricing Tables».
Estas herramientas te permiten crear la tabla de precios en un editor externo y, a continuación, incrustarla en Squarespace mediante un bloque de código o un bloque de incrustación.
Un widget puede resultarte útil si necesitas funciones como:
plantillas prediseñadas de tablas de precios
diseños en columnas, cuadrículas o tablas
cintas de planes recomendados
ofertas destacadas
botones para cada plan
controles de diseño sin código
futuras modificaciones desde un panel de control
La mayor ventaja es que no tienes que crear la tabla de precios manualmente dentro de Squarespace. Creas la tabla en el editor de widgets, copias el código de inserción, lo pegas en tu página de Squarespace y la publicas.
La contrapartida es que ahora dependes de otra plataforma. Los planes gratuitos pueden incluir publicidad, límites de visualizaciones o restricciones en las funciones. Los planes de pago pueden merecer la pena si el widget resuelve un problema empresarial real, pero sigue siendo una herramienta más que gestionar.
Utiliza esta opción si:
quieres un editor sin código
Necesitas una tabla de precios más estructurada.
Vuestros precios cambian a menudo
¿Quieres los aspectos más destacados del plan o las cintas?
¿No te importa utilizar un widget externo?
quieres algo más rápido que crear el diseño a mano
Esta puede ser una buena opción para modelos de precios tipo SaaS, suscripciones, paquetes de coaching, cursos u ofertas por niveles.
Opción 3: Utilizar la sección «Tabla de precios» de Kleemt
Si quieres una tabla de precios con un aspecto más cuidado sin tener que crear tú mismo el diseño, merece la pena echarle un vistazo a Kleemt.
Kleemt es una biblioteca de secciones y bloques para Squarespace. Una vez configurada, podrás añadir secciones personalizadas directamente en Squarespace, incluida una sección de tabla de precios.
Esto lo diferencia de un widget externo genérico. El objetivo no es solo mostrar información sobre precios, sino conseguir que la sección encaje perfectamente en una página de Squarespace más cuidada.
Utiliza una sección como esta cuando quieras que la tabla de precios tenga un aspecto más elegante que un diseño básico de texto y botones, pero no quieras programarla tú mismo desde cero.
Esto resulta especialmente útil para:
paquetes de servicios
contratos de servicios creativos
afiliaciones
cursos
ofertas de coaching
servicios estandarizados
paquetes de agencias
secciones comparativas en las páginas de destino
Una tabla de precios no es solo un elemento de diseño. Es una sección que ayuda a tomar decisiones. El visitante compara la relación calidad-precio, no solo el precio.
Esto significa que en esta sección se deben explicar de forma clara las diferencias entre tus ofertas.
Utiliza esta opción si:
Quieres que la sección de precios tenga un aspecto más pulido
ya te sientes cómodo trabajando con Squarespace
quieres algo más rápido que un diseño a medida
quieres que la tabla de precios aparezca junto a otras secciones personalizadas
estás creando una página más interactiva o con un toque más exclusivo
Kleemt resulta especialmente útil si estás mejorando más de una parte de la página. Por ejemplo, puedes combinar una tabla de precios con testimonios, filas de logotipos, galerías de imágenes, contadores atrás, líneas de tiempo, listas desplegables o bloques de pruebas sociales.
Opción 4: Utilizar una tabla de precios con imágenes
También puedes diseñar una tabla de precios en Canva, Figma, Photoshop u otra herramienta de diseño, exportarla como imagen y subirla a Squarespace.
Por lo general, esta no es la mejor opción.
Puede que a simple vista parezca correcto, pero genera problemas.
El texto que aparece dentro de una imagen es más difícil de editar. Es posible que no sea accesible para los lectores de pantalla. Puede verse borroso en algunas pantallas. No se muestra tan bien en dispositivos móviles. Y si cambian tus precios, tienes que volver al archivo de diseño, exportar una nueva imagen y volver a subirla.
Utiliza esta opción solo si:
La tabla de precios es provisional
La tabla de precios es, sobre todo, decorativa.
Los detalles reales sobre los precios también figuran en otro lugar del texto.
Necesitas un marcador de posición rápido mientras creas la sección definitiva.
En la mayoría de los sitios web, utiliza texto sin formato.
¿Y qué hay del código personalizado?
Puedes crear una tabla de precios con código HTML, CSS y JavaScript personalizados.
Sin embargo, para la mayoría de los usuarios de Squarespace, esa no es la opción más realista.
El código personalizado puede funcionar bien si eres desarrollador o si estás creando un diseño muy específico. Pero también implica que las modificaciones futuras pueden requerir editar el código. Esto puede resultar molesto si los precios, los nombres de los planes, las funciones o los botones cambian con frecuencia.
Para la mayoría de la gente, las mejores opciones son:
crear una versión sencilla de forma nativa en Squarespace
utiliza un widget sin código como Elfsight o Common Ninja
utilizar un perfil de una biblioteca como Kleemt
Es posible utilizar código personalizado, pero normalmente no es la primera opción que recomendaría para una tabla de precios.
¿Qué debe incluir una buena tabla de precios?
Una buena tabla de precios debería facilitar la elección de la oferta.
Como mínimo, cada plan debería incluir:
nombre del plan
precio
breve descripción
características principales o resultados esperados
para quién es más adecuado el plan
botón de llamada a la acción
Si hay una opción que quieres que la gente elija con más frecuencia, déjalo claro.
Puedes ponerle una etiqueta:
Los más populares
La mejor relación calidad-precio
Recomendado
Ideal para equipos en expansión
La mejor opción para la mayoría de los clientes
No te pases. Un plan resaltado es útil. Tres planes resaltados van en contra del objetivo.
Haz que la tabla de precios sea sencilla
El error más habitual en las tablas de precios es intentar incluirlo todo.
Una tabla de precios no es el lugar adecuado para explicar todas las políticas, los casos extremos, los complementos y las excepciones.
Esto debería ayudar a alguien a decidir cuál es el siguiente paso.
Si necesitas dar más detalles, añade una breve sección de preguntas frecuentes debajo de la sección de precios.
Algunas preguntas útiles que podrían incluirse en la sección de preguntas frecuentes son:
¿Qué ocurre después de hacer la reserva?
¿Puedo personalizar un paquete?
¿Ofrecéis planes de pago?
¿Qué no está incluido?
¿Cuándo podemos empezar?
¿Qué ocurre si necesito más ayuda?
De este modo, la tabla de precios se mantiene clara y concisa, al tiempo que responde a las preguntas que influyen en la decisión de compra.
¿Qué opción deberías elegir?
Si quieres la opción más sencilla, crea las fichas de precios manualmente en Squarespace.
Si quieres un editor sin código con plantillas y funciones destacadas, utiliza un widget como Elfsight o Common Ninja.
Si quieres una sección de Squarespace con un acabado pulido y un aspecto más cuidado, utiliza una biblioteca de secciones como Kleemt.
Si estás creando una página de ventas seria, no consideres la tabla de precios como un mero adorno.
Piensa en ello como el momento en el que el visitante decide si tu oferta le parece interesante.
Cuanto más clara sea esa sección, más fácil resultará el siguiente paso.
Recursos relacionados con Squarespace
Si estás mejorando una página de ventas o de servicios, esto también te puede resultar útil:
