Per mostrare una tabella di sconto per quantità o volume su una pagina prodotto Shopify, aggiungi un blocco app tema da un'app di sconto nell'editor tema, oppure programmi la tabella in Liquid dentro il tuo template prodotto. La rotta del blocco app è il percorso senza codice: rilasci il blocco sotto il pulsante aggiungi al carrello e renderizza una tabella di scaglioni "compra di più, risparmi di più" senza toccare i file tema. La parte che conta veramente è cosa succede dopo che la posizioni. La tabella visualizzata deve rimanere sincronizzata con lo sconto che si attiva al checkout, e deve essere renderizzata in modo SEO-safe, senza avvolgere i prezzi in tag di intestazione che creano H1 extra e danneggiano silenziosamente i tuoi ranking. Ottieni questi due aspetti giusti e una tabella di scaglioni è uno dei componenti più vantaggiosi che puoi aggiungere a una pagina prodotto. Ottienili sbagliati e stai mostrando ai clienti prezzi che il checkout non onorerà, su una pagina la cui struttura dei titoli hai appena rovinato.
Questa guida copre perché una tabella di scaglioni visibile aumenta l'ordine medio, l'approccio fai-da-te in Liquid e le trappole di manutenzione che lo rompono, i blocchi app tema rispetto alla programmazione manuale, il vero pericolo SEO di renderizzare i prezzi come tag di intestazione, le considerazioni su Core Web Vitals, e un esempio completamente sviluppato con una tabella "quantità, prezzo ogni, risparmi" che puoi copiare.
Perché mostrare una tabella di sconto per quantità sulla pagina prodotto?
Uno sconto per quantità è uno sconto a scaglioni: compra 3 e risparmi il 10 percento, compra 6 e risparmi il 15 percento, compra 12 e risparmi il 20 percento. Lo sconto può esistere perfettamente bene senza alcuna visualizzazione sulla vetrina. Shopify lo applicherà al checkout che il cliente lo veda arrivare o meno. Questo è esattamente il problema. Uno sconto che lo shopper non può vedere è uno sconto che non può cambiare il suo comportamento.
La tabella degli scaglioni è la metà del merchandising dell'offerta. Trasforma una regola di prezzo silenzioso in un invito visibile. Un cliente che è venuto per comprare un'unità vede, in numeri chiari, che comprare tre fa scendere il prezzo per unità, e comprare sei lo fa scendere ulteriormente. Questo è uno spinta verso un carrello più grande, posizionato nel momento esatto di decisione, proprio sotto il pulsante aggiungi al carrello.
C'è una ragione comportamentale ben compresa per cui questo funziona. Una tabella di scaglioni fissa un ancoraggio e poi mostra il delta "risparmi" contro di esso. Lo shopper non sta più valutando un prezzo in isolamento; sta confrontando la sua scelta attuale con una visibilmente migliore che è una o due unità più in là. Per i prodotti consumabili, stoccabili o adatti come regali, questo confronto sposta in modo affidabile le unità. Gli acquirenti all'ingrosso e B2B si aspettano una griglia di sconti per prezzo come cosa ovvia, e la sua assenza sembra una funzionalità mancante.
Il problema è che la tabella aiuta solo se gli shopper si fidano di essa. La prima volta che un cliente vede "6 per 34 dollari l'uno" sulla pagina prodotto e poi viene addebitato 40 dollari l'uno al checkout, non hai solo perso quell'ordine. Hai insegnato loro che i tuoi prezzi non sono reali. Ecco perché la visualizzazione e il motore di sconto non possono essere due sistemi separati che capita di essere d'accordo oggi.
SEGNAPOSTO IMMAGINE (Immagine 1): Una tabella di sconto per quantità su una pagina prodotto
Suggerimento visivo: Un mockup di vetrina Shopify 16:9 pulito di una pagina prodotto. La colonna destra mostra il titolo del prodotto, il prezzo, e un pulsante aggiungi al carrello. Direttamente sotto il pulsante si trova una tabella di 4 righe con colonne "Quantità", "Prezzo ogni", e "Risparmi". La riga tre (6 a 11) è evidenziata in viola come lo scaglione attivo, con una piccola nota "Stai risparmiando il 15%". Segnaposto foto prodotto neutro a sinistra. Colori del marchio viola e accenti oro, UI piatta moderna, nessun logo reale.
Quali sono i modi per visualizzare una tabella di scaglioni su una pagina prodotto Shopify?
Ci sono tre percorsi pratici, in ordine approssimativo dal più manuale al più mantenibile.
Opzione 1: programma la tabella in Liquid
Modifichi il tuo template prodotto (o una sezione o snippet che renderizza) e scrivi il markup della tabella tu stesso. Puoi codificare i valori degli scaglioni come HTML statico, oppure leggerli da un metafield prodotto e iterarvi sopra in Liquid in modo che sia guidato dai dati. Questo ti dà il controllo totale sul markup e la stilizzazione, ed è genuinamente la risposta giusta per un negozio con uno o due prodotti e uno sviluppatore a disposizione.
Il costo è la manutenzione, ed è più alto di quanto sembri. Una tabella codificata è una seconda copia della tua tariffazione che vive nel tuo tema, disconnessa dallo sconto che effettivamente viene eseguito. Ogni volta che cambi uno scaglione, lo cambi in due posti: lo sconto e il tema. Mancane uno e la tabella mente. I commercianti nei forum di Shopify descrivono esattamente questo pattern, costruendo una tabella HTML costruita a mano per la visualizzazione degli scaglioni e poi lottando per mantenerla allineata con una regola di sconto che vive da qualche parte del tutto diversa. Funziona fino al giorno in cui silenziosamente non lo fa.
Opzione 2: una tabella Liquid guidata da metafield
Una versione più robusta fai-da-te archivia i dati degli scaglioni in un metafield prodotto e li renderizza con un ciclo Liquid, quindi la tabella è guidata dai dati piuttosto che essere codificata per prodotto. È meglio; modifichi gli scaglioni in un posto strutturato. Ma possiedi ancora il rendering, la stilizzazione responsiva, il JavaScript di aggiornamento dal vivo, e crucialmente il lavoro di mantenere i valori del metafield uguali ai valori che il tuo sconto utilizza. Niente ti obbliga a questa uguaglianza.
Opzione 3: un blocco app tema da un'app di sconto
La rotta senza codice utilizza il framework di estensione app tema di Shopify. Secondo la documentazione delle estensioni app tema di Shopify, queste estensioni "permettono ai commercianti di aggiungere facilmente elementi dinamici ai loro temi senza dover interagire con i template Liquid o il codice", e la documentazione elenca "prezzi, valutazioni" tra gli elementi dinamici per cui sono costruite. Una tabella di scaglioni è esattamente questo tipo di elemento.
L'app fornisce un blocco app. Nell'editor tema apri il tuo template prodotto, fai clic su Aggiungi blocco in una sezione, scegli il blocco tabella-scaglioni dell'app, e posizionalo ovunque desideri, tipicamente proprio sotto il pulsante aggiungi al carrello. Non modifichi mai il codice tema. La documentazione di Shopify conferma che i commercianti possono "aggiungere, rimuovere e riordinare i blocchi app a livello di sezione" direttamente nell'editor, e che i blocchi app "ereditano le proprietà di stilizzazione dal tema, come la tipografia e i colori", quindi la tabella corrisponde ai tuoi font e al design senza CSS personalizzato.
Il vantaggio strutturale importante è che un blocco app ben costruito legge i suoi valori di scaglione dalla stessa fonte di verità dello sconto, quindi la visualizzazione e la matematica del checkout non possono divergere. Questo è l'intero gioco, ed è il motivo per cui questo percorso vince per la maggior parte dei negozi.
Blocchi app e blocchi app embed: quale è la tabella degli scaglioni?
Il framework di estensione app tema di Shopify ha due tipi di blocchi, ed è utile sapere quale è quale, perché la tabella degli scaglioni è uno di loro e non l'altro.
Un blocco app usa target: section nel suo schema. È un elemento visibile e posizionato che un commerciante rilascia in un posto specifico dentro una sezione, e può puntare a fonti dinamiche come il prodotto corrente. Per la documentazione di configurazione di Shopify, i blocchi app vengono aggiunti, rimossi e riordinati nell'editor tema e possono "puntare a una fonte dinamica per mostrare dati per prodotti diversi mentre vengono visualizzati sulla pagina." Quella ultima parte è esattamente quello di cui una tabella di scaglioni ha bisogno: deve mostrare gli scaglioni per qualunque prodotto la pagina stia renderizzando. Quindi la tabella degli scaglioni è un blocco app.
Un blocco app embed usa target: head, compliance_head, o body. Shopify "renderizza e inietta i blocchi app embed prima dei tag head e body di chiusura", e sono destinati a elementi galleggianti o sovrapposti come chat bubble, badge, e tag di analisi o SEO, non per contenuti posizionati in un punto preciso del layout. I blocchi app embed sono disattivati per impostazione predefinita e i commercianti li attivano sotto Impostazioni tema, App embed. Una tabella di scaglioni non è un blocco embed, perché deve vivere in una posizione specifica nel layout del prodotto, non galleggiare sopra la pagina.
Una avvertenza che appartiene a ogni guida onesta: i blocchi app sono supportati solo nei temi Online Store 2.0, quelli che usano template JSON. La documentazione di onboarding di Shopify afferma che "i blocchi app sono supportati solo nei temi che contengono template JSON, noti anche come temi Online Store 2.0." Se sei su un tema di epoca molto precedente, il posizionamento dei blocchi drag-drop non sarà disponibile e sei tornato a un approccio Liquid o un aggiornamento del tema. La maggior parte dei negozi su un tema Shopify moderno è già su Online Store 2.0.
SEGNAPOSTO IMMAGINE (Immagine 2): Aggiunta del blocco app tabella-scaglioni nell'editor tema
Suggerimento visivo: Un mockup stile screenshot 16:9 dell'editor tema di Shopify. Il pannello sinistro mostra l'albero della sezione per un template prodotto con un'affordance "Aggiungi blocco" espansa, rivelando un'opzione di blocco "Tabella sconto per quantità" dell'app sotto un'intestazione App. Il centro mostra l'anteprima del prodotto dal vivo con la tabella degli scaglioni che appare sotto il pulsante aggiungi al carrello. Chrome admin in stile Polaris, accento viola sul blocco selezionato. Fai riferimento ai docs/screenshot-manifest.md slot volume-discounts-step-3 per catturare lo schermo reale in seguito.
Perché le tabelle degli scaglioni codificate a mano si rompono silenziosamente (la trappola della raccolta)
Ecco la modalità di guasto che genera il maggior numero di post frustrati nei forum, e non è un bug nel markup della tua tabella. È una mancata corrispondenza tra come pensi che lo sconto sia limitato e come Shopify effettivamente conta.
Diciamo che costruisci una tabella codificata a mano su una pagina prodotto sedia da pranzo: 3 a 5 sedie risparmiano il 15 percento, 6 a 9 risparmiano il 18 percento, 10 o più risparmiano il 20 percento. Lo supporti con uno sconto nativo di Shopify limitato alla tua raccolta "Sedie". La tabella sembra corretta. Poi due cose silenziosamente vanno male.
In primo luogo, gli sconti nativi limitati alla raccolta contano le unità totali in ogni prodotto della raccolta, non le unità della sola sedia sulla pagina. Quindi uno shopper può attivare il tuo scaglione "compra 3" aggiungendo uno di ogni tre sedie diverse, che non è quello che la tabella su una singola pagina della sedia implica. La tabella visualizzata è scritta dalla prospettiva di un prodotto; lo sconto sta facendo la matematica della raccolta. Descrivono offerte diverse.
In secondo luogo, l'iscrizione dello sconto cambia sotto di te. Nel momento in cui aggiungi un nuovo prodotto a quella raccolta, o nel momento in cui un prodotto esce da essa, l'insieme di articoli che contano verso la soglia cambia. I commercianti hanno segnalato esattamente questo nei forum: aggiungere un prodotto a una raccolta cambia silenziosamente la logica dello sconto, e niente ti avverte. La tua tabella codificata a mano mostra ancora gli scaglioni vecchi. Sta ora descrivendo uno sconto che non esiste più nella forma che il cliente vede.
Questa è la ragione centrale per cui una tabella di scaglioni non dovrebbe essere un artefatto statico che mantenere a mano. La tabella è una visualizzazione di uno sconto. Se lo sconto può cambiare ambito o iscrizione senza toccare la tabella, i due divergeranno, e la divergenza è invisibile fino a quando un cliente o il tuo stesso ordine di prova la scopre. La soluzione è strutturale: visualizza gli scaglioni per prodotto dalla stessa definizione che lo sconto utilizza, e conta il modo in cui la tabella sostiene di contare, per prodotto e le sue varianti, non raggruppate in un'intera raccolta. Questo è il modello di conteggio coperto in sconti di volume per prodotto, ed è la differenza tra una tabella che è sempre vera e una che è vera fino a martedì.
La trappola SEO: non renderizzare mai i prezzi come tag di intestazione
Questo è un vero, documentato pericolo, e viene direttamente dalle recensioni delle app. Un commerciante ha segnalato che un'app di sconto popolare renderizzava i prezzi della pagina dentro tag di intestazione, che creava elementi H1 multipli in competizione su ogni pagina prodotto, e il supporto ha rifiutato di risolverlo. Non è un reclamo cosmetico. È una regressione SEO cotta nel widget.
Ecco perché conta. I motori di ricerca usano la tua gerarchia dei titoli per capire una pagina. L'H1 dovrebbe essere l'unico titolo principale della pagina, quasi sempre il nome del prodotto. Il resto dei titoli, H2 e H3, descrivono la struttura sotto di esso. Quando un widget di sconto avvolge "6 per 34 dollari" in un o perché era un modo pigro per far sembrare il numero grande e grassetto, inietta titoli che non significano nulla semanticamente e indeboliscono quelli che lo fanno. H1 multipli su una pagina offuscano il segnale su ciò di cui la pagina sta effettivamente parlando. I prezzi e le figure "risparmi" sono dati, non struttura del documento. Appartengono a celle di tabella, span, o paragrafi stilizzati con CSS, mai in elementi di intestazione.
Il modo corretto per renderizzare una tabella di scaglioni è noiosamente corretto HTML: un vero Se stai valutando un'app di sconto, questa è una cosa concreta da verificare prima di installare. Vedi il sorgente su una pagina prodotto demo, o eseguilo attraverso l'ispettore di accessibilità o SEO del tuo browser, e conferma che il widget non aggiunge elementi di intestazione. È un test di cinque minuti che ti salva da un declino di ranking lento e difficile da diagnosticare. Promuovere l'assenza di questo problema è gioco giusto, perché così tanti widget lo sbagliano. Una tabella di scaglioni della pagina prodotto è piccola, ma viene renderizzata sulle tue pagine con il più alto intento e traffico più alto, quindi il suo costo di performance si compone. Due metriche Core Web Vitals sono quelle da guardare. Cumulative Layout Shift (CLS) è il primo. Una tabella che salta un momento dopo che il resto della pagina è stata renderizzata sposta il pulsante aggiungi al carrello verso il basso e accumula cambio di layout. La soluzione è renderizzare la tabella lato server nell'HTML iniziale ovunque possibile, quindi lo spazio è riservato dal primo rendering, piuttosto che iniettarlo tardi con JavaScript dopo che la pagina si stabilizza. I valori di una tabella di scaglioni sono noti al momento del rendering; non c'è motivo per cui debba arrivare per ultimo. Largest Contentful Paint (LCP) e il budget di peso generale sono il secondo. Un widget che carica un bundle JavaScript pesante, il suo proprio web font, o un pezzo di codice del framework per disegnare quello che è fondamentalmente una piccola tabella sta spendendo il tuo budget di velocità in modo incurante. Il framework di estensione app tema di Shopify aiuta qui: quando un blocco app è presente su una pagina, il suo foglio di stile e script vengono caricati una volta attraverso i tag del framework stesso, e se un commerciante aggiunge più blocchi che fanno riferimento allo stesso file, Shopify include quel file solo una volta per pagina. Una buona tabella di scaglioni si affida a questo, fornisce CSS e JS minimi, e fa il lavoro pesante lato server. Il comportamento di aggiornamento dal vivo merita una nota anche. Una bella tabella di scaglioni evidenzia lo scaglione attivo mentre lo shopper cambia la quantità, senza ricaricare la pagina. Quella interazione è economica quando è poche righe di JavaScript vanilla che alternano una classe, e costosa quando è un re-render del framework. Mantienila leggera. Il punto della tabella è vendere più unità, e una pagina che è lenta da interagire vende meno. Costruiamo un concreto. Un marchio di integratori vende una vasca di proteine a 40 dollari. Vogliono ricompensare l'accumulo della stessa vasca, contato per prodotto attraverso i suoi sapori, con questi scaglioni: La tabella sulla pagina prodotto, posizionata direttamente sotto il pulsante aggiungi al carrello, si legge così. La colonna "risparmi" è quello che fa la persuasione. Uno shopper che aggiunge 6 vasche vede la riga "6 a 11" evidenziata come il suo scaglione attivo, a 34 dollari ogni uno, risparmiando 48 dollari rispetto all'acquisto di sei al prezzo pieno. La riga sopra e sotto rimangono visibili, quindi il prossimo scaglione ("solo sei in più e scende a 32 ogni") è sempre in vista. Questo passo visibile successivo è il meccanismo. È lo stesso motivo per cui le griglie di prezzi all'ingrosso sono sempre state stampate come griglie. Le due regole dal resto di questa guida si applicano entrambe a questa tabella esatta. Innanzitutto, i valori nella colonna "prezzo ogni" devono essere i valori che lo sconto effettivamente addebita, contati per prodotto attraverso le varianti di sapore della vasca, non raggruppati con prodotti non correlati. In secondo luogo, nessuna di queste celle può essere un tag di intestazione. I 34 dollari sono una cella di tabella stilizzata per sembrare prominente, non un Ecco la sequenza affidabile per la rotta del blocco app, che è quella che la maggior parte dei negozi dovrebbe usare. I blocchi app richiedono un tema con template JSON. Se sei su un tema Shopify attuale, quasi certamente sei idoneo. Se sei su un tema di epoca precedente, pianifica un aggiornamento del tema prima, o usa un approccio Liquid nel frattempo. Imposta i tuoi salti di quantità nello sconto stesso: i punti di interruzione, i prezzi per unità o le percentuali, e la modalità di conteggio (conta le varianti di questo prodotto insieme, non l'intera raccolta). Questa è l'unica fonte di verità. Tutto quello che il cliente vede dovrebbe derivare da qui. Apri il tuo template prodotto nell'editor tema, scegli Aggiungi blocco dentro la sezione informazioni prodotto, e seleziona il blocco tabella-scaglioni dell'app. Trascinalo direttamente sotto il pulsante aggiungi al carrello. Poiché i blocchi app ereditano la tipografia e i colori del tema, dovrebbe corrispondere al tuo design immediatamente; regola solo la spaziatura o l'allineamento se il blocco espone quelle impostazioni. Aggiungi il prodotto a un carrello di test reale a una quantità che supera un confine di scaglione, ad esempio 6 unità, e conferma che il prezzo che la tabella ha mostrato è il prezzo al checkout, incluso attraverso un checkout accelerato come Shop Pay. Questo è il passo che cattura la divergenza prima che i clienti lo facciano. Vedi il sorgente della pagina prodotto e conferma che il widget non ha aggiunto tag di intestazione e non ha spostato il pulsante aggiungi al carrello mentre caricava. Un rapido passaggio in un ispettore SEO o di accessibilità conferma un H1, il titolo del prodotto, con la tabella degli scaglioni che vive in una tabella o elenco, non in titoli. Se il tuo sconto è limitato, aggiungi e rimuovi un prodotto dalla raccolta o dal gruppo rilevante e verifica nuovamente che la tabella degli scaglioni sul tuo prodotto target mostra ancora gli scaglioni che intendi. È qui che le tabelle mantenute a mano falliscono; un'offerta correttamente limitata per prodotto non lo fa. Se preferisci non mantenere una tabella codificata a mano che diverge dal tuo sconto, o verificare l'HTML di un widget per tag di intestazione vaganti, questo è lo specifico problema Stackable è stato costruito per gestire, onestamente e dentro le regole reali di Shopify. Installa Stackable gratuitamente e vedi la tabella della pagina prodotto e il totale del checkout concordare al centesimo a usestackable.com/pricing. Trovi le risposte alle domande più comuni Aggiungi un blocco app tema da un'app di sconto nell'editor tema, posizionandolo sotto il pulsante aggiungi al carrello, oppure programma la tabella in Liquid dentro il tuo template prodotto. La rotta del blocco app non richiede codice e, in un'app ben costruita, legge gli stessi valori di scaglione che il checkout utilizza. Il requisito essenziale in entrambi i casi è che i prezzi visualizzati corrispondano a ciò che checkout addebita e che la tabella non utilizzi tag di intestazione. Sì, se il tuo tema è Online Store 2.0 e utilizzi un'app di sconto che fornisce un blocco app tema. L'editor tema di Shopify ti permette di aggiungere, rimuovere e riordinare i blocchi app visivamente, senza alcun codice tema. Programmare una tabella in Liquid richiede familiarità con lo sviluppo, e aggiunge manutenzione continua perché la tabella è separata dallo sconto e deve essere mantenuta sincronizzata manualmente. Solo se è costruita male. Il vero pericolo è un widget che renderizza i prezzi dentro tag di intestazione, che crea elementi H1 o H2 extra e indebolisce la struttura dei titoli della tua pagina. Una tabella costruita correttamente mette i prezzi in celle di tabella o span stilizzati con CSS, mantenendo un singolo H1 (il titolo del tuo prodotto). Controlla qualsiasi app vedendo il sorgente su una pagina demo e confermando che non aggiunge elementi di intestazione. The team building Stackable, the reliability-first bulk and volume discount app for Shopify. We write about discount stacking, Shopify Functions, and how to run promotions that hold up at checkout. 13 min read 12 min read 9 min read Utilizziamo cookie essenziali per il funzionamento del sito e, solo con il Suo consenso, cookie di analisi per comprendere il traffico. Legga la nostra Informativa sui Cookie. (o un elenco stilizzato) le cui celle contengono le quantità e i prezzi, con peso visivo applicato attraverso CSS, non attraverso tag di intestazione. I numeri possono sembrare grandi e grassetti come il tuo designer desidera. Devono solo non pretendere di essere titoli di pagina. La documentazione di Shopify per i widget sulla vetrina nel framework di estensione app tema punta nella stessa direzione, e internamente la regola che manteniamo è semplice: i widget sulla vetrina devono essere SEO-safe, senza tag di intestazione iniettati e senza cambio di layout.
Core Web Vitals: una tabella di scaglioni non dovrebbe costarti velocità
Esempio elaborato: una tabella "quantità, prezzo ogni, risparmi"
. Segui queste due regole e questa tabella è sicura da spedire su ogni pagina prodotto nel catalogo.Come configurarlo, passo dopo passo
1. Conferma che il tuo tema sia Online Store 2.0
2. Definisci gli scaglioni una volta, nello sconto
3. Aggiungi il blocco app tabella-scaglioni nell'editor tema
4. Verifica che la visualizzazione corrisponda alla matematica del checkout
5. Controlla la struttura dei titoli e la stabilità del layout
6. Testa il caso limite della raccolta
SEGNAPOSTO IMMAGINE (Immagine 3): La visualizzazione e il checkout concordano
Suggerimento visivo: Un'illustrazione divisa 16:9. Il pannello sinistro etichettato "Pagina prodotto" mostra la tabella degli scaglioni con la riga di 6 unità evidenziata a $34.00 ogni uno. Il pannello destro etichettato "Checkout" mostra le stesse 6 unità addebitate a $34.00 ogni uno con un badge di spunta verde che legge "Stesso prezzo." Un'unica icona di catena ininterrotta collega i due pannelli. Sotto, una striscia didascalia legge "Una fonte di verità: la visualizzazione è uguale al checkout." Colori del marchio viola e oro, vettore piatto, nessuna fotografia.
Esegui questo in modo affidabile con Stackable
La linea di fondo
Articoli correlati
Domande Frequenti
Stackable Team
Related Posts
Acquista uno, sconta il secondo del 50% su Shopify: il trucco 'non sconto le prime N quantità' e i suoi limiti
Il limite di 100 prodotti di Shopify su Buy X Get Y: come eseguire 3-for-2 su tutto il catalogo
Shopify Ora Ti Permette di Sovrapporre Più Sconti sui Prodotti sullo Stesso Articolo (2026): Cosa è Cambiato e Come Configurarli