Come aggiungere uno slider prima e dopo in Shopify

Immagina di vendere un kit per lo sbiancamento dei denti, un servizio di detailing per auto o un set di preset per Lightroom. Cosa spinge un potenziale cliente a decidersi all’acquisto? Con prodotti come questi, le persone vogliono qualcosa di più delle tue promesse. Vogliono vedere i risultati.

Uno slider prima e dopo permette agli acquirenti di visualizzare esattamente ciò per cui stanno pagando. Trascina la maniglia, osserva la trasformazione e il valore si vende da solo. È uno dei modi più rapidi per costruire fiducia e distinguere il tuo prodotto in un mercato affollato.

Se vendi su Shopify, c’è un problema: i suoi temi predefiniti non includono un blocco prima e dopo già pronto all’uso. Per aggiungerne uno, hai tre opzioni: installare un’app dallo Shopify App Store, incorporare un widget gratuito senza codice o programmare uno slider personalizzato nei file del tuo tema. Questa guida illustra tutti e tre i metodi così che tu possa iniziare a trasformare i curiosi in acquirenti.

Opzione 1: installare un’estensione dallo Shopify App Store

Per la maggior parte dei commercianti, il primo istinto è aprire lo Shopify App Store e cercare “slider prima e dopo”. Troverai numerose opzioni, e la maggior parte si installa come blocco app nativo. Una volta aggiunta l’app, lo slider appare direttamente nell’editor del tuo tema come sezione o blocco che puoi inserire in una pagina prodotto. Questa comodità è il suo punto di forza.

Comporta però due costi.

Il primo è ciò che i proprietari di negozi chiamano la “tassa sulle app”. Quasi ogni app dedicata agli slider funziona con un abbonamento mensile — in genere tra 1 e 10 dollari al mese per una singola funzionalità interattiva. Uno slider qui, un conto alla rovescia là, e un anno dopo stai pagando soldi veri per funzionalità che un tempo erano add-on una tantum. 

Il secondo costo è la velocità. Le app visive per il front-end spesso iniettano il proprio JavaScript di terze parti in ogni pagina che toccano. Installane alcune e le tue pagine prodotto si caricheranno di script esterni, che possono rallentare la velocità della pagina — influenzando direttamente sia il tuo tasso di conversione che la tua SEO.

Se hai valutato questi compromessi e vuoi comunque seguire la strada dell’app nativa, ecco la configurazione:

1. Vai allo Shopify App Store, assicurandoti di aver effettuato l’accesso al tuo account Shopify. Cerca “slider prima e dopo”.

2. Seleziona un’app e fai clic su Installa per aggiungerla al tuo negozio.

3. Segui le istruzioni dell’app per configurarla. La maggior parte delle app richiede l’impostazione del pagamento prima di poterle utilizzare, quindi dovrai farlo prima di aggiungerle al tuo tema.

Opzione 2: usare un widget slider gratuito e senza codice (consigliato)

Se desideri uno slider di confronto personalizzabile e responsive senza un abbonamento mensile, la soluzione migliore è un widget incorporato gratuito. Lo Slider Prima e Dopo di Jotform è pensato esattamente per questo. Lo configuri visivamente, copi un codice di incorporamento e lo inserisci nella tua pagina Shopify. Non c’è alcuna app da installare né alcun costo ricorrente.

Poiché il widget viene caricato dai server di Jotform invece di iniettare script nel tuo tema, mantiene snello il codice del tuo negozio, il che aiuta a preservare la velocità della pagina. Puoi impostare la rivelazione orizzontale o verticale; scegliere l’interazione tramite trascinamento, clic o passaggio del mouse; aggiungere etichette e didascalie; e persino raggruppare fino a tre coppie di confronto in un carosello compatto.

Ecco come aggiungerlo:

1. Nella pagina dello Slider Prima e Dopo di Jotform, aggiungi le tue immagini prima e dopo e scrivi un’etichetta e una didascalia per ogni coppia. Jotform recupera le immagini tramite URL, quindi se le tue foto non sono ancora online, caricale prima su Shopify in Impostazioni > File e copia l’URL di ciascuna immagine. Puoi anche scegliere l’opzione di caricamento immagine se preferisci aggiungere le immagini direttamente su Jotform.

2. Personalizza la direzione di rivelazione, la posizione del divisore, i colori e le dimensioni per adattarli al tuo negozio.

3. Copia il codice di incorporamento che Jotform genera. Puoi farlo facendo clic sul pulsante Copia Codice nella scheda Pubblica.

4. Nell’editor del tuo tema Shopify, apri il modello di prodotto o pagina in cui desideri lo slider, fai clic su Aggiungi sezione (o Aggiungi blocco) e scegli Liquid personalizzato. Incolla il codice di incorporamento e poi fai clic su Salva.

Opzione 3: modificare il codice del tuo tema Shopify

Se preferisci non usare affatto un’app esterna o un incorporamento, puoi costruire uno slider di confronto direttamente nel tuo tema. È la soluzione con il massimo controllo e il minimo sovraccarico, ma è anche l’opzione più facile da rompere.

La costruzione si compone di tre parti: l’HTML per contenere le due immagini, il CSS per sovrapporle e ritagliarle, e il JavaScript per spostare il divisore mentre il visitatore trascina. Il posto più semplice dove inserire tutto questo è un singolo blocco Liquid personalizzato, così non dovrai modificare direttamente i file del tuo modello.

Ecco cosa fare:

1. Aggiungi il markup con i due URL delle tue immagini. L’immagine “prima” sta in cima e viene ritagliata; l’immagine “dopo” sta sotto.

html<div class="ba-slider" id="baSlider">  <img src="BEFORE_IMAGE_URL" alt="Before" class="ba-img ba-before" id="baBefore">  <img src="AFTER_IMAGE_URL" alt="After" class="ba-img">  <div class="ba-handle" id="baHandle"></div></div>

2. Aggiungi il CSS. Il posizionamento assoluto sovrappone le immagini, clip-path rivela metà dell’immagine “prima” all’inizio e touch-action: none impedisce alla pagina di scorrere mentre qualcuno trascina su un telefono.

html<style>  .ba-slider { position: relative; width: 100%; max-width: 600px;    aspect-ratio: 3 / 2; overflow: hidden; touch-action: none; user-select: none; }  .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  .ba-before { clip-path: inset(0 50% 0 0); }  .ba-handle { position: absolute; top: 0; left: 50%; width: 2px; height: 100%;    background: #fff; transform: translateX(-50%); cursor: ew-resize; }  .ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%;    width: 36px; height: 36px; border-radius: 50%; background: #fff;    transform: translate(-50%, -50%); box-shadow: 0 0 4px rgba(0,0,0,.4); }</style>

3. Aggiungi il JavaScript. Gli eventi puntatore coprono mouse e tocco in un unico percorso, così il cursore segue il trascinamento del mouse o lo scorrimento del dito. Salva, poi testa su un telefono reale.

Un avvertimento doveroso: questa è l’opzione che morde. Una parentesi fuori posto o uno stile che si propaga nel resto del tema può rompere il layout mobile o, peggio ancora, interferire con il flusso di checkout. Il comportamento al tocco va testato su dispositivi reali, non solo sul browser del desktop, e sei tu a doverti occupare di ogni bug e di ogni correzione futura. Se questo compromesso ti sembra peggiore di un widget, ti consigliamo l’opzione 2.

Potenzia il tuo store Shopify con widget intelligenti e senza codice

Uno slider prima e dopo vale la pena di essere aggiunto, ma raramente è l’unico elemento interattivo di cui uno store ha bisogno. Shopify si guadagna il suo posto tra i migliori costruttori di siti e-commerce anche perché è così facile da estendere, e i componenti aggiuntivi giusti sono ciò che trasforma uno store funzionale in uno curato. La trappola è pagare un abbonamento mensile separato per ognuno, dal momento che quelle spese erodono silenziosamente i margini che stai cercando di proteggere.

Ecco perché conviene optare invece per widget gratuiti e ospitati. Strumenti come lo slider prima e dopo di Jotform mantengono intatto il tuo profitto, le tue pagine veloci e i tuoi acquirenti coinvolti. E la stessa directory copre molto più delle semplici comparazioni di immagini.

Alcuni altri widget Jotform che vale la pena esplorare per uno store Shopify includono

• Un timer per il conto alla rovescia per aggiungere urgenza a una vendita lampo o al lancio di un prodotto
• Un widget FAQ per rispondere alle domande comuni sui prodotti direttamente sulla pagina
• La verifica dell’età per i prodotti soggetti a limiti di età
• Un pulsante torna in cima per rendere più facile la navigazione delle lunghe pagine prodotto

Sfoglia l’intera directory dei widget per siti web di Jotform per vedere cosa si adatta al tuo store. Inoltre, puoi collegare i tuoi moduli e i tuoi dati direttamente tramite l’integrazione Jotform-Shopify. Prova gratuitamente il tuo primo widget senza codice e configuralo in pochi minuti.