focal theme compare price before regular price

focal theme compare price before regular price

Hai mai provato quella strana sensazione di fastidio quando entri in un negozio online e non capisci subito quanto stai risparmiando? Capita sempre. Se gestisci un e-commerce su Shopify e usi il template Focal, sai bene che la chiarezza visiva è tutto. Ma c’è un dettaglio tecnico che spesso fa impazzire i commercianti: l’ordine di visualizzazione dei costi durante i saldi. Configurare correttamente Focal Theme Compare Price Before Regular Price non è solo un vezzo estetico, ma una mossa psicologica per catturare l'occhio del cliente nel momento esatto in cui atterra sulla scheda prodotto. Se il prezzo scontato e quello originale sono invertiti o posizionati male, l'utente si confonde. E un utente confuso non compra, scappa via.

Perché l'ordine dei prezzi cambia le tue conversioni

La mente umana legge da sinistra a destra, almeno alle nostre latitudini. Quando un potenziale acquirente vede prima il prezzo più alto sbarrato e poi quello più basso, il cervello registra immediatamente un affare. Se invece il colpo d'occhio cade prima sulla cifra netta e solo dopo su quella originale, l'effetto "wow" si smorza. Ho visto decine di store perdere punti percentuali di conversione solo perché avevano impostato male queste etichette. Non è teoria, sono test A/B fatti sul campo. Il template Focal è uno dei più potenti nell'ecosistema Shopify, ma richiede una mano ferma nelle impostazioni Liquid se vuoi che ogni pixel lavori per il tuo portafoglio.

La psicologia dello sconto nel mercato italiano

In Italia siamo abituati ai cartellini dei negozi fisici dove il prezzo di listino è ben visibile ma secondario rispetto all'offerta. Se il tuo sito non rispecchia questa gerarchia visiva, sembri poco professionale. Il cliente medio vuole sentirsi furbo. Vuole vedere il sacrificio che il venditore sta facendo. Mostrare chiaramente il costo precedente aiuta a stabilire il valore percepito dell'oggetto. Se vendi una borsa in pelle artigianale a 150 euro invece di 220, quel 220 deve stare lì, a testimoniare la qualità del materiale.

Errori comuni nella gestione dei metadati

Molti merchant pensano che basti inserire le cifre nel pannello di controllo di Shopify. Sbagliato. Spesso il tema non recepisce l'ordine desiderato a causa di conflitti con app di terze parti o per personalizzazioni del codice precedenti. Mi è successo spesso di analizzare siti dove il valore di confronto spariva del tutto sui dispositivi mobili. È un disastro totale. Devi assicurarti che il contenitore CSS sia largo abbastanza da ospitare entrambe le cifre senza mandarle a capo in modo disordinato.

Gestire al meglio Focal Theme Compare Price Before Regular Price nel codice

Per intervenire sulla struttura del template bisogna avere il coraggio di aprire l'editor del codice. Non aver paura, non morde. La logica che governa questa funzione si trova solitamente nei file snippet dedicati al prezzo, come price.liquid o product-item.liquid. Qui è dove avviene la magia. Devi cercare la stringa che richiama il compare_at_price e assicurarti che preceda la variabile del prezzo attuale. Inserire correttamente Focal Theme Compare Price Before Regular Price significa dare priorità visiva alla convenienza. Ricorda di testare la modifica su un tema duplicato. Mai fare esperimenti sul sito live se non vuoi che i tuoi clienti vedano una pagina bianca proprio nel bel mezzo del Black Friday.

Modifiche CSS per un impatto visivo immediato

Non basta che l'ordine sia giusto. I colori devono urlare "occasione". Di solito consiglio di usare un grigio chiaro per la cifra sbarrata e un rosso o un verde scuro per quella finale. La dimensione del carattere conta. Se il prezzo vecchio è grande quanto quello nuovo, si crea rumore visivo. Rimpicciolisci leggermente il valore di listino. Usa una proprietà text-decoration: line-through; pulita. Evita sbarramenti troppo pesanti che rendono il numero illeggibile. La trasparenza è fondamentale per costruire fiducia.

Ottimizzazione per i motori di ricerca e dati strutturati

Google ama la chiarezza tanto quanto i tuoi clienti. Se i tuoi dati strutturati Schema.org riflettono correttamente l'offerta, i tuoi prodotti appariranno nei risultati di ricerca con l'etichetta "In offerta". Questo aumenta il CTR in modo brutale. Assicurati che il tuo codice Liquid passi correttamente sia il price che il compare_at_price ai microdati di Google. Se il motore di ricerca vede discrepanze tra quello che mostri sulla pagina e quello che scrivi nel codice, potrebbe penalizzarti o non mostrare affatto i rich snippets. Puoi verificare la correttezza dei tuoi dati usando lo strumento di test per i risultati multimediali di Google.

Strategie avanzate per aumentare lo scontrino medio

Una volta sistemata la visualizzazione, non fermarti. Puoi usare queste informazioni per fare upselling. Ad esempio, potresti mostrare la percentuale esatta di risparmio accanto alle cifre. "Risparmi il 30%" colpisce molto di più di un semplice numero sbarrato. Nel template Focal, questo si attiva spesso dalle impostazioni della sezione, ma a volte serve un piccolo tweak manuale per posizionarlo esattamente tra i due valori.

Il ruolo delle applicazioni di sconti dinamici

Se usi app come Bold Discounts o simili, queste potrebbero sovrascrivere le impostazioni native del tema. È qui che le cose si fanno complicate. Queste applicazioni spesso iniettano i propri script che ignorano le tue modifiche al file Liquid. Se noti che i tuoi cambiamenti non appaiono, controlla le impostazioni dell'app. Spesso c'è una spunta specifica per mantenere il design del tema. Se non c'è, dovrai scrivere un po' di CSS personalizzato per forzare la mano.

Gestione dei prezzi per i mercati esteri

Se vendi fuori dall'Italia usando Shopify Markets, la situazione cambia ancora. Le valute diverse e le tasse incluse o escluse possono sballare tutto. Assicurati che la tua logica di Focal Theme Compare Price Before Regular Price tenga conto delle diverse lunghezze delle stringhe di valuta. Un prezzo in Yen ha molte più cifre di uno in Euro. Se il tuo layout è troppo rigido, i numeri si sovrapporranno creando un pasticcio illeggibile. Usa unità di misura flessibili come rem o em invece dei px fissi per i tuoi contenitori di testo.

👉 Vedi anche: questa storia

Come testare la tua configurazione senza fare danni

Prima di dichiarare vittoria, devi fare il giro del tuo sito come se fossi un cliente sospettoso. Guarda la pagina del prodotto. Controlla la home page nelle sezioni "Prodotti in evidenza". Non dimenticare la pagina della collezione. Spesso gli sviluppatori sistemano la singola pagina prodotto ma dimenticano che la griglia della collezione usa uno snippet diverso. È un errore da principianti che vedo continuamente. Se il cliente vede lo sconto in un posto e il prezzo pieno in un altro, penserà che il tuo sito sia rotto o, peggio, che tu stia provando a truffarlo.

  1. Apri la modalità in incognito del browser per evitare che la cache ti mostri vecchie versioni.
  2. Controlla la visualizzazione su almeno tre dispositivi diversi: un iPhone, uno smartphone Android economico e un desktop con schermo grande.
  3. Verifica che il prezzo sbarrato scompaia del tutto quando il prodotto non è in offerta. Sembra scontato, ma ho visto siti mostrare "0,00 €" sbarrato accanto al prezzo reale. Un suicidio d'immagine.
  4. Assicurati che il calcolo della percentuale sia corretto se hai deciso di mostrarla. Se il sistema arrotonda male e dice "Sconto 25%" quando è il 24,4%, qualche cliente pignolo potrebbe lamentarsi.

L'importanza del feedback degli utenti

Chiedi a qualcuno che non conosce il tuo store di fare un acquisto di prova. Non dirgli cosa guardare. Osserva se nota subito lo sconto o se deve cercarlo. Se i suoi occhi vagano troppo per la pagina prima di puntare al prezzo, significa che la tua gerarchia visiva è debole. La chiarezza batte la bellezza ogni singola volta nel mondo delle vendite online. Il design deve essere al servizio della transazione, mai il contrario.

Legislazione europea sui prezzi e le promozioni

Non possiamo dimenticare la Direttiva Omnibus dell'Unione Europea. Questa norma impone di mostrare come prezzo di confronto il prezzo più basso applicato negli ultimi 30 giorni. Se il tuo template è impostato per mostrare un prezzo di listino "gonfiato", sei fuori legge e rischi multe salatissime. Devi essere onesto. Il valore che inserisci nel campo di confronto deve essere reale e verificabile. In Italia l'Autorità Garante della Concorrenza e del Mercato è molto attenta su questo punto. Puoi consultare i dettagli normativi sul sito ufficiale del Ministero delle Imprese e del Made in Italy. Essere trasparenti non è solo etico, è una protezione per il tuo business.

Risoluzione dei problemi tecnici più frequenti

Se dopo aver seguito tutto non riesci ancora a vedere le modifiche, il colpevole potrebbe essere il JavaScript. Alcuni temi caricano i prezzi in modo asincrono per velocizzare la pagina. Questo significa che il codice HTML che vedi nel sorgente viene modificato dopo il caricamento. In questo caso, spostare le variabili Liquid non basta. Dovrai trovare il file JS che gestisce l'aggiornamento delle varianti (di solito theme.js o un file specifico per il prodotto) e cambiare l'ordine lì dentro. È un lavoro chirurgico. Un punto e virgola mancante e il carrello smette di funzionare. Se non ti senti sicuro, chiama un esperto, ma spiegagli esattamente cosa vuoi ottenere.

Spesso mi chiedono se valga la pena cambiare tema solo per questo dettaglio. La risposta è no. Focal è un ottimo punto di partenza, uno dei migliori per chi ha cataloghi visivi importanti. Il problema non è lo strumento, ma come lo si accorda. È come avere una Ferrari e non saper regolare il sedile. Una volta che hai trovato la configurazione perfetta, salvala. Crea uno snippet di backup. I temi di Shopify si aggiornano e, se non stai attento, un update automatico potrebbe cancellare tutte le tue fatiche, riportando i prezzi all'ordine originale.

Il futuro dei prezzi dinamici

Stiamo andando verso un mondo dove i prezzi cambieranno in base al comportamento dell'utente o alla disponibilità di magazzino in tempo reale. Preparare oggi la tua struttura tecnica per gestire correttamente la visualizzazione del confronto prezzi ti mette in una posizione di vantaggio. Immagina di poter offrire uno sconto lampo personalizzato a chi ha abbandonato il carrello. Se il tuo template è già ottimizzato per mostrare il risparmio in modo aggressivo ma elegante, quella conversione sarà molto più facile da recuperare.

Avere un sito veloce è importante, ma avere un sito che comunica valore è vitale. Ogni volta che un utente vede una cifra sbarrata, scatta un piccolo rilascio di dopamina. Stai offrendo un'opportunità. Non sprecarla con un layout confuso o testi troppo piccoli. Prendi il controllo del tuo codice Liquid, sistema i tuoi fogli di stile e assicurati che ogni visitatore capisca all'istante quanto è fortunato a trovarsi sul tuo store proprio in quel momento.

  • Controlla la gerarchia dei file nel tuo editor di Shopify.
  • Identifica lo snippet che genera il prezzo nella scheda prodotto.
  • Modifica l'ordine delle variabili assicurandoti di non rompere i tag Liquid.
  • Applica classi CSS specifiche per differenziare visivamente le due cifre.
  • Testa su mobile, dove lo spazio è ridotto e ogni errore raddoppia.
  • Verifica la conformità alla direttiva Omnibus per evitare grane legali.
  • Monitora il tasso di aggiunta al carrello nelle 48 ore successive alla modifica.

Non serve essere un ingegnere della NASA per vendere online, ma serve un'attenzione maniacale per i dettagli che gli altri trascurano. La maggior parte dei tuoi concorrenti userà le impostazioni standard. Tu no. Tu hai capito che il diavolo, e il profitto, sta nei dettagli della visualizzazione. Ed è proprio lì che andrai a prenderti i tuoi margini. Basta poco, un pomeriggio di lavoro e una buona dose di caffè, per trasformare una pagina prodotto mediocre in una macchina da vendita oliata e pronta a scalare il mercato. Per approfondire le dinamiche del commercio elettronico in Europa, puoi sempre fare riferimento al portale Ecommerce Europe, che offre panoramiche costanti sulle tendenze e le regolamentazioni del settore. Ora non hai più scuse: vai nel tuo pannello di controllo e metti ordine tra quei numeri. Il tuo tasso di conversione ti ringrazierà già da domani mattina.

MR

Matteo Rizzo

Con esperienza tra newsroom e progetti editoriali, Matteo Rizzo propone contenuti chiari, utili e ben documentati.