Vai al contenuto
← GraphicMeat Smart Cart

App dello store · Guida alla configurazione

Guida alla configurazione di GraphicMeat Smart Cart

16 scenari, ciascuno diviso tra ciò che imposti nell'app e ciò che imposti nell'editor del tema, con le etichette che vedrai davvero. Leggi quello che ti serve; niente qui presuppone che tu abbia letto gli altri.

Aggiornato il 23 agosto 202616 scenari

Smart Cart si configura in due posti: i livelli di premio e le regole di upsell stanno nell'app dentro il tuo Shopify admin (il backend); il drawer stesso, i suoi testi, la barra degli annunci, la selezione degli upsell e il countdown sono impostazioni dell'app embed del tema (il frontend). Ogni scenario qui sotto è diviso in questo modo, con le etichette esatte.

Come leggerla. Ogni scenario ha due colonne. Backend è l'app dentro il tuo Shopify admin; frontend è l'editor del tema e ciò che il cliente vede nel negozio. Le etichette in grassetto sono quelle esatte a schermo. Una colonna frontend vuota significa che al negozio non serve nulla oltre all'app embed, che attivi una sola volta, qui sotto.

Prima di qualsiasi scenario

Backend · nell'app

  1. Installa dallo Shopify App Store. Nell'app, la pagina Home mostra una checklist di tre voci chiamata Setup checklist: abilita l'embed, configura un livello di premio, verifica nel negozio.
  2. Open theme editor in Home porta direttamente al pannello App embeds dell'editor.

Frontend · editor del tema & negozio

  1. Online Store → Themes → Customize → App embeds → imposta Smart cart drawer su attivo → Save. D'ora in poi l'icona del carrello, i link al carrello e l'aggiunta al carrello aprono questo drawer al posto di quello del tema.
  2. Tutte le impostazioni del drawer sono su quell'embed, elencate nella tabella qui sotto. Nulla viene scritto nei file del tema.

Ogni impostazione dell'editor del tema

ImpostazioneCosa faPredefinito
Drawer titleTitolo in cima al drawer.Il tuo carrello
Checkout buttonTesto del pulsante di checkout.Checkout
Open drawer from cart linksL'icona del carrello e ogni link al carrello aprono il drawer; fa anche in modo che il drawer prenda il controllo della pagina /cart. Off = il drawer si apre solo dopo l'aggiunta al carrello.attivo
Show remove button on cart itemsIcona cestino per riga; lo stepper − arriva comunque a 0.attivo
Slide in fromRight or Left.Right
Accent colorBarra di avanzamento, chip, pulsanti, etichette dei bundle.#1a7f37
Upsell productsFino a 8 prodotti per l'elenco “You may also like”, in ordine di priorità.nessuno
Max upsells shownQuanti ne vengono mostrati insieme, 1–6.3
Announcement textLa barra in cima al drawer; vuoto la nasconde.vuoto
Announcement link (optional)Trasforma la barra in un link.nessuno
Starts at / Ends at (ISO date, optional)Programmazione della barra, es. 2026-07-01T00:00:00Z; vuoto = sempre.vuoto
Deadline (ISO date, optional), under Urgency countdown (Pro)Countdown mostrato sopra le righe del carrello. Richiede il piano Pro.vuoto

Dove si trovano le cose nell'app

PaginaCosa c'è
HomeRevenue generated (last 30 days / all time), ricavi su tutta la suite, la Setup checklist e Open theme editor.
RewardsFino a 5 livelli: Cart amount, Reward label, Select gift; Gamified display; Add tier; Save.
Upsell rulesRegole per le app sorelle: Select trigger products (optional), Select upsell products, Discount %; Save & publish.
PlanUpgrade to Pro ($9.99/mese, prova di 14 giorni) e Switch to Free.
Help / SupportDocumentazione nell'app e modulo di supporto; i messaggi arrivano allo studio.

Scenari

Attiva il drawer

Sostituisci il cart drawer del tema con Smart Cart, nient'altro per ora.

Backend · nell'app

  1. Non serve nulla. Home → Open theme editor è una scorciatoia verso l'embed.

Frontend · editor del tema & negozio

  1. App embeds → Smart cart drawer attivo.
  2. Imposta Drawer title, Checkout button, Slide in from e Accent color a piacere; lascia Open drawer from cart links e Show remove button on cart items attivo.
  3. Save.

Cosa vede il cliente

L'icona del carrello, i link al carrello e ogni aggiunta al carrello aprono Smart Cart; il drawer del tema resta chiuso.

Verificalo

Clicca l'icona del carrello quattro volte di fila: si apre ogni volta. Aggiungi un prodotto: il drawer si apre da solo.

Nello store demo

Spedizione gratuita ottenuta, prossimo premio in vista.

La barra degli annunci dichiara l'offerta, i chip mostrano la spedizione gratuita già ottenuta e il pacchetto di adesivi gratuito a $52.03 di distanza, e la barra continua a riempirsi attraverso i livelli invece di ripartire a ognuno. Ogni riga riporta la propria etichetta bundle, uno stepper di quantità e un pulsante di rimozione; i suggerimenti sotto You may also like sono tuoi.

Homepage dello store demo con il drawer di Smart Cart aperto: un annuncio Summer tune-up sale, un chip Free shipping contrassegnato come ottenuto, un chip Free Sticker Pack a $52.03 di distanza, una barra di avanzamento, tre righe di carrello etichettate GraphicMeat Mix & Match con stepper di quantità, una sezione You may also like con pulsanti Add, e un subtotale di $97.97 sopra un pulsante Checkout
Store demo GraphicMeat · tema Horizon · senza ritocchiClicca per ingrandire

Barra di avanzamento della spedizione gratuita

“Add $12.03 more to unlock free shipping”, che si riempie man mano che il carrello cresce.

Backend · nell'app

  1. Rewards → prima riga: Cart amount 50, Reward label “Free shipping”, nessun regalo → Save.
  2. Il livello è un'etichetta e una soglia; da solo non cambia le tariffe di spedizione.

Frontend · editor del tema & negozio

  1. Rendi davvero gratuita la spedizione a quell'importo: in Shopify Settings → Shipping and delivery, aggiungi una tariffa “Free shipping” con un prezzo minimo d'ordine di $50 al tuo profilo di spedizione, oppure attiva una soglia di Prime Bundles Shipping discount a $50. Lo stesso numero in entrambi i posti.
  2. Facoltativo: Announcement text “Free shipping over $50”.

Cosa vede il cliente

Un chip per il livello, una riga “Add $X more to unlock Free shipping” e una barra di avanzamento; il chip si spunta quando il subtotale supera $50. Screenshot a pagina intera nella pagina di GraphicMeat Smart Cart.

Verificalo

Carrello a $40 → barra parzialmente piena; aggiungi un articolo oltre $50 → chip spuntato e il checkout mostra la spedizione gratuita.

Regalo gratuito a $150

Un pacchetto di adesivi arriva nel carrello gratis quando il subtotale supera $150, e solo allora.

Backend · nell'app

  1. Rewards → Add tier → Cart amount 150, Reward label “Free Sticker Pack”.
  2. Select gift → scegli la variante regalo (il pulsante poi riporta “Gift: …”; Clear lo rimuove). Il regalo deve essere acquistabile: disponibile, oppure con inventario non tracciato.
  3. Save. L'app pubblica i livelli nel negozio e nella sua Function di checkout con lo stesso salvataggio.

Frontend · editor del tema & negozio

Nulla oltre all'app embed, già attivo.

Cosa vede il cliente

Oltre $150 il drawer aggiunge il regalo come vera riga di carrello con prezzo “Free”; una Shopify Function ricontrolla il carrello al checkout e lo sconta a $0. Se scendi sotto, il drawer lo rimuove di nuovo.

Verificalo

Carrello a $160 → riga regalo a $0 nel drawer e al checkout. Rimuovi un articolo per scendere sotto $150 → il regalo scompare.

Nello store demo

Superi la soglia, il regalo arriva nel carrello.

Oltre il livello da $150: entrambi i chip spuntati, una riga di festeggiamento, e il pacchetto di adesivi gratuito aggiunto come vera riga di carrello con prezzo Free. Le stesse soglie sono imposte da una Shopify Function al checkout, quindi il drawer non può mai promettere un regalo per cui l'ordine non si qualifica, e se il carrello scende di nuovo sotto la soglia, il drawer toglie di nuovo il regalo.

Homepage dello store demo con il drawer di Smart Cart aperto oltre il livello regalo: entrambi i chip premio spuntati, una riga Free Sticker Pack unlocked, una barra di avanzamento piena, il regalo gratuito mostrato come riga di carrello con prezzo Free, e un subtotale di $167.87
Store demo GraphicMeat · tema Horizon · senza ritocchiClicca per ingrandire

Una scala a più passaggi con festeggiamenti

Spedizione gratuita a $50, un regalo a $150, un regalo migliore a $300, con chip che si spuntano man mano che ognuno si sblocca.

Backend · nell'app

  1. Rewards: una riga per passaggio, in ordine crescente Cart amount, fino a cinque (Add tier dopo diventa grigio).
  2. Spunta Gamified display (“unlock-tier chips with a checkmark and a brief celebration as each reward unlocks”), poi Save.

Frontend · editor del tema & negozio

Nulla oltre all'app embed, già attivo.

Cosa vede il cliente

Una fila di chip, con quelli bloccati che mostrano l'importo ancora necessario; la barra di avanzamento si riempie in modo fluido attraverso i livelli invece di ripartire a ognuno. Screenshot a pagina intera nella pagina di GraphicMeat Smart Cart.

Verificalo

Supera una soglia: il chip si spunta e festeggia una sola volta. Superala di nuovo dopo essere scesa sotto: nessun secondo festeggiamento finché non si sblocca di nuovo.

Barra degli annunci con programmazione

Una barra verde nel drawer per tutta la durata di un saldo.

Backend · nell'app

Nell'app non c'è nulla da impostare per questo.

Frontend · editor del tema & negozio

  1. Announcement text “Summer tune-up sale: free shipping over $50, free gift over $150”.
  2. Announcement link (optional) a una collezione. Starts at / Ends at come date ISO, es. 2026-07-01T00:00:00Z; lascia vuoto per sempre attivo.
  3. Save.

Cosa vede il cliente

La barra compare in cima al drawer, anche con il carrello vuoto, solo all'interno dell'intervallo. Screenshot a pagina intera nella pagina di GraphicMeat Smart Cart.

Verificalo

Imposta una fine tra pochi minuti; la barra scompare alla successiva apertura del drawer dopo quel momento.

“You may also like” nel drawer

Mostra un cappellino e una felpa con pulsanti Add a un tocco, anche con il carrello vuoto.

Backend · nell'app

Nell'app non c'è nulla da impostare per questo.

Frontend · editor del tema & negozio

  1. Upsell products: scegline fino a 8 nell'ordine in cui vuoi che vengano proposti.
  2. Max upsells shown: 1–6 (predefinito 3). I prodotti già nel carrello vengono saltati automaticamente.
  3. Save.

Cosa vede il cliente

Un elenco “You may also like” sotto le righe (e sotto il messaggio di carrello vuoto) con pulsanti Add; gli articoli si aggiungono al loro prezzo normale.

Verificalo

Aggiungi uno dei suggeriti; esce dall'elenco e il successivo prende il suo posto.

Da sapere

Le righe aggiunte da qui sono marcate come provenienti dal drawer: sono ciò che conta come ricavo attribuito a Smart Cart.

Nello store demo

Un carrello vuoto vende comunque.

Con il carrello vuoto il drawer mostra l'annuncio e le tue raccomandazioni scelte con pulsanti Add a un tocco. Quali prodotti compaiono, in che ordine e quanti alla volta sono impostazioni dell'editor del tema: nessun modello tira a indovinare per te.

Homepage dello store demo con il drawer di Smart Cart aperto su un carrello vuoto: la barra degli annunci, una riga Your cart is empty, e una sezione You may also like che propone un cappellino e una felpa con pulsanti Add
Store demo GraphicMeat · tema Horizon · senza ritocchiClicca per ingrandire

Regole di upsell per Popups e Post Purchase

Indica al resto della suite cosa proporre con cosa, e con quale sconto.

Backend · nell'app

  1. Upsell rules → per regola: Select trigger products (optional) (lascia vuoto per un upsell sempre attivo) e Select upsell products.
  2. Discount % per quella regola. Aggiungi altre righe per altre regole; Remove ne elimina uno.
  3. Save & publish. Le regole vengono pubblicate nel tuo negozio perché GraphicMeat Popups e Post Purchase le leggano.

Frontend · editor del tema & negozio

Nulla oltre all'app embed, già attivo.

Cosa vede il cliente

Nel drawer non cambia nulla: il suo elenco proviene dalle selezioni dell'editor del tema qui sopra. Le regole guidano le offerte delle app sorelle, così una sola modifica mantiene coerente ogni superficie.

Verificalo

Con Popups o Post Purchase installati, le loro pagine di offerta mostrano gli stessi prodotti e la stessa percentuale.

Countdown di urgenza (Pro)

“Offer ends in 2d 4h 12m” sopra le righe del carrello per tutta la durata di un saldo.

Backend · nell'app

  1. Plan → Upgrade to Pro ($9.99/mese, prova gratuita di 14 giorni), approva sulla pagina di Shopify.

Frontend · editor del tema & negozio

  1. Urgency countdown (Pro) → Deadline (ISO date, optional), es. 2026-08-31T23:59:00Z → Save.

Cosa vede il cliente

Un countdown in tempo reale fino a quell'istante; a zero riporta “ended”. Senza Pro il campo viene ignorato.

Verificalo

Apri il drawer: l'orologio scorre ogni secondo; imposta la scadenza tra un minuto e guardalo scadere.

Rail di upgrade dei bundle (Pro, con Prime Bundles)

Spinte “Add 1 more, save 15%” sotto le righe del carrello a cui manca una sola unità per raggiungere un livello.

Backend · nell'app

  1. Avere quantity breaks di Prime Bundles attivi sui prodotti. Prime Bundles li pubblica automaticamente per il drawer.
  2. Plan → Upgrade to Pro. Nessuna ulteriore configurazione.

Frontend · editor del tema & negozio

Nulla oltre all'app embed, già attivo.

Cosa vede il cliente

Le righe mostrano una spinta con il risparmio che sbloccherebbe un'unità in più e un pulsante che la aggiunge; il badge dell'etichetta bundle compare sulle righe che appartengono a un'offerta. Screenshot a pagina intera nella pagina di GraphicMeat Smart Cart.

Verificalo

Metti nel carrello un'unità di un prodotto 2+: compare la spinta; premila: la riga passa a 2 e lo sconto appare al checkout.

Interruttore abbonati & risparmia sulle righe del carrello

Permetti ai clienti di passare una riga a un abbonamento senza uscire dal carrello.

Backend · nell'app

  1. Nulla in Smart Cart. Il prodotto richiede i selling plan di Shopify, da GraphicMeat Subscriptions o da qualsiasi app che crea selling plan nativi.

Frontend · editor del tema & negozio

Nulla oltre all'app embed, già attivo.

Cosa vede il cliente

Le righe il cui prodotto ha selling plan ottengono un selettore di consegna; cambiarlo è una normale modifica del carrello con il piano allegato.

Verificalo

Passa una riga a “Every month”; il checkout mostra il prezzo e la pianificazione dell'abbonamento.

Takeover della pagina carrello

I clienti che raggiungono /cart (tramite URL, segnalibro o la breadcrumb del checkout) vedono lo stesso drawer, non un secondo carrello.

Backend · nell'app

Nell'app non c'è nulla da impostare per questo.

Frontend · editor del tema & negozio

  1. Mantieni Open drawer from cart links attivo. Con questa opzione attiva, /cart (e le rotte localizzate in stile /en/cart) apre il drawer sopra la pagina carrello del tema, e chiuderlo lascia la pagina invece di rivelare l'altro carrello.
  2. Disattivalo per lasciare intatti la pagina carrello e l'icona del carrello del tema; il drawer si apre allora in automatico solo dopo l'aggiunta al carrello.

Cosa vede il cliente

Un solo carrello ovunque. Dietro il drawer il carrello del tema mostra già i prezzi bundle applicati da Shopify.

Verificalo

Digita /cart nella barra degli indirizzi: il drawer si apre sopra; chiudilo e torni alla pagina precedente.

Nello store demo

La pagina /cart ottiene lo stesso drawer.

Raggiungere /cart tramite URL o dalla breadcrumb del checkout apre il drawer sopra la pagina carrello del tema, così i clienti vedono un solo carrello ovunque. Dietro, Shopify ha già applicato i prezzi del bundle ($63.99 invece di $69.99) prima che qualcuno arrivi al checkout.

La pagina carrello dello store demo con il drawer di Smart Cart aperto sopra; il carrello del tema sullo sfondo mostra righe etichettate Bundle: GraphicMeat Mix & Match con prezzi scontati come $63.99 barrato da $69.99, e il drawer mostra le stesse righe con una barra dei premi e un subtotale di $112.92
Store demo GraphicMeat · tema Horizon · senza ritocchiClicca per ingrandire

Con GraphicMeat Popups sullo stesso negozio

Mai un popup e il drawer in competizione per lo schermo.

Backend · nell'app

  1. Nulla da configurare.

Frontend · editor del tema & negozio

Nulla oltre all'app embed, già attivo.

Cosa vede il cliente

Mentre un popup GraphicMeat è visibile, il drawer rimanda l'apertura automatica; si apre quando il popup si chiude. Un codice sconto concesso da un popup compare nel drawer come suggerimento “code applied”.

Verificalo

Attiva un popup, aggiungi un prodotto dietro di esso: il drawer aspetta.

Testi, lato e colore

Fai in modo che il drawer abbia testi e aspetto in linea con il resto del negozio.

Backend · nell'app

Nell'app non c'è nulla da impostare per questo.

Frontend · editor del tema & negozio

  1. Drawer title, Checkout button, Slide in from (Right / Left), Accent color, Show remove button on cart items.

Cosa vede il cliente

Il drawer eredita i caratteri del tema e il formato valuta del tuo negozio. Le altre etichette (“You may also like”, “Add”, “Your cart is empty”) per ora sono in inglese.

Verificalo

Ricarica il negozio dopo il salvataggio: le impostazioni dell'embed si applicano al caricamento successivo della pagina.

Verifica prima del lancio

Verifica che ogni promessa fatta dal drawer venga mantenuta al checkout.

Backend · nell'app

Nell'app non c'è nulla da impostare per questo.

Frontend · editor del tema & negozio

  1. Carrello sotto il primo livello: barra parzialmente piena, nulla sbloccato.
  2. Supera il livello di spedizione: il chip si spunta; il checkout mostra la spedizione gratuita (dalla tua tariffa o da Prime Bundles).
  3. Supera il livello regalo: riga regalo a $0 nel drawer e al checkout.
  4. Scendi di nuovo sotto: regalo rimosso, chip deselezionato.
  5. Modifica le quantità con lo stepper: subtotale e barra seguono; il checkout corrisponde.

Cosa vede il cliente

Ogni soglia viene convalidata due volte (nel drawer e dalla Function del checkout), quindi questa verifica non dovrebbe mai contraddirsi.

Verificalo

Usa un ordine di prova o la modalità di test del tuo gateway di pagamento per il checkout finale.

Piano, attribuzione, fatturazione

Scopri cosa ha reso il drawer e quando Pro diventa necessario.

Backend · nell'app

  1. Home: Revenue generated (last 30 days and all time) più i ricavi della suite.
  2. I ricavi attribuiti contano solo le righe aggiunte dal drawer (upsell e aggiunte della bundle rail), prezzo × quantità; i regali gratuiti non vengono contati.
  3. Oltre $200 in 30 giorni mobili, salvare nuove modifiche ai premi o agli upsell richiede Pro; il negozio online continua a funzionare. Un banner avvisa a partire da $100.
  4. Plan → Upgrade to Pro; Switch to Free per effettuare il downgrade. La fatturazione è sulla tua fattura Shopify; gli store di sviluppo non vengono mai addebitati.

Frontend · editor del tema & negozio

Nulla oltre all'app embed, già attivo.

Cosa vede il cliente

Le funzioni del negozio solo Pro sono la bundle rail e il countdown; tutto il resto resta gratuito.

Verificalo

Dopo l'upgrade, Home riporta “Pro plan active — bundle rail and urgency countdown enabled”.

Disattivalo o rimuovilo

Torna al carrello del tema, temporaneamente o in modo definitivo.

Backend · nell'app

  1. Disinstalla dallo Shopify admin per rimuoverla definitivamente: l'embed, la Function dello sconto sul regalo e ogni livello e regola memorizzati se ne vanno con essa.

Frontend · editor del tema & negozio

  1. Temporaneamente: App embeds → Smart cart drawer disattivo → Save. Livelli e regole restano salvati nell'app.

Cosa vede il cliente

Il drawer e la pagina carrello del tema tornano al caricamento successivo della pagina.

Verificalo

Clicca l'icona del carrello: si apre il drawer del tema.

Checklist per andare online

  1. Editor del tema: Smart cart drawer embed attivo e salvato.
  2. Almeno un livello di premio salvato; prodotti regalo disponibili o non tracciati.
  3. L'importo del livello di spedizione gratuita corrisponde alla vera tariffa di spedizione gratuita (impostazioni di spedizione di Shopify o Prime Bundles).
  4. Prodotti upsell scelti nell'editor del tema, Max upsells shown impostato.
  5. Date dell'annuncio e del countdown in formato ISO con il fuso orario (Z).
  6. Pro attivo se ti aspetti che il countdown o la bundle rail vengano mostrati.
  7. La verifica qui sopra, fatta una volta su desktop e una volta su telefono.

Sei ancora bloccato?

Invia un messaggio tramite il modulo di contatto e la persona che ha creato l'app risponde. La FAQ copre prezzi, attribuzione e dati; la pagina dell'app mostra dal vivo nello store demo ogni scenario qui sopra.