Progettare il tuo widget

Il designer di widget personalizzati ti permette di scrivere tu stesso l'HTML e il CSS del widget di abbonamento, delle opzioni bundle e del riquadro che le contiene, così il widget si presenta esattamente come il resto della pagina prodotto. È in versione beta: scrivici in chat per attivarlo nel tuo negozio.

Aprire il designer

1. Vai su Supr Bundles & Subscriptions > Design.
2. Fai clic sul design Custom (Liquid). La prima volta si apre il designer, così puoi creare il tuo design.

Fai clic su Salva per conservare le modifiche. Ogni modifica salvata viene conservata in Versioni, quindi puoi sempre tornare indietro.

Usare il design nel negozio

Una volta salvato il design, puoi scegliere Custom (Liquid) nella pagina Design come qualsiasi altro design, per il widget di abbonamento, per il widget bundle o per entrambi. Selezionalo e salva la pagina Design. Da quel momento, ogni salvataggio nel designer è subito attivo sui widget che lo usano.

Le tre schede

• Widget di abbonamento: le opzioni di abbonamento e la riga dell'acquisto singolo.
• Opzioni bundle: la barra del bundle e ciascuna delle sue opzioni, inclusi box componibili, bundle fissi, componenti aggiuntivi e omaggi.
• Layout: tutto ciò che mostra il blocco dell'app, in un unico riquadro: il titolo dell'offerta, il widget di abbonamento, le opzioni bundle e un pulsante di aggiunta al carrello e una quantità tuoi.

La scheda Layout ha un solo interruttore, Usa questo layout: quando è attivo, il tuo layout posiziona il titolo dell'offerta, entrambi i widget e il tuo pulsante di aggiunta al carrello in ogni pagina prodotto. Le altre due schede seguono la pagina Design, come descritto sopra.

Ogni scheda ha un elenco Parti da un modello. Un modello sostituisce solo il markup e il foglio di stile di quella scheda, quindi puoi partire da un modello per le opzioni bundle e da un altro per il widget di abbonamento.

Importare un design dal nostro team di assistenza

Quando il nostro team crea un design per te, te lo invia come un unico blocco di testo.

1. Apri il designer e fai clic su Importa design.
2. Incolla l'intero blocco e fai clic su Importa. Sostituisce tutti i modelli, i fogli di stile e le etichette delle tre schede.
3. Controlla l'anteprima, poi fai clic su Salva.
4. Se il tuo negozio non usa ancora il design, scegli Custom (Liquid) per il widget nella pagina Design.

Un design può anche portare il colore del brand, gli arrotondamenti e le spaziature dalla pagina Design. Il designer li elenca in un banner prima del salvataggio, e salvando vengono conservati con il design. Cambiano lo stile anche degli altri widget; fai clic su Mantieni la pagina Design com'è per salvare il design senza di essi.

Come funziona un modello

Un modello è normale HTML con stringhe Liquid tra doppie parentesi graffe, come {{ selling_plan.name }} o {{ tier.price | money }}. Digita {{ nell'editor per vedere tutte le stringhe accettate dalla parte che stai modificando, con ciò che stampano; anche la sezione Riferimento le elenca. Qualsiasi altra cosa tra doppie parentesi graffe, e qualsiasi tag Liquid diverso da un commento, viene rifiutata indicando la riga in cui si trova.

Non ci sono condizioni. Per nascondere qualcosa che non ha valore, usa il CSS: un prezzo o un badge vuoto non stampa nulla, quindi :empty ne nasconde l'elemento. L'opzione di abbonamento scelta ha un radio selezionato (.sss-liquid-row:has(> input:checked)) e l'opzione bundle scelta ha la classe .sss-bundle-block__tier--selected.

L'app mantiene le parti necessarie al funzionamento del negozio: i radio, i selettori di variante, i controlli della quantità e i dati che il negozio online legge per mantenere aggiornati i prezzi e aggiungere al carrello gli articoli giusti. Il tuo markup va intorno e dentro di essi.

Widget di abbonamento

• Contenitore: tutto ciò che sta intorno alle opzioni, come un titolo o una riga di garanzie. Posiziona le opzioni con {{ sss.options }}. Puoi anche posizionare {{ sss.one_time }}, {{ sss.add_to_cart }} e {{ sss.quantity }}.
• Gruppo dell'offerta: disegnato una volta per ogni offerta. Mostra le sue opzioni come righe con {{ sss.group.options }}, oppure trasforma l'intera offerta in una scheda con un menu a tendina ({{ sss.plan_picker }}) o con dei pulsanti ({{ sss.plan_picker_pills }}).
• Opzione di abbonamento e Acquisto singolo: una riga ciascuno.
• Riga di vantaggio, Omaggio e Premio fedeltà: l'aspetto di un singolo vantaggio, omaggio o premio, posizionato in un'opzione con {{ sss.benefits }}, {{ sss.gifts }} e {{ sss.rewards }}.

I prezzi includono il risparmio, il prezzo al giorno, per porzione e per unità, il prezzo dopo i primi ordini e la riga di addebito. Per mostrare un prezzo per porzione, aggiungi il campo Porzioni in Campi prodotto e compilalo su ogni variante.

Opzioni bundle

• Barra del bundle: tutto ciò che sta intorno alle opzioni. Posizionale con {{ sss.tiers }}.
• Opzione bundle: una singola opzione, per esempio una confezione. Può mostrare il titolo dell'opzione, il badge, il prezzo, il prezzo pieno, il prezzo per unità e il risparmio. Posiziona dove vuoi il builder, i prodotti di un bundle fisso, i componenti aggiuntivi, gli omaggi e i selettori di variante con {{ sss.tier.builder }}, {{ sss.tier.products }}, {{ sss.tier.addons }}, {{ sss.tier.gifts }} e {{ sss.tier.variant_pickers }}. Tutto ciò che ometti segue il tuo markup.
• Prodotto bundle: l'aspetto di un singolo prodotto in un bundle fisso, in un'opzione box componibile e nei componenti aggiuntivi: immagine, titolo, prezzo, fornitore e adesivo.

Per mostrare un adesivo come "Più venduto" su un prodotto, aggiungi il campo Adesivo bundle in Campi prodotto, poi compilalo sul prodotto. Traducilo con Translate & Adapt di Shopify. Gli adesivi compaiono per i primi 20 prodotti bundle di una pagina.

Attiva Mostra un builder un gruppo alla volta per mostrare i gruppi di un'opzione box componibile come schede, con un solo gruppo aperto alla volta. Ogni scheda mostra il nome e il sottotitolo del gruppo, che imposti sul gruppo in Offerte.

Etichette e traduzioni

I tuoi testi vanno in Etichette, e ne stampi uno con {{ sss.labels.name }}. Un'etichetta usata dentro un'opzione di abbonamento può includere i valori di quell'opzione, come Billed {price} {billing_frequency}, così l'intera frase resta un'unica etichetta in ogni lingua. Traduci le tue etichette in Impostazioni > Traduzioni > Widget.

Le etichette di un modello partono nella lingua del tuo negozio. Quando salvi, ogni etichetta che non hai riformulato viene tradotta anche nelle altre lingue del negozio, a meno che tu non l'abbia già tradotta. Le etichette che scrivi tu sono tue da tradurre.

Fogli di stile

Ogni scheda ha il proprio foglio di stile. Al salvataggio, ogni regola viene limitata alla parte a cui si applica, quindi il tuo CSS non può modificare il resto del tema. Il foglio di stile non può caricare script né agire al di fuori del widget.

Anteprima

L'anteprima accanto all'editor disegna il tuo design come lo mostrerà il negozio online. Scegli uno dei prodotti di esempio, oppure fai clic su Visualizza in anteprima un prodotto del tuo negozio per vederlo su uno dei tuoi. I caratteri e gli stili del tuo tema compaiono solo nel negozio. L'anteprima non esegue il tuo JavaScript.

JavaScript

La casella JavaScript in fondo al designer contiene uno script per il tuo design. Viene eseguito una volta in ogni pagina in cui il tuo design disegna il widget di abbonamento o le opzioni bundle, dopo che sono stati disegnati. Una pagina può mostrare più di un widget, quindi trovali tutti con document.querySelectorAll.

Cosa non fa il designer

• Un modello non può usare i nomi di classe o gli attributi data dell'app (come purchase-option-* o data-tier-total); quando li rifiuta, l'editor ti dice quale.
• Diamo assistenza sul designer in sé. La creazione e la manutenzione del markup e del CSS del tuo design spettano a te o al tuo sviluppatore.

Aggiornato il: 24/10/2026