Pagina prezzi che fa comprare: 3 esempi reali da copiare
Come fare una pagina prezzi che aiuta a scegliere? Tre siti reali a confronto, i trucchi da copiare e un selettore mensile/annuale senza JavaScript.
Una buona pagina prezzi sceglie insieme a chi legge: indica un piano, mostra il risparmio in soldi veri, spiega le unità con parole normali e ripete il prezzo sul pulsante. Qui trovi tre siti reali che lo fanno bene, un prompt per ogni idea e un selettore mensile/annuale da copiare.
I tre esempi vengono da Pricing Pages, una raccolta gratuita di pagine prezzi. Li abbiamo registrati su uno schermo da portatile il 21 ottobre 2026. Raccontiamo solo quello che si vede: non conosciamo i loro dati di vendita. I siti sono in inglese e in dollari, ma le idee valgono uguale per un'agenzia, una palestra, un corso online o un piccolo software italiano.
1. Chronicle: ogni piano elenca solo le novità
Cos'è: Chronicle è uno strumento per creare presentazioni. Quattro card bianche identiche nella struttura: Free a 0 dollari, Pro a 15, Plus a 30, Max a 59, a persona al mese. Spicca solo una piccola etichetta nera "Popular" su Plus. In alto, un interruttore "Pay annually (save 20%)".
Perché serve: Pro comincia con "Everything in Free, and:", cioè tutto quello che c'è in Free, più questo. Plus fa lo stesso partendo da Pro. Ogni card risponde solo a "cosa ottengo salendo di un gradino?". E quando accendi l'annuale, il vecchio prezzo resta sulla card, barrato, accanto al nuovo: Pro da 15 a 12 dollari, Plus da 30 a 25, Max da 59 a 45.
Come si fa: fai iniziare l'elenco di ogni piano con "Tutto quello che c'è in [piano precedente], più:" e scrivi solo le novità. Quando cambia il periodo, lascia il prezzo vecchio barrato accanto a quello nuovo.
Riscrivi gli elenchi dei miei piani in modo che ognuno, dal secondo in poi, cominci con "Tutto quello che c'è in [piano precedente], più:" e contenga solo le funzioni nuove. Se una funzione compare in più piani, tienila solo nel primo. Poi, quando l'utente passa all'annuale, mostra il prezzo mensile barrato accanto a quello nuovo, nello stesso punto della card. Ecco i miei piani: [incolla nomi, prezzi e funzioni].
2. Orshot: uno slider che sceglie il piano al posto tuo
Cos'è: Orshot crea in automatico immagini, PDF e video da modelli pronti. Il titolo è l'offerta stessa, a caratteri enormi: "100 free credits. Every month." Il piano gratuito è una barra sottile in alto, poi tre card: Launch a 39 dollari, Grow a 160, Scale a 349. Sull'annuale c'è un'etichetta verde "2 months free".
Perché serve:
- Una sola spinta forte. Grow ha l'etichetta "POPULAR" ed è l'unico piano con il pulsante nero pieno.
- Tu dici di cosa hai bisogno, la pagina trova il piano. Uno slider chiede quante immagini o PDF ti servono al mese. Nella nostra prova, a circa 36.000 immagini la card Grow è passata a 40.000 crediti e 280 dollari, e l'etichetta è diventata "SUGGESTED PLAN". "Quante immagini mi servono?" è una domanda molto più facile di "quale piano sono io?".
- L'unità viene tradotta. Sotto "20,000 render credits / month" una riga grigia dice: circa 20.000 immagini o PDF, oppure circa 333 minuti di video.
Come si fa: se vendi in un'unità tua (crediti, token, postazioni, pacchetti di ore), aggiungi sotto ogni numero una riga che dice cosa significa nella vita reale. "Circa 100 immagini al mese" batte "100 crediti". Per un corso, "8 lezioni da un'ora" batte "8 crediti".
Il mio servizio si paga in [unità: crediti, ore, postazioni...]. Per ogni piano scrivi sotto il numero una riga breve che traduce l'unità in qualcosa di concreto per un cliente (per esempio "circa 100 immagini al mese"). Poi proponimi una domanda semplice sul bisogno del cliente (per esempio "quante pratiche gestisci al mese?") e costruisci uno slider che, in base alla risposta, evidenzia il piano adatto con l'etichetta "Consigliato per te". Un solo piano alla volta deve avere il pulsante pieno.
3. Supernotes: due piani e il prezzo sul pulsante
Cos'è: Supernotes è un'app per appunti. Solo due piani: Starter gratis, in blu, e Unlimited a 8,03 dollari al mese, in verde. La prima frase dice più o meno: passa a Unlimited quando avrai deciso che l'app fa per te.
Perché serve: due piani vogliono dire una sola domanda, gratis o no. Il selettore del periodo ha tre opzioni (Monthly, Yearly "25% Off", 4-Year "50% Off") e parte già sull'annuale. Il prezzo va da 11 a 8,03 a 5,35 dollari al mese. Soprattutto, il pulsante non dice "Inizia": dice "Upgrade for $8.03 / month", e sotto in piccolo c'è il totale, 96 dollari addebitati una volta all'anno. L'ultima cosa che leggi prima di cliccare è quanto pagherai e come.
Come si fa: scrivi il prezzo dentro il pulsante, "Attiva a 8 € al mese" invece di "Inizia ora", e subito sotto il totale reale, per esempio "96 € addebitati una volta all'anno". Nessuna sorpresa dopo il clic.
Cambia il testo dei pulsanti della mia pagina prezzi: al posto di "Inizia" scrivi "Attiva [piano] a [prezzo] al mese". Sotto ogni pulsante aggiungi in piccolo il totale reale e ogni quanto viene addebitato (per esempio "96 € addebitati una volta all'anno"). Quando l'utente cambia periodo, pulsante e totale devono cambiare insieme al prezzo.
Quale modello scegliere
- Chronicle (quattro piani, etichetta discreta, prezzo barrato): se i tuoi clienti confrontano le funzioni.
- Orshot (slider, un solo pulsante pieno, unità tradotte): se non sanno quanto gli serve.
- Supernotes (due piani, annuale già scelto, prezzo sul pulsante): se hai un solo passaggio a pagamento chiaro.
Il selettore mensile/annuale senza JavaScript
Cos'è: una piccola demo che abbiamo fatto per questo articolo, con un'idea da ognuno dei tre siti: un piano consigliato, il risparmio in soldi, il prezzo sul pulsante. Senza nemmeno una riga di JavaScript.
Perché serve: chi comincia spesso costruisce l'interruttore con semplici riquadri, che con la tastiera non si raggiungono nemmeno. Due veri radio button (i pallini dei moduli in cui ne scegli uno solo) il browser li gestisce già con mouse, tastiera e lettori di schermo.
Come si fa:
- Un fieldset (gruppo di campi) con due radio, Mensile e Annuale, l'annuale già selezionato con accanto "risparmi 36 dollari". Il legend "Periodo di fatturazione" resta per i lettori di schermo ma è nascosto alla vista.
- Ogni testo che cambia esiste in due versioni, una con classe m (mensile) e una con classe y (annuale): per esempio 15 e 12 dollari, oppure "addebito ogni mese" e "144 dollari addebitati una volta all'anno".
- Il gruppo diventa una pillola color sabbia. I pallini veri diventano invisibili ma restano lì, quindi continuano a funzionare.
- Con il selettore CSS :has(), l'opzione scelta prende sfondo bianco e ombra leggera, e con la tastiera mostra un anello blu.
- La regola chiave: se la sezione contiene l'annuale selezionato, nasconde tutti i testi mensili, e viceversa. Un clic e tutta la tabella si aggiorna.
Su Chrome, con la sola tastiera, Tab raggiunge l'interruttore e le frecce cambiano opzione. Tutto gratis dai radio button.
Nota che l'etichetta dice "risparmi 36 dollari", non "risparmi il 20%". I soldi si sentono più di una percentuale: fai tu il conto per chi legge, 3 dollari al mese per 12 mesi.
Costruisci un selettore Mensile/Annuale per la mia pagina prezzi senza JavaScript. Usa un fieldset con due input radio veri (Annuale già selezionato) e un legend "Periodo di fatturazione" visibile solo ai lettori di schermo. Ogni testo che cambia (prezzo, nota di addebito, testo del pulsante) va scritto in due versioni con classe .m e .y. Con il selettore CSS :has(): se la sezione contiene il radio annuale selezionato, nascondi i .m, altrimenti nascondi i .y. Stile a pillola, opzione scelta con sfondo bianco, anello di focus visibile da tastiera. Accanto ad Annuale scrivi il risparmio in euro, non in percentuale. I miei prezzi: mensile [X €], annuale [Y € al mese].
Prova piccola
Dieci minuti. Apri la tua pagina prezzi e rispondi a tre domande: c'è un solo piano evidenziato? Il pulsante dice quanto costa il clic? Riesci a cambiare da mensile ad annuale usando solo Tab e le frecce? Se una risposta è no, incolla il prompt giusto qui sopra. È riuscita se una persona che non conosce il tuo servizio ti dice in 30 secondi quale piano prenderebbe e quanto pagherà.
Attenzione a
- Non sappiamo cosa vende di più. Descriviamo quello che si vede, non i risultati di vendita dei tre siti.
- :has() va controllato. Oggi funziona in tutti i browser principali, ma in un browser molto vecchio i due prezzi comparirebbero affiancati. Prova nei browser dei tuoi clienti.
- Il totale deve essere onesto. Se scrivi "8 € al mese" ma addebiti 96 € all'anno, dillo sotto il pulsante.
Grazie ai team di Chronicle, Orshot e Supernotes per pagine che vale la pena studiare, e a Pricing Pages per averle raccolte. Questo articolo nasce da un confronto di Alek pubblicato in inglese su Medium.
Passo successivo: sistema anche il modulo di acquisto con Form che sembrano economici: 5 ritocchi. Se vuoi rifare la pagina partendo da un riferimento vero, usa MagpUI e i prompt di design.
In breve: Una buona pagina prezzi sceglie insieme a te: indica un solo piano, mostra il risparmio in soldi, spiega le unità con parole di tutti i giorni e ripete il prezzo sul pulsante.
Newsletter
L'AI che funziona davvero, nella tua casella.
Le nuove pillole, gli strumenti che usiamo e quello che impariamo sui progetti. Poche mail, solo quando c’è qualcosa di utile.
