Come creare una tabella prezzi responsive per Squarespace senza CSS personalizzato

Una tabella prezzi rende facile per i tuoi clienti capire cosa ottengono in cambio del loro denaro. Questo è importante sia che tu venda piani SaaS, pacchetti per agenzie, abbonamenti o sottoscrizioni. Infatti, secondo uno studio Zuora/Harris Poll del 2024, l’80% degli adulti statunitensi ha dichiarato che la flessibilità nel modo in cui acquistano e pagano prodotti ricorrenti è “importante”, “molto importante” o “assolutamente essenziale”.

Squarespace, tuttavia, non include un blocco nativo per una classica tabella a righe e colonne. Puoi crearne una personalizzata con testo, pulsanti e Fluid Engine, ma dovrai farlo separatamente per il layout desktop e quello mobile. 

Oppure, se posizionare manualmente tre schede di prezzi su due dimensioni di schermo diverse non è il modo in cui vuoi trascorrere il tuo pomeriggio, lascia che ti mostri un metodo meno faticoso.

Opzione 1: Creare una tabella prezzi con i blocchi layout nativi di Squarespace

Squarespace dispone già di un blocco Piano Tariffario, quindi a seconda di ciò che vendi, potresti non aver bisogno di creare un listino prezzi da zero. Il blocco funziona con i piani tariffari per abbonamenti e contenuti riservati, inclusi i Member Sites, corsi, video e blog a pagamento. 

Puoi offrire accesso gratuito, una tantum, a rate o ricorrente e posizionare più blocchi di piani insieme per un confronto tariffe.

Se questo descrive ciò che vendi, ecco come procedere:

1. Crea il tuo piano tariffario: Da Prodotti, crea il contenuto o l’abbonamento che vuoi vendere, quindi aggiungi il prezzo e le regole di accesso. Puoi anche creare listino prezzi con piani che raggruppano contenuti idonei.
2. Aggiungi un blocco Piano Tariffario: Modifica la tua pagina, clicca su Aggiungi blocco (+), scegli Piano Tariffario e seleziona il piano che hai creato.
3. Personalizza lo stile del piano: In Design, scegli se visualizzare titolo, descrizione, prezzo, vantaggi e pulsante. Aggiungi altri blocchi se vuoi affiancare diversi piani.

Il problema, tuttavia, è che il blocco Piano Tariffario di Squarespace è legato ai suoi abbonamenti e contenuti riservati. Non funzionerà per una tabella prezzi che confronta livelli SaaS, pacchetti per agenzie, contratti freelance o altri servizi.

Per questi casi, la soluzione nativa è Fluid Engine, dove costruisci ogni livello con blocchi separati di testo e pulsanti, per poi allinearli in colonne. Tuttavia, desktop e mobile richiedono passaggi separati. 

La documentazione ufficiale di Squarespace conferma che il blocco è pensato per vendere l’accesso a contenuti riservati, non per creare un listino prezzi generico per il confronto tariffe di piani, pacchetti o servizi.

Puoi anche acquistare plug-in per tabelle prezzi specifici per Squarespace da sviluppatori indipendenti. Will Myers, ad esempio, ne vende uno a 25 $ per sito con tre stili preimpostati e supporto per Squarespace 7.1. Non lo consiglierei, però, perché non fa parte né del marketplace ufficiale delle Estensioni di Squarespace né delle integrazioni ufficiali di Squarespace.

Opzione 2: Aggiungere un widget gratuito e personalizzabile per la tabella prezzi

Usa il Widget Tabella Prezzi di Jotform se preferisci avere una tabella di confronto tariffe invece di più schede affiancate.

Il costruttore visuale ti permette di aggiungere tabelle mensili e annuali, modificare piani e funzionalità, collegare ogni call to action (CTA) dove necessario e scegliere tra layout a schede, carosello o confronto completo. 

Puoi anche evidenziare un livello consigliato con un’etichetta Popolare, aggiungere sconti e prezzi barrati, e personalizzare colori, tipografia, pulsanti, larghezza delle colonne e comportamento su mobile. 

Inizia in modo facile e veloce: 

1. Crea la tua tabella prezzi: Aggiungi i tuoi piani tariffari, prezzi, funzionalità, descrizioni e link CTA. Puoi creare listino prezzi multipli (ad esempio, prezzi mensili e annuali) e permettere ai visitatori di passare dall’uno all’altro.
2. Scegli un layout e personalizzalo: Seleziona un preset come Griglia Moderna, Colonne Compatte, Confronto Classico o Carosello a Schede, poi adatta il design per abbinarlo al tuo sito Squarespace. 
3. Incorporalo in Squarespace: Clicca su Provalo sul tuo sito web gratuitamente, copia il codice di incorporamento generato, poi apri la tua pagina Squarespace e aggiungi un blocco Codice. Incolla il codice come HTML, assicurati che Mostra sorgente sia disattivato, poi salva e visualizza l’anteprima della pagina.

Jotform gestisce la tabella prezzi come un unico elemento incorporato, quindi Squarespace deve solo visualizzarla. E, per ora, non ci sono costi ricorrenti per il widget: i Widget per Siti Web di Jotform sono gratuiti fino al 2027.

Già che sei nella libreria dei widget…

Non fermarti alle tabelle prezzi. Puoi aggiungere altre funzionalità con i Widget per Siti Web di Jotform, tra cui

• Il Widget FAQ per domande su prezzi, fatturazione, cancellazioni, funzionalità e onboarding
• Il Widget Recensioni Google per inserire la riprova sociale accanto alla decisione d’acquisto, invece di mandare i visitatori su Google a cercarla
• Il Widget Popup per iscrizioni alla newsletter, sconti, demo, annunci di lancio o offerte di uscita

E dopo che la tabella prezzi ha fatto il suo lavoro, l’integrazione Jotform per Squarespace può occuparsi del passaggio successivo con moduli di registrazione o pagamento incorporati.