Articoli su: Widget

Il widget di abbonamento

Per accedere a questa pagina, vai su Supr Bundles & Subscriptions > Design


La pagina Design è il luogo in cui controlli l'aspetto dei widget di abbonamento e bundle nelle tue pagine prodotto: il design, i colori, gli angoli e la spaziatura, quali parti vengono mostrate, i testi che leggono i clienti e il tuo CSS. Entrambi i widget si progettano insieme in questa unica pagina, così si abbinano tra loro e al tuo tema. È l'esperienza unificata dei widget: un solo insieme di controlli, entrambi i widget, ogni design.


Se la pagina dice I tuoi widget non sono ancora attivi, fai prima clic su Attiva widget. Vedi Come abilitare il widget di abbonamento nel negozio online.


Indice



Che cos'è il widget di abbonamento?


Il widget di abbonamento si trova sopra il pulsante aggiungi al carrello e mostra i modi in cui si può acquistare un prodotto: l'acquisto singolo e le tue opzioni di abbonamento. I clienti scelgono la frequenza di consegna, vedono l'eventuale sconto e aggiungono il prodotto al carrello. Se la tua offerta ha anche opzioni bundle, il widget bundle compare insieme a esso nella stessa pagina prodotto.


Cosa offrono i widget, quali opzioni, quali sconti e se compare la riga di acquisto singolo, si imposta in ogni offerta in Offerte. L'aspetto dei widget e i testi condivisi che mostrano si impostano in questa pagina.


Com'è organizzata la pagina


  • L'anteprima a sinistra, che ti segue mentre scorri.
  • Una scheda delle impostazioni a destra, con le sezioni in questo ordine: Design, Colori, Forma, Spaziatura, Font, Elementi e CSS personalizzato.
  • Etichette, una scheda a sé sotto la scheda delle impostazioni, per i testi che leggono i tuoi clienti.
  • Impostazioni dei componenti aggiuntivi sotto entrambe, per gli extra attorno al widget, come il badge accanto al prezzo del prodotto, il testo del pulsante aggiungi al carrello e il selettore della data di consegna. Vedi Componenti aggiuntivi della pagina prodotto.
  • Ripristina design precedente, solo nei negozi che hanno personalizzato i widget prima che esistesse questa pagina.
  • Vuoi aiuto per adattarlo al tuo brand?, con un pulsante Chatta con un esperto che apre una chat con il nostro team.


L'anteprima


L'anteprima si trova accanto ai controlli e ti segue mentre scorri, così vedi cosa stai cambiando mentre lo cambi. Mostra la tua pagina prodotto come la vede un cliente, con i widget bundle e di abbonamento impilati nell'ordine in cui vengono davvero mostrati, e sotto il campo della data di consegna se lo usi.


Usa Prodotto di anteprima sopra di essa per visualizzare le opzioni e i prezzi di un prodotto reale invece dei dati di esempio, e Variante di anteprima per controllare un prodotto con varianti a prezzi diversi.


Ogni modifica compare nell'anteprima prima di salvare, così puoi provare qualcosa e scartarlo. Su uno schermo desktop l'anteprima non diventa mai più alta della finestra: il titolo e il piè di pagina restano fermi e i widget scorrono tra di essi.


Colori e spaziatura possono comunque differire leggermente nel tema dal vivo, perché l'anteprima viene eseguita nel pannello di controllo Shopify e non nella tua vetrina. Apri una pagina prodotto del tuo negozio per vedere il risultato finale.


Design


Questa sezione mostra il design di abbonamento e il layout bundle attualmente attivi, ognuno con una miniatura.


  1. Fai clic su Cambia per aprire Scegli un design.
  2. Usa il selettore in alto per scegliere Widget di abbonamento o Widget bundle. Puoi scrivere in Cerca design o filtrare per categoria.
  3. Fai clic sul design che vuoi. La galleria si chiude e l'anteprima lo mostra.
  4. Salva con la barra di salvataggio in cima alla pagina. Nel tuo negozio non cambia nulla finché non salvi.


I design di abbonamento, nelle categorie della galleria:


  • Conversione
    • Checkbox: un'unica casella di controllo per passare dall'acquisto singolo all'abbonamento.
    • Aurora: bordi sfumati fluidi con un effetto scintillante. È il design di partenza di un nuovo negozio.
    • Lure: il design di punta, con vantaggi in evidenza e un banner dello sconto.
  • Classici
    • Classic+: un layout dettagliato con spazio per le opzioni prepagate e più scelte. Il prezzo sta in alto e segue l'opzione scelta dal cliente, e ogni opzione mantiene il proprio prezzo con l'etichetta dello sconto accanto.
    • Dropdown+: tutti i dettagli in un menu a discesa compatto. Il prezzo sta in alto e segue l'opzione scelta dal cliente, così le righe all'interno del menu restano un semplice elenco di frequenze.
    • Panel+: un layout a schede con un pulsante di opzione su ogni scelta.
  • Minimalisti
    • Classic: un layout semplice per opzioni con pagamento per ordine, fino a tre scelte.
    • Dropdown: il modo più compatto per mostrare le tue opzioni.
    • Panel: pulsanti a pannello puliti e semplici.
  • Estetici
    • Blobs: uno stile animato per attirare l'attenzione.


Layout bundle:


  • Panels: righe, ognuna nel proprio pannello con bordo. È il layout di partenza di un nuovo negozio.
  • Cards: schede orizzontali, ideali per confrontare due o tre opzioni affiancate.
  • List: righe verticali con un pulsante di opzione su ogni scelta. Il più compatto.


Ogni design si personalizza da questa pagina, nelle sezioni qui sotto, quindi non c'è nulla da aprire né da impostare due volte. Nel tuo negozio è attivo un solo design di abbonamento e un solo layout bundle alla volta, e ogni offerta li usa. Le impostazioni degli altri vengono conservate, quindi passare dall'uno all'altro non ti costa nulla.


Cambiare design non influisce mai sulle tue offerte, sui prezzi o sugli abbonati.


Neon e i design Custom non sono più disponibili nella galleria. Un negozio che ne usa già uno lo mantiene, e ne vede ancora la scheda. Un design Custom è scritto in HTML e CSS invece di essere composto da impostazioni, quindi mantiene un link Personalizza che apre il codice scritto per te dal nostro team. Vedi Cosa è successo all'editor del widget.


Dopo aver salvato modifiche in questa pagina, in questa sezione compare un pulsante Ripristina predefiniti. Riporta colori, forma, spaziatura, font, elementi, etichette e CSS personalizzato ai valori originali dell'app, su ogni design, e mantiene il design e il layout bundle che pubblichi. Come tutto il resto qui, ha effetto solo quando salvi.


Colori


Un'unica decisione, applicata a tutti i design insieme, così se in seguito cambi design il tuo negozio mantiene il suo aspetto. Ogni tipo di risposta si trova su una riga propria sotto un piccolo titolo:


  • Dal tuo tema, per primo: il campione tratteggiato Eredita dal tuo tema prende tutto dal tema, seguito dagli schemi di colori del tema stesso, mostrati come campioni nei loro colori. Scegliere uno schema ne prende lo sfondo e il testo. Questa riga compare solo se il tuo tema pubblica schemi di colori.
  • Colore principale e Sfondo, sui temi che pubblicano una tavolozza di colori invece di schemi di colori, come Horizon. Vedi sotto.
  • Un colore, e tutto il resto lo segue: i colori normali, disposti lungo la ruota dei colori dal blu fino al rosa e al rosso, con i neutri alla fine e il tuo colore in ultima posizione. Sceglierne uno imposta il colore primario, e tutto ciò che i widget disegnano lo segue: l'opzione scelta dal cliente, i bordi, i pulsanti di opzione e i badge del risparmio. Il testo su un badge viene scelto per te in modo che resti leggibile qualunque colore tu scelga. Per la maggior parte dei negozi questo è tutto ciò che serve.
  • Gradiente: tredici sfumature già pronte, ognuna disegnata nei propri colori, a partire da Aurora e fino all'unica neutra, Inchiostro e argento. In mezzo ci sono Mezzanotte, Fioritura, Rosa, Tramonto, Sabbia, Brace, Menta, Foresta, Oceano, Laguna e Ametista. Scegline una e sotto compaiono i suoi tre punti, Base, Secondo e Terzo, così puoi regolarli. Questa riga compare solo mentre è pubblicato un design in grado di disegnare un gradiente; negli altri non avrebbe nulla da fare.


Se il tuo tema pubblica una tavolozza di colori invece di schemi di colori, non c'è una coppia da ereditare, quindi ne scegli una tu da due righe disegnate nei colori del tema:


  • Colore principale è il colore con cui vengono disegnati i widget: l'opzione scelta dal cliente, i bordi, i pulsanti di opzione e i badge. I testi lo seguono, quindi non c'è altro da impostare.
  • Sfondo è la scheda dietro.


Un colore non può essere entrambi, quindi sceglierne uno già usato dall'altra riga scambia i due. Invertire una coppia chiaro su scuro richiede un clic invece di tre.


Sono alternative, non livelli, perché rispondono alla stessa domanda. Un gradiente è un colore come un altro: il suo punto Base è quello che prende il resto del widget, quindi l'opzione scelta, i bordi e i badge lo seguono. Scegliere invece un colore semplice disegna quei design in tinta unita, e scegliere uno schema del tema ne prende la coppia e ricava il colore dal suo testo.


Un gradiente raggiunge tutto ciò che sul widget deve attirare lo sguardo, non solo il contorno. Sull'opzione scelta dal cliente disegna il nome dell'opzione e il prezzo. Su ogni opzione, scelta o meno, disegna i badge, i chip del risparmio e le righe dell'omaggio e della spedizione gratuita. Le righe dell'omaggio e della spedizione gratuita si muovono lentamente, attirando lo sguardo senza distoglierlo dal prezzo. Il badge di sconto prende la sfumatura su ogni design, perché il badge su un'opzione di abbonamento e quello su un'opzione bundle sono lo stesso oggetto; assegna al badge un colore tuo nella sua riga in Elementi e manterrà quello.


Una riga dell'omaggio o della spedizione gratuita ha il contorno nel tuo colore finché la sua opzione non è scelta, e si riempie di quel colore quando un cliente sceglie l'opzione. Vale sia con un colore semplice sia con un gradiente, così una fila di opzioni mostra un unico blocco di colore pieno, sull'opzione effettivamente scelta, e le altre si leggono come offerte in attesa.


Qualunque sfumatura tu scelga, il testo stampato sopra viene scelto per restare leggibile. L'opzione singola ne resta fuori: è la semplice riga a prezzo pieno e non un'offerta, quindi mantiene un contorno normale e il prezzo nel tuo colore abituale.


Imposta prima questo, poi usa Elementi qui sotto solo per le parti che vuoi diverse.


Disattivare lo scintillio di Aurora. Aurora si anima solo quando ha una sfumatura da disegnare. Scegli un colore semplice in Un colore, e tutto il resto lo segue e Aurora viene disegnato in tinta unita, senza scintillio. Per mantenere il gradiente ma eliminare il movimento, scegli un altro design, oppure chiedici in chat.


Un colore molto chiaro capovolge il widget. Un crema, un grigio pallido o un bianco sporco non si vedono sulla scheda bianca con cui vengono forniti i design. Così la scheda si scurisce, diventando una tonalità profonda del tuo colore, e bordi, pulsanti di opzione e testo mantengono il colore a piena intensità sopra di essa. Scegli uno Sfondo tuo e verrà usato quello, e tornare a un colore normale rimette la scheda bianca.


Il colore primario evidenzia il contorno dell'opzione scelta dal cliente invece di riempirla. In particolare nel design Checkbox, l'opzione selezionata mantiene il proprio sfondo e prende il colore sul bordo e sulla spunta, perché quell'opzione è l'intero widget e non una riga di un elenco.


Quando i widget seguono i colori del tuo tema, un'opzione non scelta dal cliente ha il contorno in quell'inchiostro attenuato, e quella scelta è l'unico contorno pieno dell'elenco. Lure disegna il banner dello sconto come una fascia dello stesso inchiostro attenuato invece che come un blocco pieno.


Il nome e il prezzo sull'opzione scelta non sono dipinti nel tuo colore. Vengono scelti per risaltare su qualsiasi riempimento abbia quell'opzione. Impostali tu nelle righe Nome dell'offerta, Nome dell'opzione e Prezzo se vuoi qualcos'altro.


Se i colori del tuo tema non arrivano come ti aspetti, scegli tu un colore in Un colore, e tutto il resto lo segue invece di ereditarlo dal tema. Alcuni temi non trasmettono i propri colori alle app.


Se avevi personalizzato un design elemento per elemento prima che esistesse questa pagina, salvare qui sostituisce quei colori, così come sostituisce la spaziatura e l'arrotondamento che avevi impostato. Si può annullare: Ripristinare il design precedente qui sotto spiega come recuperare quello stile.


Forma


  • Arrotondamento imposta quanto sono arrotondati gli angoli.
  • Spessore del bordo imposta la larghezza dei bordi.


In un design che disegna un bordo sfumato, lo spessore imposta anche quel bordo, così il gradiente e i bordi in tinta unita accanto hanno lo stesso peso. L'opzione scelta dal cliente, e quella sotto il puntatore, sono contrassegnate dal loro colore con quello stesso spessore invece che da un anello più spesso. L'arrotondamento vale anche all'interno di un'opzione bundle: le righe dell'omaggio, della spedizione gratuita e dei componenti aggiuntivi sono arrotondate allo stesso modo.


Spaziatura


La spaziatura ha tre parti:


  • All'interno di ogni opzione: Spaziatura interna superiore e Spaziatura interna inferiore impostano lo spazio sopra e sotto il contenuto di ogni opzione di abbonamento e opzione bundle. Se non tocchi quella inferiore, segue quella superiore. Spaziatura interna orizzontale imposta entrambi i lati.
  • Tra i widget: Spaziatura è lo spazio tra il widget bundle, il widget di abbonamento e il campo della data di consegna, per quando le parti sono troppo vicine o troppo lontane.
  • Attorno al widget: Spazio sopra e Spazio sotto l'insieme. Usali quando il tuo tema mette il widget troppo vicino al pulsante aggiungi al carrello o al prezzo.


Tutto questo si applica contemporaneamente ai widget di abbonamento e bundle, e al campo della data di consegna sotto di essi.


Poiché un solo controllo imposta un valore ovunque, salvare qui sostituisce la spaziatura e l'arrotondamento che potresti aver impostato su singole parti di un design prima che esistesse questa pagina. Si può annullare: vedi Ripristinare il design precedente.


Font


Un unico font per il widget di abbonamento e le opzioni bundle insieme, titoli compresi:


  • Segue il tuo tema, l'impostazione predefinita: i titoli usano il font dei titoli del tema e tutto il resto il font del corpo, la stessa divisione che fa il tuo tema.
  • Font del corpo del tema o Font dei titoli del tema: l'intero widget in quell'unico carattere.
  • Sistema, Serif o Monospazio: un font che ogni dispositivo ha già.
  • Personalizzato: scrivi il nome di un font che il tuo tema carica già, come Futura PT, esattamente come lo chiama il tema. Puoi indicarne alcuni, separati da virgole, e viene usato il primo disponibile nel browser. Vengono mantenuti solo lettere, numeri, spazi, virgole e trattini. Se il browser non lo ha, il widget torna al font del corpo del tema.


L'app non carica mai un font da sola, quindi un font personalizzato compare solo se il tuo tema (o un'altra app) lo carica già nella pagina prodotto. Dimensioni e spessori restano su ogni riga in Elementi.


L'anteprima nel pannello di amministrazione non può caricare i font della tua vetrina, quindi lì i font del tema e un font personalizzato vengono mostrati con il font del pannello. Apri una pagina prodotto del tuo negozio per vedere il risultato reale.


Elementi


Questa sezione ha una riga per ogni parte del widget, elencate nell'ordine in cui si legge la pagina prodotto. Una riga si applica a ogni design che ha quella parte, quindi nascondere l'intestazione la nasconde in tutti, e una riga che il tuo design pubblicato non può rispettare non viene mostrata affatto.


  • Entrambi i widget: Titolo dell'offerta, Mostra le varianti come campioni, Badge di sconto, Badge di sconto su ogni opzione (solo in Classic+) e Badge messaggio.
  • Opzioni di abbonamento: Intestazione, poi la superficie (Sfondo, Bordo, Pulsante di opzione), poi il testo che contiene: Nome dell'offerta, Intestazione della sezione, Nome dell'opzione, Descrizione, Frequenza di consegna, Prezzo, Prezzo barrato, Prezzo unitario, Vantaggi, Icona dei vantaggi, Intestazione dei vantaggi e Tooltip informativo.
  • Opzioni bundle: Intestazione, Sfondo, Bordo, Pulsante di opzione, Titolo, Prezzo, Prezzo barrato e Prezzo unitario.
  • Data di consegna: Intestazione, Campo e Bordo, lo stile del campo della data sotto i widget. Questa sezione compare solo quando il Selettore di date è attivo in Impostazioni dei componenti aggiuntivi. Vedi Componenti aggiuntivi della pagina prodotto.
  • Layout della pagina: Bundle in alto, cioè se il widget bundle sta sopra il widget di abbonamento, e Sincronizza i prezzi dei bundle, cioè se i prezzi dei bundle seguono il prezzo per consegna dell'abbonamento selezionato. Entrambe sono attive per impostazione predefinita.


All'interno di Opzioni di abbonamento e Opzioni bundle, un piccolo titolo Solo in questo design contrassegna le righe che appartengono al design che hai pubblicato e a nessun altro. L'elenco cambia con il design che pubblichi. Ad esempio:


  • Menu a discesa della consegna, nei design che mostrano una selezione per la frequenza di consegna (Dropdown, Dropdown+, Lure e Checkbox): il suo riempimento, il testo e la freccia al suo interno, e la dimensione e lo spessore di quel testo.
  • Bordo spesso e Nascondi la descrizione finché non è scelta, in Aurora.
  • Bordo spesso sulle opzioni bundle, nei layout che possono disegnarlo.


Le due sezioni dei widget sono elencate nell'ordine in cui i widget si impilano nella tua pagina prodotto, quindi quello che un cliente vede per primo è quello che raggiungi per primo. Attiva o disattiva Bundle in alto e si scambiano subito.


Bordo e Sfondo hanno ciascuno due colori: prima quello normale, poi quello per l'opzione scelta dal cliente. Se lasciato su predefinito, quello dell'opzione scelta segue il tuo colore primario, che è ciò che vogliono la maggior parte dei negozi.


Il secondo colore della riga Titolo del bundle, quello per un'opzione scelta, compare solo dove c'è un'opzione riempita su cui poggiare. Le tue opzioni bundle contrassegnano quella scelta con una lieve evidenziazione, e Panels indica quale opzione è scelta con la forza del bordo. Se preferisci che l'opzione scelta sia riempita del tutto, scrivi all'assistenza e la imposteremo per te.


Nome dell'offerta e Nome dell'opzione sono due righe, non una. Nei design che stampano entrambi, il nome dell'offerta è la riga sopra un gruppo di scelte, "Abbonati e risparmia", e il nome dell'opzione è una scelta al suo interno, "Consegna ogni mese". Nei design che stampano un elenco piatto di opzioni non c'è un nome dell'offerta, quindi funziona solo la riga del nome dell'opzione.


Vantaggi è una sola riga per entrambi gli elenchi di vantaggi: le spunte sotto un'opzione di abbonamento e le spunte sotto la riga di acquisto singolo. Il suo colore, dimensione e spessore valgono per entrambi. La riga ha anche un campo Spaziatura per lo spazio tra le righe; se lo lasci stare, segue la tua spaziatura interna. Ciò che dice ogni vantaggio si imposta dove l'hai scritto, nelle opzioni dell'offerta.


Icona dei vantaggi è una riga a sé nei due design che disegnano una spunta, Lure e Checkbox. Il primo colore è la spunta e il suo contorno, il secondo è il cerchio dietro, che resta trasparente finché non gli dai un colore. Aurora disegna la spunta con il gradiente del design stesso, quindi segue Colori.


Due cose non si impostano qui perché appartengono all'offerta e non al tuo design. Se la riga di acquisto singolo compare, e quale opzione è selezionata per prima, si impostano in ogni offerta: vedi Come rimuovere l'opzione di acquisto singolo per un prodotto. E l'immagine di un'opzione bundle è quella che carichi su quell'opzione.


Intestazioni e titolo dell'offerta


Una pagina prodotto può avere un titolo dell'offerta e fino a tre intestazioni di sezione.


Titolo dell'offerta è una riga in Entrambi i widget. Stampa una volta sola il nome della tua offerta in cima, sopra le opzioni bundle, le opzioni di abbonamento e la data di consegna. È il Nome dell'offerta che hai dato all'offerta nella pagina Offerte, quindi se rinomini l'offerta la pagina lo segue. È disattivato finché non lo attivi, e il suo colore, dimensione e spessore si impostano nella riga.


Mostra le varianti come campioni è una riga in Entrambi i widget. Se attiva, ogni scelta di variante in entrambi i widget mostra le opzioni come campioni invece che come menu a discesa: i box componibili e il loro elenco di prodotti, i componenti aggiuntivi, gli omaggi (nelle opzioni bundle e nelle opzioni di abbonamento), i prodotti in un bundle fisso e le scelte per articolo negli sconti per quantità e in Compra X, ottieni Y. Dove hai impostato un colore o un'immagine sul valore dell'opzione in Shopify (ad esempio il campione di un'opzione Colore), il campione lo mostra; le altre opzioni, come le taglie, mostrano il nome. Un valore esaurito è barrato e non si può scegliere. I campioni prendono i colori del tuo widget: quello scelto è disegnato nel tuo colore di accento. I campioni derivano dai valori delle opzioni prodotto di Shopify: apri il prodotto in Shopify e, in Varianti, collega la sua opzione colore al metacampo di categoria Colore e scegli il campione di ogni valore (vedi la guida di Shopify, Using category metafields). È attivo per i nuovi negozi, e disattivato per i negozi installati prima finché non lo attivi.


Ogni sezione ha una propria riga Intestazione, con interruttore, colore, dimensione, spessore e layout propri: Opzioni di abbonamento > Intestazione, Opzioni bundle > Intestazione e Data di consegna > Intestazione. I layout sono:


  • Centrato con linee, l'intestazione al centro con una linea che si estende ai due lati. È il layout di partenza di un nuovo negozio.
  • Centrato, l'intestazione al centro senza linee.
  • Semplice, l'intestazione da sola all'inizio della riga.


Il testo di ogni intestazione si imposta in un punto diverso:


  • Intestazione dell'abbonamento: il campo Titolo della sezione in Etichette. Parte come {{subscription_name}}, che stampa il Nome dell'abbonamento dell'offerta, il nome che imposti nell'offerta sopra le sue opzioni di abbonamento (tradotto insieme all'offerta). Scrivi invece parole tue ("Non restare mai senza!"), oppure mescola le due cose ("{{subscription_name}}, annulla quando vuoi"). Se lasciato vuoto, il campo funziona come {{subscription_name}}.
  • Intestazione del bundle: il campo Nome del bundle nell'offerta, sopra le sue opzioni bundle. Se lo lasci vuoto, l'intestazione dice "Bundle & Save". Per non mostrare alcuna intestazione del bundle, disattiva Opzioni bundle > Intestazione in Elementi.
  • Intestazione della data di consegna: Intestazione del selettore di date, in Impostazioni dei componenti aggiuntivi > Selettore di date.


Tutti questi sono testi che un cliente legge, quindi sono tutti traducibili. I nomi delle offerte, degli abbonamenti e dei bundle si traducono in Impostazioni > Traduzioni in Offerte; le etichette del widget in Widget.


Leggere una riga di un elemento


Una riga è una linea. Il nome dell'elemento a sinistra con il suo interruttore accanto, poi, in colonne a destra:


  • Il suo colore, come campione su cui fai clic per aprire il selettore di colori.
  • Il suo colore sull'opzione scelta dal cliente, come secondo campione, nelle parti che appaiono diverse una volta scelte.
  • La sua dimensione del testo, in pixel.
  • Il suo spessore del testo, da sottile a nero.


Ciò che cambia da una riga all'altra è l'interruttore: il nome dell'opzione, gli sfondi e i bordi non si possono nascondere, quindi quelle righe non hanno interruttore, e gli sfondi e i bordi sono solo un colore, senza testo da dimensionare.


Due campi non appartengono a nessuna di queste colonne, quindi stanno su una riga a sé sotto di esse: una Spaziatura, per un elemento composto da più righe, e un Layout del prezzo. L'elenco dei vantaggi ha il primo, e il prezzo barrato li ha entrambi.


Su uno schermo stretto i controlli scendono su una riga propria sotto il nome. Lo stile compare solo mentre l'elemento è attivo, e una modifica viene scritta in ogni design che ha l'elemento, quindi cambiando design in seguito il tuo stile resta. Passa il mouse sul nome di una riga per vedere cosa copre.


Badge


Ci sono due badge, e sono due righe in Entrambi i widget perché ciascuno si imposta una sola volta per entrambi i widget:


  • Il Badge di sconto viene calcolato dal tuo sconto, e dice "-20%" su un'opzione di abbonamento e "Save 20%" su un'opzione bundle.
  • Il Badge messaggio è quello che scrivi tu in un'opzione bundle, nel campo Badge, ad esempio "Il più scelto".


Ognuno ha una propria forma, colore di sfondo, colore del testo, dimensione e spessore del testo. I colori del badge di sconto partono su predefinito, che segue il tuo colore primario; scegli un colore nella riga per impostare il tuo.


Le forme sono quattro:


  • Bolla, una pillola arrotondata accanto al titolo.
  • Etichetta, un cartellino con una punta sul lato iniziale.
  • Fluttuante, la pillola sollevata dalla riga con una morbida ombra sotto.
  • Nastro, una striscia attaccata al bordo superiore della riga. È il valore di partenza di un nuovo negozio per il badge di sconto.


Fluttuante e Nastro escono dalla riga, quindi sono le due che chiedono in che punto collocarsi lungo di essa: Inizio, Centro o Fine.


Classic+ stampa il badge di sconto due volte: una nell'intestazione sopra le sue opzioni, e una su ogni opzione sotto di essa. Il secondo ha una riga propria, Badge di sconto su ogni opzione. Disattivala per lasciare solo il badge dell'intestazione, oppure dagli colori, dimensione, spessore e forma propri (Bolla o Etichetta). Dropdown+ stampa un solo badge, nell'intestazione.


Per nascondere il badge di sconto, disattiva la sua riga. Ciò che dice il badge ("Save 20%", "20% off") si imposta in Etichette.


Colori predefiniti e personalizzati


Ogni colore in una riga di un elemento parte da predefinito, e predefinito significa il tuo colore primario ovunque il primario guidi quella parte: il bordo, il pulsante di opzione, lo sfondo quando è selezionato. Impostalo una volta in Colori e tutti lo seguono.


Distingui i due casi dal campione. Un contorno tratteggiato significa che il colore segue ancora la tua tavolozza; uno pieno significa che l'hai impostato tu. Un campione a scacchi significa che il testo non ha un colore proprio e prende quello del testo attorno, finché non ne scegli uno. Passaci sopra il mouse per vedere quale, e qual è il colore.


Fai clic sul campione e scegli un colore e quella singola parte si stacca, mantenendo il tuo colore qualunque sia il primario. Per rimetterla a posto, fai di nuovo clic sul campione e scegli Usa predefinito: la parte rientra e prende il colore primario attuale.


Le parti che il primario non guida, come il nome dell'opzione o il prezzo barrato, leggono predefinito come il colore con cui il design viene fornito. In un design che disegna un gradiente, il bordo legge predefinito come il gradiente.


Cambiare il colore in Colori si propaga a ogni parte ancora su predefinito, anche nei design che non stai usando. Tornare al campione tratteggiato Eredita dal tuo tema restituisce quelle parti ai colori con cui il loro design viene fornito.


Prezzi


I prezzi hanno righe proprie dentro Elementi, e i due widget sono tenuti separati così puoi cambiare uno e lasciare l'altro com'è. Per ogni widget puoi disattivare:


  • Prezzo, l'importo su ogni opzione di abbonamento o opzione bundle.
  • Prezzo barrato, il prezzo pieno barrato accanto a quello scontato.
  • Prezzo unitario, il prezzo per articolo come "3,50 $ cad.". Parte disattivato nel widget di abbonamento e attivo nelle opzioni bundle.


Invito a scegliere di più (opzioni bundle, disattivato finché non lo attivi) aggiunge un link sotto gli sconti per quantità come "Aggiungi 1 in più per risparmiare il 15%" mentre un cliente ha scelto una confezione più piccola e una più grande fa risparmiare di più. Facendo clic si sceglie la confezione più grande. Compare solo sui semplici sconti per quantità, non su un build-a-box, un bundle fisso, Compra X, ottieni Y o un'opzione con omaggio, e il suo testo è il campo Invito a scegliere di più in Etichette.


Il motivo abituale per disattivare un prezzo è che il tuo tema lo stampa già sopra il widget e preferisci non dirlo due volte. Per mostrare solo il prezzo unitario, disattiva Prezzo e attiva Prezzo unitario.


Tutti e tre hanno un colore, una dimensione e uno spessore. La riga Prezzo dell'abbonamento ha anche il secondo campione, per il prezzo sull'opzione scelta dal cliente.


La riga Prezzo barrato dell'abbonamento ha due campi in più, su una riga sotto dimensione e spessore:


  • Layout del prezzo: Affiancati mantiene entrambi i prezzi su una riga. Impilati mette il prezzo barrato su una riga propria sopra quello attuale.
  • Spaziatura, lo spazio tra i due prezzi, in pixel.


Ogni design mantiene le proprie risposte, quindi impostarle sul design che pubblichi lascia gli altri com'erano.


Classic+ e Dropdown+ stampano un solo prezzo in cima al widget, e segue l'opzione scelta dal cliente. Disattivare il prezzo nasconde anche quello.


Il prezzo unitario è offerto solo nei design che ne stampano uno. Il testo che lo accompagna, "/ cad." o "{{unit_price}} / {{unit_name}}", si imposta in Etichette. Il prezzo unitario che il tuo tema mostra sotto il prezzo del prodotto (per 100 g e così via) è un componente aggiuntivo separato, Dettagli del prezzo dell'abbonamento, in Componenti aggiuntivi della pagina prodotto.


L'ordine in cui compaiono gli elementi


  • Quale widget viene per primo: Elementi > Layout della pagina > Bundle in alto. Attivo per impostazione predefinita; disattivalo per mettere il widget di abbonamento sopra le opzioni bundle.
  • L'ordine delle opzioni di abbonamento: apri l'offerta in Offerte e trascina le opzioni dalla loro maniglia in Opzioni di abbonamento, poi salva l'offerta. La vetrina le mostra in quell'ordine.
  • La riga di acquisto singolo: nell'offerta, usa le frecce su e giù sulla riga Acquisto singolo per metterla in cima o in fondo all'elenco.
  • L'ordine delle opzioni bundle: trascinale in Opzioni bundle nell'offerta. La riga dell'opzione singola si sposta in cima o in fondo allo stesso modo della riga di acquisto singolo.
  • Quale opzione è selezionata al caricamento della pagina: fai clic su Imposta come predefinito su quella riga nell'offerta. Vedi Impostare l'opzione predefinita.
  • Un prodotto in più di un'offerta: l'abbonamento di ogni offerta è un gruppo a sé nel widget. Imposta l'ordine dei gruppi in Impostazioni dei componenti aggiuntivi > Ordine dei gruppi di opzioni. Lo stesso ordine vale anche al checkout.


Etichette


Qui riformuli i testi che leggono i tuoi clienti, nella lingua principale del negozio. Si trova sotto la scheda delle impostazioni, in una scheda a sé. Ogni campo si applica a ogni design di quel widget, quindi le tue parole restano quando provi un altro design, e la scheda elenca solo i campi che il tuo design pubblicato stampa davvero.


  • Widget di abbonamento: Titolo della sezione (accetta {{subscription_name}} per il Nome dell'abbonamento dell'offerta), Riga di acquisto singolo, Badge di sconto, percentuale, Badge di sconto, importo, Badge di sconto, prezzo fisso, Intestazione delle opzioni di abbonamento, Riga prepagato, Banner dello sconto, Titolo del tooltip informativo, Riga dell'opzione (la riga stampata per ogni frequenza nell'elenco), Prezzo unitario e i suffissi di frequenza da Ogni giorno a Ogni N anni ("/ mese", "/ {{n}} settimane").
  • Widget bundle: Chip di risparmio, percentuale, Chip di risparmio, box a livelli, Chip di risparmio, importo, Suffisso per unità ("/cad."), Riga della spedizione gratuita, Opzione singola, Riga dell'omaggio e Invito a scegliere di più ("Aggiungi {remaining} in più per risparmiare il {value}%").
  • Build-a-box: tutto ciò che un'opzione build-a-box stampa attorno alle sue scelte, come l'Intestazione "Include", l'Intestazione delle scelte, l'Invito alla scelta, il Contatore della selezione e Minimo non raggiunto ("Scegli almeno {min} articoli").
  • Premi e omaggi: le intestazioni sopra i premi Compra X, ottieni Y e gli omaggi, e la parola Gratis stampata come loro prezzo.


Alcuni campi usano segnaposto tra parentesi graffe, e ogni campo indica cosa rappresentano i suoi segnaposto. Mantienili nel tuo testo e spostali dove la frase ne ha bisogno. Lascia vuoto un campo per tornare al testo predefinito.


Alcuni testi non sono in Etichette, perché appartengono a una singola offerta o a un componente aggiuntivo:


  • Nomi, descrizioni e vantaggi delle opzioni di abbonamento: su ogni opzione di abbonamento in Offerte (Nome dell'opzione, Descrizione, Vantaggi). I nomi delle opzioni non si modificano in blocco, quindi cambiali offerta per offerta; i testi validi per tutto il negozio, come i suffissi di frequenza, si modificano una volta sola qui.
  • Nome, descrizione e vantaggi della riga di acquisto singolo: nella riga Acquisto singolo dell'offerta. Lascia vuoto il suo Nome e la riga usa Riga di acquisto singolo da Etichette.
  • Titoli, sottotitoli e badge delle opzioni bundle, e l'intestazione Nome del bundle: nell'offerta.
  • Il testo del pulsante aggiungi al carrello, il badge accanto al prezzo del prodotto e i testi della data di consegna: in Impostazioni dei componenti aggiuntivi, vedi Componenti aggiuntivi della pagina prodotto.


Questi campi impostano il testo nella lingua principale del tuo negozio. Per tradurlo nelle altre lingue, usa Impostazioni > Traduzioni. Per quella lingua, una traduzione lì ha la precedenza su ciò che scrivi qui.


CSS personalizzato


L'ultima sezione della scheda delle impostazioni, sotto Elementi, per tutto ciò che i controlli qui sopra non raggiungono. Il CSS scritto qui si applica a entrambi i widget nella tua pagina prodotto, e l'anteprima mostra cosa fa prima di salvare.


Ogni design ha il proprio CSS personalizzato: quello del design del negozio vale ovunque venga usato il design del negozio, e quello di un design salvato ovunque venga usato quel design. Un nuovo design parte con una copia del CSS del design da cui è stato creato, e un design creato prima che i design avessero il proprio usa quello del design del negozio finché non lo salvi. Passare a un altro layout nella sezione Design lo mantiene. Se avevi scritto CSS nel vecchio editor per singolo design, quel CSS continua ad applicarsi sopra.


Lascialo vuoto a meno che tu non conosca i selettori che cerchi. Il CSS scritto qui non viene controllato, quindi una regola sbagliata può nascondere parte del widget nelle tue pagine prodotto. Se vuoi una modifica che i controlli non coprono, come centrare il widget, chiedici in chat e la scriveremo noi per te.


I widget non accettano HTML personalizzato. Il layout deriva dal design che pubblichi, e tutto ciò che puoi cambiare si trova in questa pagina.


Design per offerta


Ogni offerta usa il design del negozio a meno che tu non le dia un design proprio, così un'offerta può apparire diversa dalle altre: ad esempio un club di ricariche premium nei colori scuri del tuo brand, accanto al tuo Abbonati e risparmia di tutti i giorni.


Dare a un'offerta un design proprio


  1. Vai su Supr Bundles & Subscriptions > Offerte e apri l'offerta.
  2. Nell'anteprima, nella riga Design sotto il selettore del prodotto, fai clic su Nuovo design. L'offerta ottiene un design che porta il suo nome (un'offerta chiamata Coffee Club ottiene Coffee Club Design), che parte come copia del design del negozio, e l'editor del design si apre su di esso in una finestra a schermo intero sopra l'offerta.
  3. L'anteprima della finestra è l'anteprima dell'offerta stessa: lo stesso prodotto e la stessa variante che stavi visualizzando nell'offerta, e le opzioni, le opzioni bundle, gli omaggi e i testi dell'offerta così come sono adesso, modifiche non salvate comprese. Lì puoi passare a un altro prodotto dell'offerta.
  4. Cambia il suo design, layout bundle, colori, forma, spaziatura ed elementi. Entrambe le anteprime seguono ogni modifica mentre la fai. Per rinominarlo, scrivi il nuovo nome in Nome del design in cima alla scheda Design.
  5. Chiudi la finestra e salva l'offerta. Il design viene salvato con l'offerta, quindi nella finestra non c'è un pulsante Salva: Scarta nell'offerta annulla anche il design e le sue modifiche, e nulla viene conservato finché non salvi.


Una volta che l'offerta ha un design proprio, il menu a discesa della riga mostra il suo nome e Modifica design prende il posto di Nuovo design. Modifica design apre di nuovo la stessa finestra, e le sue modifiche vengono salvate con l'offerta allo stesso modo. Il menu a discesa Design sposta l'offerta tra Design del negozio, il suo design proprio e qualsiasi altro design salvato, con salvataggio insieme all'offerta; passare ad altro conserva il design, così puoi sceglierlo di nuovo. Per eliminare il design proprio dell'offerta, fai clic sul cestino accanto a Nome del design nella sua finestra, poi salva l'offerta.


Un'offerta che usava già un design condiviso con altre offerte lo mantiene. La riga indica allora quante altre offerte lo usano, perché una modifica lì cambia anche quelle offerte. Un design condiviso, come qualsiasi design aperto dalla pagina Design, ha il proprio Salva nella barra del titolo della finestra, e quel salvataggio vale per ogni offerta che lo usa.


Nella pagina Design. La parte alta della scheda Design elenca il design del negozio e ogni design salvato. Sceglierne uno nel menu lo apre per la modifica, Nuovo design ne avvia un altro come copia di quello aperto, e le icone della matita (rinomina) e del cestino (elimina) accanto permettono di rinominare o eliminare il design aperto. Ogni offerta può avere un design proprio, e un negozio può conservarne qui fino a 50 in più.


Cosa copre un design. Il design e il layout bundle, i colori, la forma, la spaziatura, gli elementi, il Posizionamento e il CSS personalizzato. Le Etichette e le impostazioni dei componenti aggiuntivi sono condivise da ogni design. Le etichette si modificano nel design del negozio: mentre è aperto un design salvato, la nota sotto le sue impostazioni ha un pulsante Modifica il design del negozio che ti ci porta. Anche la scheda Impostazioni dei componenti aggiuntivi resta nella pagina mentre è aperto un design salvato, contrassegnata come condivisa, e una modifica lì si applica al design del negozio e a ogni design salvato. Le traduzioni seguono il layout del design come per il design del negozio.


Nella pagina prodotto. Il widget di abbonamento di un prodotto usa il design della prima offerta che mostra. Quale offerta viene per prima si imposta in Impostazioni dei componenti aggiuntivi > Ordine delle offerte in questa pagina. Quando le offerte hanno come target varianti diverse dello stesso prodotto, ogni variante usa il design della prima offerta che ha, e il widget cambia design quando il cliente sceglie una variante: una variante Bottiglia di vetro venduta tramite il tuo club premium può apparire come il club, mentre la Lattina accanto mantiene il tuo design di tutti i giorni. Ogni opzione bundle segue il design della propria offerta. Eliminare un design riporta le sue offerte al design del negozio.


Salvare le modifiche


In questa pagina nulla si salva man mano. Cambia quanto vuoi, guarda tutto nell'anteprima, poi usa la barra di salvataggio in cima alla pagina per salvare tutto in una volta, oppure scartalo e ricomincia. Dopo il salvataggio, ricarica una pagina prodotto del tuo negozio per vedere il risultato.


Questa pagina scrive un solo valore su ogni design insieme. Se avevi personalizzato i widget con il vecchio editor per singolo design, il tuo primo salvataggio qui è il momento in cui il tuo negozio passa all'esperienza unificata dei widget: un messaggio I tuoi widget stanno migliorando chiede conferma prima di quel primo salvataggio, e prima facciamo una copia di come apparivano i tuoi widget.


Ripristinare il design precedente


Questa sezione riguarda i negozi che hanno personalizzato i widget con il vecchio editor per singolo design, prima che questa pagina lo sostituisse. Se hai installato Supr Bundles & Subscriptions dopo, non c'è un design precedente a cui tornare e nessuna scheda Ripristina design precedente nella tua pagina.


Prima che il tuo negozio passi all'esperienza unificata dei widget, salviamo una copia di come appaiono i suoi widget. Quella copia non scade, e la scheda indica la data in cui è stata creata.


Da quel momento, una scheda Ripristina design precedente si trova verso il fondo di questa pagina. Usala e i tuoi widget tornano esattamente com'erano subito prima del passaggio. Puoi personalizzarli di nuovo in seguito e ripristinare ancora.


Il ripristino sostituisce tutto ciò che hai cambiato in questa pagina da quando è stata creata quella copia. Non influisce sulle tue offerte, sui prezzi o sugli abbonati.


Cosa è successo all'editor del widget spiega dove sono finiti i controlli del vecchio editor.


La riga Powered by Supr


Alcuni negozi vedono una piccola riga Powered by Supr sotto il widget di abbonamento, o all'interno del suo tooltip informativo. La sua visibilità dipende dal tuo piano: viene rimossa automaticamente nei piani a pagamento, e nella pagina Design non c'è un interruttore per essa. I piani sono elencati nella nostra pagina dei prezzi e in Fatturazione nell'app.


Dopo aver cambiato piano, apri l'app una volta e poi ricarica la pagina prodotto, e la riga sparisce. Se compare ancora, scrivici in chat e la controlleremo per te.


La stessa riga può comparire in fondo alle email degli abbonamenti che inviamo per te, e segue la stessa regola.


Ricevere aiuto con il tuo design


La scheda Vuoi aiuto per adattarlo al tuo brand? in fondo alla pagina ha un pulsante Chatta con un esperto. Il nostro team può aiutarti a scegliere un design, abbinare i colori e i font del tuo tema, regolare la spaziatura su mobile o scrivere CSS personalizzato per una modifica che i controlli non coprono. Dicci come vuoi che appaia il widget, uno screenshot aiuta, e lo imposteremo insieme a te.


Consigli e buone pratiche


  • Imposta prima colore, forma e spaziatura, poi scegli un design. Valgono per ogni design, quindi provare i design non ti costa nulla.
  • Lascia i colori degli elementi su predefinito a meno che tu non abbia un motivo. Meno eccezioni fai, meglio apparirà un nuovo design quando ne proverai uno.
  • Fai l'anteprima con un prodotto reale così vedi i tuoi prezzi e sconti.
  • Se un design mostra un menu a discesa che non vuoi, passare a Classic o Panel è il modo più rapido per eliminarlo.
  • Per opzioni affiancate invece che impilate, usa Panel o Panel+ per gli abbonamenti e il layout bundle Cards.


Domande frequenti


Due offerte del mio negozio possono apparire diverse?
Sì. Crea un design salvato e sceglilo per una delle offerte, vedi Design per offerta.



Come cambio i colori per abbinarli al mio brand?
Scegli il tuo colore in Colori, poi cambia singole parti in Elementi solo dove devono differire. Salva con la barra di salvataggio e ricarica una pagina prodotto.


Un'impostazione che ho cambiato non compare nel mio negozio. Perché?
Verifica di aver salvato, poi ricarica la pagina prodotto. Se ancora non compare, probabilmente il CSS del tuo tema sovrascrive il widget lì. Scrivici in chat con il link del prodotto e lo sistemeremo senza toccare il tuo tema.


Offerte diverse possono usare design diversi?
No. Nel negozio sono attivi un solo design di abbonamento e un solo layout bundle, e ogni offerta li usa. Lo stile degli altri viene conservato, quindi cambiare non costa nulla.


Come nascondo il prezzo, il prezzo barrato o il badge di sconto?
Disattiva Prezzo, Prezzo barrato o Prezzo unitario in Elementi, separatamente per le opzioni di abbonamento e per le opzioni bundle. Il badge di sconto ha una riga propria in Entrambi i widget.


Come metto il widget di abbonamento sopra le opzioni bundle?
Disattiva Elementi > Layout della pagina > Bundle in alto e salva.


Come cambio "Subscribe & Save", "One-time purchase", "Save 15%" o "/each"?
Nella scheda Etichette. L'intestazione sopra le opzioni di abbonamento è Titolo della sezione, che stampa il Nome dell'abbonamento dell'offerta dove c'è scritto {{subscription_name}} (il suo valore iniziale), e l'intestazione del bundle è il Nome del bundle dell'offerta. Vedi Come cambiare o tradurre i testi della lingua principale.


Il menu a discesa della consegna aperto appare diverso su Windows e su Mac. Posso personalizzarlo?
Il menu chiuso si personalizza in Elementi > Menu a discesa della consegna. L'elenco aperto è disegnato dal browser e dal sistema operativo del cliente, quindi non si può cambiare. Scegli Classic o Panel se preferisci non avere un menu a discesa.


Posso aggiungere HTML mio, o copiare un design visto su un altro sito?
I widget non accettano HTML proprio. Scegli qui il design più vicino e personalizzalo, poi usa Chatta con un esperto e il nostro team ti aiuterà ad avvicinarti il più possibile.


Come rimuovo la riga Powered by Supr?
Viene rimossa automaticamente nei piani a pagamento. Vedi La riga Powered by Supr.


Guide correlate


Aggiornato il: 24/10/2026

È stato utile questo articolo?

Condividi il tuo feedback

Annulla

Grazie!