> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://supr-bundles-and-subscriptions.crisp.help/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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.