Widget del negozio online

Tre blocchi disegnano le tue offerte a livelli nella pagina prodotto: la Quantity Break Table, il Quantity Break Picker e la tabella Spend More Save More. Li collochi una volta nel tuo tema; da lì in poi seguono lo sconto, mostrandone i livelli e nascondendosi quando l’offerta finisce.

Configurazione

Attiva Show on storefront nello sconto.

Apri lo sconto — uno sconto per quantità, uno spendi di più, risparmia di più o un listino prezzi — e attiva Show on storefront. È attivo per impostazione predefinita in un nuovo sconto per quantità e in un nuovo sconto spendi di più, risparmia di più. La riga di stato della scheda ti dice esattamente che cosa riceveranno gli acquirenti, oppure perché il widget resta nascosto.
Fai clic su Add accanto al blocco che vuoi.

Il pannello Add to your theme in fondo a quella scheda nomina ogni blocco esattamente come lo nomina l’editor dei temi, con una riga su che cos’è e un pulsante Add che apre il tuo editor dei temi con il blocco pronto da collocare.
Colloca il blocco nell’editor dei temi e salva.

Trascina il blocco dove deve stare nella pagina prodotto — di solito vicino al prezzo o al pulsante di acquisto — e fai clic su Save.
Regola le impostazioni del blocco nell’editor dei temi.

Ogni etichetta, colore e comportamento qui sotto è un’impostazione dell’editor dei temi sul blocco stesso.

Quantity Break Table

Elenca tutti i livelli di un’offerta di sconto per quantità come tabella nella pagina prodotto: la quantità, quello che riceve l’acquirente e il prezzo.

General

Border color — il bordo della tabella. Predefinito #d9d9d9.
Roundness — raggio degli angoli, 0–24 px. Predefinito 8.
Borderless — disattivato per impostazione predefinita. Attivo, il bordo viene tolto.

Header background — vuoto usa il valore predefinito del design.
Header text — il colore del testo dell’intestazione.

Body

Cell padding — 4–32 px. Predefinito 14.
Body background
Body text
Highlight unlocked tier — attivo per impostazione predefinita. Evidenzia la riga che corrisponde alla quantità selezionata.
Highlight color — predefinito #e8f5e9.

Columns

Display quantities as range — disattivato per impostazione predefinita. Attivo, mostra “2–4” invece di “2+”.
Quantity label template — per esempio Buy {quantity}+; {quantity} viene sostituito automaticamente. Vuoto mantiene “2+”. Gli intervalli non ne risentono.
Quantity label — predefinito “Buy”.
Show savings column — attivo per impostazione predefinita. Mostrato sempre nelle offerte con sconto per importo.
Savings label — predefinito “Get”.
Off-each label — predefinito “off each”. Usato nelle offerte percentuali.
Amount-off label — predefinito “off”. Usato nelle offerte con sconto per importo; l’importo è il totale degli articoli che soddisfano i requisiti, quindi il valore predefinito parla del totale, mai del singolo articolo.
Fixed-price label — predefinito “each”. Usato nelle offerte a prezzo fisso.
Show prices column — attivo per impostazione predefinita. Si nasconde automaticamente nelle offerte con sconto per importo e nei prodotti con più di 50 varianti.
Price label — predefinito “Price”.
Show original price — attivo per impostazione predefinita. Barra il prezzo pieno accanto a ogni prezzo scontato.
Show base row — attivo per impostazione predefinita. Aggiunge una riga a prezzo pieno per le quantità sotto il primo livello.

Message

Code hint prefix — predefinito “Use code”. Mostrato solo negli sconti con codice.
Linked message — testo facoltativo mostrato sopra o sotto la tabella.
Message position — Above o Below. Predefinito Below.

Quantity Break Picker

La stessa offerta sotto forma di schede offerta toccabili tra cui l’acquirente sceglie e che aggiunge al carrello in un colpo solo.

General

Heading — predefinito “Choose your bundle”.
Card border — predefinito #d9d9d9.
Selected accent — colore del bordo e del pulsante di opzione della scheda selezionata.
Roundness — 0–24 px. Predefinito 8.
Card padding — 4–32 px. Predefinito 14.
Card background
Card text

Cards

Show single-item card — attivo per impostazione predefinita. Aggiunge una scheda “Buy 1” sopra i livelli.
Single-item label — predefinito “Buy 1”.
Pre-selected tier — 0–10. Predefinito 0, che mantiene la selezione predefinita. Conta solo i livelli che si mostrano davvero, quindi un livello nascosto non viene mai preselezionato.
Tier label — predefinito Buy {quantity}; {quantity} viene sostituito automaticamente.
Off-each label — predefinito “off each”. Usato nelle offerte percentuali.
Amount-off label — predefinito “off”. Usato nelle offerte con sconto per importo, come cifra totale.
Fixed-price label — predefinito “each”. Usato nelle offerte a prezzo fisso (prezzo per articolo).
Per-product suffix — predefinito “of the same product”. Mostrato quando l’offerta conta per prodotto.
Per-variant suffix — predefinito “of the same variant”. Mostrato quando l’offerta conta per variante.
Show unit prices — attivo per impostazione predefinita. Si nasconde automaticamente nelle offerte con sconto per importo e nei prodotti con più di 50 varianti.
Show original price — attivo per impostazione predefinita. Barra il prezzo pieno sopra ogni prezzo scontato.
Each label — predefinito “each”.
Most popular tier — 0–10. Predefinito 0 = nessuna etichetta; 1 = il primo livello.
Most popular text — predefinito “Most popular”.
Most popular background — predefinito #1a1a1a.
Most popular text color — predefinito #ffffff.

Button

Button text — predefinito “Add to cart”.
Added text — predefinito “Added!”.
Unavailable text — predefinito “Unavailable”.
After adding to cart — Go to the cart page (il valore predefinito), Refresh the page (così il tema mostra il nuovo conteggio del carrello) o Stay on this page (mostra una conferma con un link al carrello).
In-cart text — predefinito {count} in cart. Mostrato dopo l’aggiunta se si resta nella pagina; {count} è quanti degli articoli aggiunti sono nel carrello.
Cart link text — predefinito “View cart”.
Button background — predefinito #1a1a1a.
Button text color — predefinito #ffffff.

Message

Code hint prefix — predefinito “Use code”. Mostrato solo negli sconti con codice.
Linked message — testo facoltativo mostrato sopra o sotto le schede.

Bundle composer

Let shoppers mix variants per tier — disattivato per impostazione predefinita. Attivo, il livello selezionato mostra una riga per articolo così gli acquirenti compongono il bundle. Non viene mostrato nelle offerte per variante.
Bundle button text — predefinito “Add bundle”.
Items word — predefinito “items”. Usato quando non si può mostrare un totale in denaro: “Add bundle • 3 items”.
Unresolved text — predefinito “Choose options”.
Message position — Above o Below. Predefinito Below.

Spend More Save More

Elenca tutti i livelli di spesa di un’offerta spendi di più, risparmia di più nella pagina prodotto: spendi questa cifra, ottieni questo sconto.

General

Border color — predefinito #d9d9d9.
Roundness — 0–24 px. Predefinito 8.
Borderless — disattivato per impostazione predefinita.

Header

Header background — vuoto usa il valore predefinito del design.
Header text

Body

Cell padding — 4–32 px. Predefinito 14.
Body background
Body text
Highlight unlocked tier — attivo per impostazione predefinita. Evidenzia il livello più alto che il carrello ha raggiunto.
Highlight color — predefinito #e8f5e9.

Columns

Spend label — predefinito “Spend”.
Savings label — predefinito “Get”.
Off-the-order label — predefinito “off the order”.
Off eligible items label — predefinito “off eligible items”. Usato al posto dell’etichetta off-the-order quando lo sconto esclude alcuni articoli.

Message

Code hint prefix — predefinito “Use code”. Mostrato solo negli sconti con codice.
Linked message — testo facoltativo mostrato sopra o sotto la tabella.
Message position — Above o Below. Predefinito Below.

Selettori di tema personalizzati

I Sale Badge e i Price Drop trovano il loro posto nel tuo tema automaticamente. In un tema dove questo non funziona, Theme selectors nella pagina Promotions apre una finestra con tre selettori CSS facoltativi che puntano l’app sugli elementi del tuo tema:

Badge container in product cards — l’elemento dentro ogni scheda prodotto a cui i badge si agganciano. Una sola voce copre tutte le pagine che mostrano schede prodotto.
Price element on the product page — l’elemento che contiene il prezzo in una pagina prodotto, dove si mostra il prezzo scontato.
Price element in product cards — l’elemento che contiene il prezzo dentro ogni scheda prodotto.

Lascia un campo vuoto per mantenere la collocazione automatica. Ogni selettore ha al massimo 200 caratteri e deve essere un selettore CSS valido — il campo lo segnala se non lo è. Un selettore che non corrisponde a nulla torna alla collocazione automatica, e un selettore che non contiene un prezzo non disegna nulla invece di barrare un numero sbagliato.

Come lo vede l’acquirente

Ogni blocco si mostra nella pagina prodotto nel punto in cui l’hai collocato, con i livelli reali dell’offerta. Il picker aggiunge anche al carrello. Quando l’offerta non copre il prodotto che l’acquirente ha davanti, oppure l’offerta è in pausa o è finita, il blocco non mostra nulla invece di una promessa scaduta.

Limiti e note

Un widget per prodotto. Quando due offerte con la visualizzazione attiva coprono lo stesso prodotto, lì si mostra un solo widget. La scheda Show on storefront dello sconto le conta e offre Choose which one shows. Ogni sconto continua comunque ad applicarsi alle proprie condizioni.
I prezzi si nascondono oltre le 50 varianti. La colonna dei prezzi e i prezzi unitari del picker si nascondono automaticamente nelle offerte con sconto per importo e nei prodotti con più di 50 varianti.
Mettere in pausa l’offerta nasconde il widget — la scheda dice allora “Not shown (offer paused)” e non offre più l’interruttore, così un’offerta in pausa non può mai sembrare attiva.
L’interruttore di visualizzazione riguarda solo la visualizzazione. Disattivare Show on storefront nasconde il widget; lo sconto continua ad applicarsi. Per fermare lo sconto, metti in pausa l’offerta.
I selettori di tema valgono per l’intero negozio, non per la singola promozione: salvarli cambia la collocazione di ogni Sale Badge e di ogni Price Drop del negozio.

Correlati

Barra obiettivo del carrello — il quarto blocco, che mostra il progresso verso il livello di spesa successivo.
Sconto per quantità — lo sconto dietro la tabella e il picker.
Spendi di più, risparmia di più — lo sconto dietro la tabella di spesa.
Listino prezzi — l’altro sconto che alimenta la tabella dei livelli.
App embed — serve per i badge e i Price Drop, non per questi blocchi.