ℹ️ Note: Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto.

La scheda Design ti dà il pieno controllo su come il tuo Hoppy Bundles offre look e sensazione sul tuo negozio. Dai font e dai colori ai bordi, ai pulsanti, ai punti salienti e alle schede di prodotto — quasi ogni aspetto visivo dei widget di offerta può essere personalizzato per abbinare il tuo marchio.

Abbiamo fornito una vasta gamma di impostazioni in modo da poter o:

• Avviare rapidamente utilizzando modelli e temi pronti
• O profondamente personalizzare ogni dettaglio per abbinare perfettamente il tuo negozio

La maggior parte delle impostazioni relative al colore includono:

• Un raccoglitore di colore (clicca il colore per aprirlo)
• A Hex Code Input (disegna direttamente il tuo colore esatto del marchio)

Questo rende più facile se si preferisce la selezione visiva o colori di marca precisi.

⚠️ Prima di iniziare

Per configurare le impostazioni di progettazione:

→ Aprire un'offerta esistente → O creare una nuova offerta prima

Allora apri il Design scheda all'interno dell'editor di offerta.

La scheda Design è disponibile per tutti i tipi di offerta Hoppy Bundles:

• Offerta Bundle
• Quantità di rottura (Sconto del volume)
• Costruire il proprio Bundle (BYOB)
• Aggiunti di prodotto
• Su richiesta
• Categoria Quantità Break

ℹ️ La scheda Design sembra leggermente diversa a seconda del tipo di offerta — questa guida copre ogni sezione e indica le differenze come andiamo.

👀 Capire la scheda di progettazione

📍 Dove vive

Apri qualsiasi offerta e vedrai le schede nella parte superiore dell'editor — per la maggior parte dei tipi di offerta questi sono Generale♪ Designe Targeting & Placement. Clic Design per aprire le impostazioni di stile.

• Per DONNA offerte, le schede sono Generale♪ Selezione prodotti Logice Design.

🖥️ Anteprima dal vivo

Ogni editor di offerta include un pannello di anteprima live accanto alle impostazioni, mostrando sia un Anteprima Desktop e Anteprima mobile. Come si modifica qualsiasi impostazione di progettazione — un colore, un carattere, un bordo — l'anteprima aggiorna istantaneamente, quindi si sa sempre esattamente come il widget guarderà prima di salvare.

ℹ️ L'anteprima mostra i cambiamenti di stile con i prodotti del campione. Controllare sempre il look finale sul tuo live storefront dopo aver pubblicato.

🎨 Modelli e temi (Quantity Break)

Quantità Break offerte sono dotate di stili visivi pronti in modo da non dover progettare da zero.

🖼️ Modelli di offerta

• Cosa fa: Quando si crea una nuova offerta Quantità Break, si inizia selezionando un modello di offerta ready-made sotto Seleziona la tua offerta preferitaOgni modello viene fornito con il proprio design pre-stile (colori, dimensioni e stili) che è possibile personalizzare completamente in seguito.
• Modelli disponibili:
• • Bundle & Salva – applica una nuova verde verde tema di colore.
  • Offerta di tempo limitato – applica un caldo arancione tema di colore.
  • Flash Sale Madness! – applica un audace rosa rosa tema di colore.
  • Evviva! E' BOGO! – applica un vibrante viola tema di colore.
• Come usare: Selezionare un modello e fare clic Applicare il modello selezionato. Il disegno del modello carica nell'editor, e si può modificare tutto da lì.

📐 Telaio modello

• Cosa fa: Controlla come i livelli di quantità sono disposti all'interno del widget.
• Opzioni:
• • Verticale – i livelli sono impilati tra loro.
  • Orizzonte – i livelli siedono fianco a fianco.

🎨 Scegli un tema

• Cosa fa: Consente di scambiare l'intero tema del colore del widget in un clic.
• Opzioni: Blu♪ _Rosso_o Verde.
• Nota: Questa opzione appare solo quando Verticale il layout del modello è selezionato.

⚠️ Scegliere un tema sostituisce Tutto delle impostazioni di progettazione attuali (colori, dimensioni, stili) con i valori predefiniti del tema. Se hai personalizzato le impostazioni individuali, applica il tuo tema prima e fine sintonizzazione dopo.

🔤 Tipografia e colore

Questa è la scheda di progettazione principale, disponibile nella scheda Design di ogni tipo di offerta. È pieghevole — fare clic sulla freccia nell'angolo in alto a destra per espanderlo o collassarlo.

🔠 Fonti

• Cosa fa: Imposta la famiglia di caratteri utilizzata in tutto il widget di offerta.
• Come usare: Scegli da 60+ caratteri integrati — compresi i classici come Helvetica, Arial, Georgia e Impact, più popolari Google Fonts come Roboto, Montserrat, Poppins, Inter, Lato, Open Sans, Playfair Display, e molti altri.
• Predefinito: Seleziona Usa il tuo carattere tematico per ereditare automaticamente il carattere del tuo tema negozio — il modo più semplice per rendere il widget si fondono con il tuo negozio.

ℹ️ Google Fonts sono caricati automaticamente sul negozio quando selezionato — nessuna configurazione manuale necessaria.

📝 Text Element Styling (Size / Style / Color)

Sotto il raccoglitore di caratteri, ogni elemento di testo del widget ottiene il proprio blocco di styling. Ogni blocco ha tre impostazioni:

• Dimensioni (px): Controlla la dimensione del carattere di quell'elemento.
• Stile: Controlla il peso e l'enfasi del testo. Opzioni:
• • Luce
  • Regolare
  • Italica
  • Media
  • Medio Italico
  • SemiBold
  • Bullone
  • Bold Italic
• Colore: Modifica il colore del testo utilizzando il picker colore o l'ingresso esagonale.

⚠️ La dimensione non può essere maggiore di 20px — se si immette un valore più grande, si vedrà un errore di validazione.

Gli elementi disponibili dipendono dal tipo di offerta:

📦 Bundle Offerta & Prodotti Addons:

• Titolo Bundle – la voce principale del widget del pacchetto.
• Nome del prodotto – i titoli del prodotto all'interno del fascio.
• Prezzo del prodotto – il prezzo indicato per ogni prodotto.
• Tag in evidenza – il testo del badge (ad esempio "Combo") mostrato sui prodotti evidenziati.
• Piede – il testo del piè di pagina nella parte inferiore del widget.
• Prezzo totale – il prezzo combinato del pacchetto.
• Pulsante – il testo del pulsante "Aggiungi al carrello".

🏷️ Quantità Break:

• Titolo del blocco – la principale voce sopra i livelli.
• Titolo dell'offerta – il titolo di ogni tier (ad esempio "2 Pair").
• Etichetta di sconto – il testo di sconto su ogni livello (ad esempio "Buy 2 Get 1").
• Prezzo – il prezzo scontato.
• Confronta il prezzo – il prezzo originale.
• Tag: – il testo del badge su un livello (ad esempio "Most Popular").
• Sottotitoli – il testo sottotitolo su un livello.
• Etichetta regalo / prezzo regalo / regalo Tag colore – il testo utilizzato per articoli regalo gratuiti (quando un regalo gratuito è configurato).
• Piede – il testo del piè di pagina sotto i livelli.
• Tag in evidenza – il testo del badge evidenziato.
• Pulsante – il testo del pulsante.
• Prezzo totale – il display del prezzo totale.

🧺 Costruire il proprio Bundle (BYOB):

• Titolo del blocco – la pagina del pacchetto intestazione.
• Descrizione – il testo di descrizione sotto la voce.
• Titolo dell'offerta – i nomi dei prodotti nel pacchetto.
• Prezzo – i prezzi del prodotto.
• Sticky Bar Testo – il messaggio di progresso nella barra appiccicosa (ad esempio "Need almeno 3 from this group").
• Pulsante – il testo principale del pulsante "Aggiungi Bundle a Cart".
• Pulsante di prodotto – il pulsante "Aggiungi" su ogni scheda prodotto.
• Prezzo totale – il pacchetto di corsa totale.

🛍️ Scorrevole:

• Titolo del blocco – l'intestazione del cursore (ad esempio "Frequently comprato insieme").
• Titolo del prodotto – i nomi dei prodotti nel cursore.
• Prezzo – i prezzi del prodotto.
• Pulsante – il testo del pulsante "Aggiungi al carrello".

🗂️ Categoria Quantità Break:

• Stessi elementi di testo come Quantità Break (Block Title, Offer Title, Discount Label, Price, Tag, Subtitle, Footer, Button, Total Price), senza il regalo e confrontare le opzioni di styling.

🌈 Colori Widget (Quantity Break & Categoria Quantità Break)

Questa sezione controlla lo sfondo e evidenzia i colori delle barre. Ogni opzione è un singolo raccoglitore di colore con un ingresso esagonale.

• Colore di confine: Il colore di confine del livello attualmente selezionato — fa emergere la scelta attiva.
• Colore dello sfondo: Il colore di sfondo del livello selezionato.
• Bar non selezionato: Il colore di sfondo di tutti i livelli non selezionati.
• Colore di sfondo dell'etichetta: Lo sfondo dietro l'etichetta di sconto su ogni livello.
• Tag colore di sfondo: Lo sfondo del badge (ad esempio "Most Popular").
• Colore sfondo regalo: Lo sfondo delle righe regalo gratuite (solo Quarntity Break).
• Regalo Tag sfondo colore: Lo sfondo del tag regalo gratuito (solo Quartity Break).

💡 Mancia: Utilizzare un sottile contrasto tra gli sfondi della barra selezionati e non selezionati — aiuta gli acquirenti immediatamente a vedere quale livello hanno scelto.

📏 Variante (Quantity Break)

• Cosa fa: Controlla la dimensione del selettore variante mostrato su ogni livello quando il prodotto ha varianti.
• Opzioni: Piccolo♪ _Media_o Grande — basta fare clic su un badge per selezionarlo.

📐 Border

Disponibile nella scheda Design di ogni tipo di offerta.

• Larghezza di confine (0-10px): Regola lo spessore del bordo intorno al widget (e barre di livello per Quantità Break). Impostare a 0 per un look senza bordi, piatto.
• Radius di confine (0–50px): Controlla come arrotondato gli angoli appaiono. I valori inferiori danno un aspetto tagliente e moderno; i valori superiori danno un aspetto morbido e arrotondato.

🖌️ Sfondo e colori di confine (Cards, Footer, Tags & pulsanti)

Disponibile per Offerta Bundle♪ Aggiunti di prodotto♪ Su richiestae DONNA. Questi blocchi consentono di impostare entrambi Colore di confine e Colore dello sfondo per blocchi visivi chiave del widget.

📦 Bundle Offerta & Prodotti Addons:

• Prodotto – le schede di prodotto all'interno del fascio.
• Piede – l'area del piè di pagina nella parte inferiore del widget.
• Tag in evidenza – il distintivo evidenziato.
• Pulsante – il pulsante "Aggiungi al carrello".

🛍️ Scorrevole:

• Prodotto – le schede del prodotto nel cursore.
• Pulsante – il pulsante "Aggiungi al carrello".

🧺 BYOB:

• Pulsante – il pulsante principale "Aggiungi Bundle a Cart".
• Pulsante di prodotto – il pulsante "Aggiungi" su ogni scheda prodotto.

💡 Mancia: Per i pulsanti, impostare il colore di sfondo al colore principale del tuo marchio e abbinare il colore di confine ad esso per un pulsante pulito e solido.

⚙️ Aspetto Toggles (Quantity Break – Scheda Generale)

Alcune opzioni visive per Quantità Break dal vivo Generale scheda sotto Impostazioni → Aspetto e aspetto piuttosto che la scheda Design:

• Mostra il prezzo unitario: Visualizza il prezzo per-unit all'interno di ogni livello, così i clienti possono vedere esattamente ciò che ogni elemento costa.
• Mostra prezzo totale: Visualizza il prezzo totale per ogni livello.
• Nascondi le linee di intestazione e piè di pagina: Rimuove le linee divisorie in alto e in basso del widget per un look più pulito e minimale.

ℹ️ BYOB offre anche un Template opzione nella scheda Generale (Shelf Pick o Selezionare) che cambia il layout generale della pagina del pacchetto.

📌 Note importanti

• ⚠️ I temi sovrascrivono lo stile personalizzato. L'applicazione di un modello o temi di commutazione (Quantity Break) ripristina le impostazioni di progettazione alle preset del tema. Applicare sempre i temi prima, quindi personalizzare.
• ⚠️ Limite di dimensione del testo. I singoli elementi di testo non possono superare i 20px — i valori più grandi attivano un errore di validazione.
• ℹ️ Font applica widget-wide. L'impostazione del carattere colpisce tutto il testo nel widget; utilizzare l'impostazione per-element Style (Bold, Italic, ecc.) per sottolineare elementi specifici.
• ℹ️ Il carattere tematico è la scelta più sicura. "Utilizza il tuo carattere a tema" garantisce che il widget corrisponda alla tua tipologia storefront con lo sforzo zero.
• ℹ️ Le impostazioni di progettazione sono per-offrire. Ogni offerta ha il suo design indipendente — lo stile una offerta non colpisce mai le altre offerte.
• ℹ️ Anteprima vs. negozio. L'anteprima live utilizza i dati del campione. Dopo aver salvato e pubblicato, controllare l'offerta su una pagina di prodotto reale per confermare spaziatura e font guardare direttamente all'interno del vostro tema.

💡 Esempi e casi di utilizzo

• Abbina il tuo marchio esattamente: Inserisci i codici esagonali del tuo marchio nei colori Button, Block Title e Highlight, quindi imposta il carattere alla corrispondenza più vicina al tuo carattere tematico.
• Fare il miglior pop tier (Quantity Break): Dai al tuo livello "Più Popolari" uno stile Tag audace, un colore di sfondo Tag contrastante, e un forte colore di confine in modo che gli occhi degli acquirenti vadano dritti ad esso.
• Look minimal pulito: Impostare la larghezza di confine a 0, nascondere le linee di intestazione / piè di pagina, e utilizzare "Usa il tuo carattere tema" per un widget che sembra nativo del tuo tema.
• Pulsanti ad alto contrasto: Sfondo pulsante scuro + testo pulsante bianco + corrispondente colore di confine = un pulsante che viene cliccato.
• Vibrazione morbida e amichevole: Bump Border Radius up (20–50px) e scegliere un colore di sfondo pastello per il livello selezionato.

🚀 Risultato finale

Una volta configurato con successo, il Design & Styling impostazioni aiutano a creare offerte che sembrano una parte naturale del tuo negozio — non un widget bullonato.

Con uno stile adeguato al posto:

✅ Offrire widget si sentono pienamente allineati con il vostro negozio branding ✅ Tiers di sconto e risparmi di bundle diventano più facili da scansionare e capire ✅ I pulsanti di livello superiore e CTA si distinguono visivamente ✅ Regali gratuiti e tag evidenziati attirano l'attenzione shopper ✅ Offre look lucido e coerente sia sul desktop che sul mobile ✅ I clienti godono di un'esperienza di shopping più fluida e affidabile

Utilizzando queste opzioni di progettazione e stile in modo efficace può migliorare notevolmente l'impegno del cliente, la presentazione del negozio, e il potenziale di conversione generale ✨

Aggiornato il: 10/09/2026