Badge di sconto, avviso “ultimi pezzi”, quanto manca alla spedizione gratuita. Sono piccole cose che aiutano il cliente a decidere, e per molte di queste si installa un’app. Spesso però bastano dieci righe di codice: uno snippet Liquid Shopify, senza script esterni e senza abbonamenti.
In breve: uno snippet è un file della cartella snippets/ del tema con un pezzo di Liquid riutilizzabile. Lo crei una volta e lo richiami dove serve con {% render 'nome' %}, passando i dati come parametri. Qui trovi otto snippet per la pagina prodotto, con il codice spiegato e i punti a cui fare attenzione.
Non ti prometto più vendite: nessuno snippet lo garantisce. Ti prometto codice pulito, che usa solo oggetti e filtri documentati da Shopify, e che non rallenta il negozio. Se Liquid è nuovo per te, tieni a portata di mano la guida pratica a Liquid.
Come usare questi snippet
Il procedimento è lo stesso per tutti e otto:
- duplica il tema e lavora sulla copia (se non l’hai mai fatto, ti spiego come in come modificare il codice del tema Shopify);
- in Modifica codice, nella cartella
snippets, crea il file con il nome indicato, per esempiobadge-sconto.liquid; - incolla il codice e salva;
- richiamalo con
{% render %}nel punto giusto della sezione prodotto (in Dawn èsections/main-product.liquid) oppure in un blocco “Liquid personalizzato” dall’editor, se il tuo tema lo prevede.
Uno snippet non vede le variabili di chi lo richiama: tutto quello che gli serve va passato come parametro, come spiega la pagina del tag render. Per questo negli esempi passo sempre variant o product.
I testi sono scritti in italiano dentro il codice, per renderli leggibili. In un negozio con più lingue vanno spostati nei file di traduzione e letti con il filtro t: ne parlo nelle domande frequenti.
1. Percentuale di sconto
Mostra “-20%” quando la variante ha un prezzo di confronto (il prezzo barrato) più alto del prezzo di vendita. Il calcolo lo fa Liquid, così non devi aggiornare a mano nessuna etichetta.
snippets/badge-sconto.liquid
{%- assign pieno = variant.compare_at_price -%}
{%- if pieno > variant.price -%}
{%- assign risparmio = pieno | minus: variant.price -%}
{%- assign perc = risparmio | times: 100.0 | divided_by: pieno | round -%}
<span class="badge-sconto">-{{ perc }}%</span>
{%- endif -%}Lo richiami così: {% render 'badge-sconto', variant: product.selected_or_first_available_variant %}.
Riga per riga: prendo il prezzo pieno; se è più alto del prezzo di vendita calcolo il risparmio; poi la percentuale. Il 100.0 con il punto non è un vezzo: in Liquid una divisione tra numeri interi dà un intero, e senza decimali molti sconti diventerebbero 0. Il filtro round arrotonda all’intero più vicino. Se il prodotto non ha prezzo di confronto, la condizione è falsa e non compare niente.
Attenzione: il prezzo barrato deve essere un prezzo vero, praticato prima dello sconto. Lo snippet mostra quello che inserisci nell’admin: la correttezza del dato è responsabilità di chi vende.
2. Disponibilità e ultimi pezzi
Un avviso “ultimi 3 pezzi” è utile solo se è vero. Per questo lo snippet compare solo quando Shopify traccia davvero le scorte di quella variante e non permette di vendere oltre la disponibilità.
snippets/ultimi-pezzi.liquid
{%- assign soglia = soglia | default: 5 -%}
{%- if variant.inventory_management == 'shopify' and variant.inventory_policy == 'deny' -%}
{%- assign q = variant.inventory_quantity -%}
{%- if q > 0 and q <= soglia -%}
<p class="ultimi-pezzi">
{%- if q == 1 -%}
Ultimo pezzo disponibile
{%- else -%}
Ultimi {{ q }} pezzi disponibili
{%- endif -%}
</p>
{%- endif -%}
{%- endif -%}Lo richiami con {% render 'ultimi-pezzi', variant: product.selected_or_first_available_variant, soglia: 3 %}. Se non passi soglia, vale 5.
I due controlli della seconda riga sono il punto chiave. Secondo la documentazione dell’oggetto variant, se le scorte non sono tracciate inventory_quantity non è la disponibilità reale; e se la variante si vende anche quando è esaurita (inventory_policy uguale a continue), un avviso “ultimi pezzi” sarebbe fuorviante. Anche Dawn, nel suo blocco delle scorte, mostra questi messaggi solo quando l’inventario è gestito da Shopify.
3. Quanto manca alla spedizione gratuita
Se offri la spedizione gratuita sopra una certa cifra, dirlo al cliente nel momento giusto è un incentivo onesto. Questo snippet va nel carrello, che è il posto dove il totale è aggiornato.
snippets/soglia-spedizione.liquid
{%- assign soglia = soglia | default: 5000 -%}
{%- if cart.item_count > 0 and cart.currency.iso_code == shop.currency -%}
{%- assign mancano = soglia | minus: cart.total_price -%}
{%- if mancano > 0 -%}
<p class="soglia">Mancano {{ mancano | money }} alla spedizione gratuita.</p>
{%- else -%}
<p class="soglia">La spedizione per questo ordine è gratuita.</p>
{%- endif -%}
{%- endif -%}Lo richiami con {% render 'soglia-spedizione', soglia: 5000 %}: la soglia è in centesimi, quindi 5000 vuol dire 50,00 €. cart.total_price è il totale dopo gli sconti, sempre in centesimi, come indica la pagina dell’oggetto cart.
Il controllo sulla valuta serve ai negozi con più mercati: il totale del carrello è nella valuta del cliente, la soglia scritta nel codice è nella valuta del negozio. Se non coincidono, lo snippet resta in silenzio invece di mostrare un calcolo sbagliato. Due verifiche prima di pubblicare: la soglia deve essere identica a quella della tariffa impostata in Impostazioni > Spedizione e consegna, e va provata con un ordine di test con uno sconto applicato.
Nel carrello a comparsa il messaggio si aggiorna solo se il tema ricarica quella parte quando aggiungi un prodotto: controllalo sul tuo tema prima di metterlo lì.
4. Prezzo per unità
Per prodotti venduti a peso o a volume (caffè, olio, detersivi) può servire il prezzo al chilo o al litro. Shopify lo gestisce già: nella scheda della variante imposti la quantità totale e l’unità di riferimento. Tutti i temi Online Store 2.0 lo mostrano vicino al prezzo, come indica la guida di Shopify sui prezzi unitari.
Lo snippet serve quando vuoi mostrarlo in un altro punto, per esempio nelle schede prodotto delle collezioni, o su un tema vecchio che non lo prevede:
snippets/prezzo-unitario.liquid
{%- if variant.unit_price_measurement -%}
<small class="prezzo-unitario">
{{ variant.unit_price | unit_price_with_measurement: variant.unit_price_measurement }}
</small>
{%- endif -%}Il filtro unit_price_with_measurement formatta prezzo e unità insieme (per esempio “12,00 €/kg”). È lo stesso filtro che usa oggi Dawn nel suo snippet del prezzo unitario.
5-8. Altri quattro snippet veloci
Etichetta “nuovo”
Mostra “Nuovo” sui prodotti pubblicati negli ultimi 30 giorni, senza dover ricordare di togliere l’etichetta a mano.
snippets/badge-nuovo.liquid
{%- assign giorni = giorni | default: 30 -%}
{%- assign adesso = 'now' | date: '%s' | plus: 0 -%}
{%- assign pubblicato = product.published_at | date: '%s' | plus: 0 -%}
{%- assign eta = adesso | minus: pubblicato | divided_by: 86400 -%}
{%- if eta < giorni -%}
<span class="badge-nuovo">Nuovo</span>
{%- endif -%}Trasformo le due date in secondi (date: '%s', poi plus: 0 per avere un numero), le sottraggo e divido per 86.400, i secondi di un giorno. Un limite da sapere: 'now' è il momento in cui la pagina è stata generata, e Shopify può servire per un po’ una versione già pronta. L’etichetta può quindi sparire con qualche ora di ritardo, come avverte la pagina del filtro date.
Variante esaurita
Quando il cliente sceglie una taglia o un colore esaurito, il pulsante di solito diventa grigio e basta. Una frase chiara evita il dubbio “è rotto il sito?”.
snippets/variante-esaurita.liquid
{%- unless variant.available -%}
<p class="variante-esaurita">Questa combinazione è esaurita: prova un’altra taglia o un altro colore.</p>
{%- endunless -%}Nei temi moderni il cambio di variante aggiorna solo alcune parti della pagina. Metti lo snippet vicino al prezzo o al pulsante, che il tema ricarica sempre, e prova a cambiare variante prima di pubblicare.
Torna alla collezione
Un link “Torna a Scarpe donna” aiuta chi arriva da una collezione a continuare a guardare, senza usare il tasto indietro.
snippets/torna-collezione.liquid
{%- if collection -%}
{%- assign c = collection -%}
{%- else -%}
{%- assign c = product.collections.first -%}
{%- endif -%}
{%- if c -%}
<a class="torna-collezione" href="{{ c.url }}">Torna a {{ c.title | escape }}</a>
{%- endif -%}Lo richiami con {% render 'torna-collezione', product: product, collection: collection %}. L’oggetto collection nella pagina prodotto esiste solo se il cliente è arrivato da un indirizzo del tipo /collections/…/products/…; altrimenti uso la prima collezione a cui appartiene il prodotto.
Testo spedizione dalle impostazioni
Una riga sotto il prezzo, tipo “Spediamo dal lunedì al venerdì”, modificabile dall’editor senza toccare il codice. Prima aggiungi un gruppo di impostazioni in fondo all’elenco di config/settings_schema.json (attenzione alla virgola prima della graffa):
config/settings_schema.json (gruppo da aggiungere)
{
"name": "Spedizione",
"settings": [
{
"type": "text",
"id": "testo_spedizione",
"label": "Testo sulla spedizione nella pagina prodotto",
"info": "Lascia vuoto per non mostrarlo."
}
]
}Poi lo snippet, che stampa il testo solo se è stato compilato:
snippets/testo-spedizione.liquid
{%- if settings.testo_spedizione != blank -%}
<p class="testo-spedizione">{{ settings.testo_spedizione | escape }}</p>
{%- endif -%}Non calcolo una data di consegna: festivi, orari del corriere e destinazioni la rendono una promessa difficile da mantenere. Un testo scritto da te, che puoi cambiare in un minuto, è più onesto. Se il testo deve cambiare da prodotto a prodotto, la strada giusta sono i metafield di Shopify.
Prima di pubblicare: tre controlli
Ogni snippet, prima di andare online, passa questi tre controlli:
- Tutti i casi: prova un prodotto in sconto e uno no, uno con le scorte tracciate e uno senza, una variante esaurita, un carrello vuoto. Lo snippet deve comparire solo quando ha senso.
- Lingue e valute: se il negozio vende in più mercati, controlla che i testi siano tradotti e che le cifre siano nella valuta giusta, oppure che lo snippet resti nascosto.
- Velocità e ordine: questi snippet non caricano script esterni, ed è il loro vantaggio rispetto a molte app. Tieni comunque un elenco di cosa hai aggiunto e dove, per il prossimo aggiornamento del tema. Il resto del lavoro sulla velocità lo racconto in come velocizzare un negozio Shopify.
Questi dettagli funzionano meglio dentro una strategia: offerte chiare, spedizioni comprensibili, schede complete. Ne parlo nelle strategie di marketing per vendere di più su Shopify e in come trasformare le visite del sito in contatti e vendite.
Domande frequenti
Conclusione
Otto snippet, nessuna app: percentuale di sconto, ultimi pezzi, spedizione gratuita, prezzo unitario, etichetta nuovo, variante esaurita, ritorno alla collezione e testo sulla spedizione. Ognuno fa una cosa sola, solo quando il dato è vero.
Se preferisci non mettere le mani nel tema, li installo e li adatto io nell’assistenza e manutenzione del negozio online; per progetti più ampi c’è la realizzazione e migrazione Shopify.
Vuoi uno di questi snippet adattato al tuo tema? Scrivimi quale: te lo installo io, con una copia di sicurezza del tema. Ti rispondo io.
