ℹ️ 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 Free Shipping Upsell Bar guarda e si sente attraverso il tuo negozio. Dai colori e spaziatura alla tipografia, alle animazioni, ai pulsanti e alle schede upsell, quasi ogni aspetto visivo può essere personalizzato per abbinare il tuo marchio.

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

• Avviare rapidamente utilizzando modelli 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
• Input del codice Hex

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 una configurazione Free Shipping Upsell esistente
→ O creare una nuova configurazione prima

Allora:

• Per il Sulla base del posizionamento flusso di lavoro

→ Aprire il Design scheda

• Per il Sulla base degli obiettivi flusso di lavoro

→ Aprire la scheda di posizionamento che si desidera personalizzare

ℹ️ Le impostazioni di dimensionamento sono accessibili in modo diverso a seconda del tipo di flusso di lavoro utilizzato.

🎨 Template

• Cosa fa: Consente di applicare istantaneamente uno stile visivo pre-made al tuo Free Shipping Upsell Bar.
• Come usare: Scegli tra i modelli disponibili per avviare rapidamente il tuo design senza personalizzare manualmente ogni impostazione.

👀 Visibilità

• Cosa fa: Controlla dove viene visualizzata la barra di aggiornamento della spedizione gratuita.
• Opzioni:
• • Desktop e Mobile – Visibile su tutti i dispositivi.
  • Solo Desktop
  • Solo mobile

📏 Bar Width

• Cosa fa: Controlla quanto larghezza orizzontale la barra di spedizione gratuita dovrebbe occupare.
• Come usare: Aumentare o diminuire la percentuale di larghezza a seconda di quanto compatto o largo si desidera che la sezione venga visualizzata.

🖼️ Stile di sfondo

• Cosa fa: Cambia l'aspetto di sfondo della Free Shipping Upsell Bar.
• Opzioni disponibili:
• • Colore unico – Applicare un colore di sfondo solido.
  • Gradiente – Mescolare due colori insieme senza intoppi.
  • Modelli – Applicare modelli di sfondo decorativi.

🎨 Colore unico

• Scegli un colore usando Picker di colore o inserire manualmente un Codice Hex.

🌈 Gradiente

• Gradiente angolo grado: Controlla la direzione dell'effetto gradiente.
• Colore Picker 1 & 2: Selezionare i due colori utilizzati nel gradiente.

✨ Modelli

• Abilita il Selezionare il modello opzione dove è possibile scegliere tra una varietà di modelli di sfondo incorporati.

📐 Borders & Corners

• Radius di confine (px): Controlla come arrotondato gli angoli della sezione appaiono.
• Dimensione del bordo (px): Regola lo spessore del bordo.
• Colore di confine: Cambia il colore di bordo utilizzando il picker colore o l'ingresso esagonale.

📏 Spaziatura

Questa sezione ti aiuta a controllare la spaziatura sia all'interno che all'esterno della Free Shipping Upsell Bar.

• Parte superiore / inferiore esterna: Aggiunge spaziando fuori dalla sezione per separarlo dagli elementi circostanti.
• In alto / in basso: Aggiunge spaziatura interna tra il contenuto e i bordi della sezione.

Ecco cosa significa Spacing esterno / lato:

🎆 Aggiungi Animazione Fuochi

• Cosa fa: Aggiunge un sottile effetto di animazione dei fuochi d'artificio quando si ottengono obiettivi.
• Opzioni:
• • Mostra fuochi d'artificio su ogni traguardo raggiunto.
  • Mostra fuochi d'artificio solo sul traguardo finale.

🔤 Tipografia

Questa sezione controlla come tutti gli elementi di testo appaiono durante la Free Shipping Upsell Bar.

📝 Messaggio Styling

• Dimensione del messaggio: Regola la dimensione del testo principale del messaggio.
• Colore del messaggio: Cambia il colore del messaggio mostrato sopra la barra di avanzamento.

🎉 Colore del messaggio

• Cambia il colore del messaggio di successo visualizzato dopo un obiettivo è raggiunto.

🔠 Fonti

• Scegli tra i caratteri disponibili o seleziona Usa il tuo carattere tematico per abbinare automaticamente il tema del tuo negozio.

💪 Font Peso

• Controlla come appare in grassetto o leggero il testo.
• Puoi anche selezionare Inherit per seguire il peso del font esistente del vostro tema.

💰 Prezzo Testo Styling

Personalizza come appare l'importo del prezzo all'interno del messaggio.

• Dimensioni: Controlla la dimensione del carattere del prezzo evidenziato.
• Colore: Cambia il colore del testo del prezzo.

✨ Animazione del testo di prezzo

• Aggiunge effetti di animazione al testo dei prezzi per aiutarlo a distinguersi di più.

📊 Barra di progresso

Questa sezione consente di personalizzare l'aspetto e il comportamento della barra dei progressi.

👁️ Mostra la barra dei progressi

• Attiva o disattiva la visibilità della barra di avanzamento.

🎨 Colore dello sfondo

• Cambia il colore di sfondo della barra di avanzamento non riempita.

🟩 Colore di riempimento

• Controlla il colore della sezione di progresso riempito.

🎯 Segnalatore di obiettivi multipli

Scegliere come vengono visualizzati più obiettivi all'interno della barra di avanzamento.

• Mostra un solo obiettivo alla volta – Reimposta la barra dopo aver raggiunto un obiettivo per concentrarsi sul prossimo.
• Mostra tutti gli obiettivi contemporaneamente – Visualizza tutte le pietre miliari dell'obiettivo insieme all'interno della stessa barra.

Esempio:

📦 Stile bar

• Selezionare da stili visivi disponibili per la barra di avanzamento.

📐 Larghezza

• Controlla la larghezza della barra di avanzamento stesso.

⭕ Radiatore ad angolo

• Regola come arrotondato gli angoli della barra di progresso appaiono.

📏 Altezza

• Controlla lo spessore/altezza della barra di avanzamento.

↕️ Spazio sopra / sotto

• Regola la spaziatura sopra e sotto la barra di avanzamento.

🔘 Button Design

Questa sezione personalizza il pulsante CTA mostrato accanto al messaggio di spedizione gratuita.

Nota: Questa sezione si applica solo quando Pulsante viene selezionato come Tipo di azione nella scheda Goal.

🎨 Colore del pulsante

• Cambia il colore di sfondo del pulsante CTA.

🔤 Taglie di testo del pulsante & colore

• Controlla la dimensione del testo e il colore all'interno del pulsante.

⭕ Radiatore ad angolo

• Regola come arrotondato gli angoli del pulsante appaiono.

📦 Stile pulsante

• Interruttore rapido tra stili come:
• • Piazza
  • Arrotondato
  • Completamente arrotondato

💪 Font Peso

• Controlla lo spessore del testo del pulsante.

✍️ Stile del carattere

• Toggle tra:
• • Normale
  • Italica
  • Sottolineo

✨ Stile di animazione del pulsante

• Aggiunge effetti di animazione continui al pulsante.

🖱️ Effetti Hover pulsante

• Aggiunge effetti interattivi quando gli utenti saltano sopra il pulsante.

🛍️ Design di upsell

Questa sezione personalizza l'aspetto della sezione Upsell.

Nota: Questa sezione si applica solo quando un'opzione Upsell diversa da quella No Upsell è selezionato nella scheda Upsell/Placement.

🔤 Tipografia

🏷️ Titolo successivo

• Titolo Dimensioni: Controlla la dimensione della voce Upsell.
• Colore del titolo: Cambia il colore della voce Upsell.

📦 Titolo del prodotto

• Dimensione del titolo del prodotto: Controlla la dimensione del nome del prodotto.
• Titolo del prodotto Colore: Cambia il colore del titolo del prodotto.

💰 Prezzo Styling

• Dimensione del prezzo: Controlla la dimensione del testo del prezzo del prodotto.
• Colore del prezzo: Cambia il colore del prezzo del prodotto.

➡️ Arrow Styling

• Dimensione della freccia: Controlla la dimensione delle frecce di navigazione.
• Colore freccia: Cambia il colore della freccia.

🔘 Aggiungi al carrello Styling

• Colore del pulsante: Cambia il colore di sfondo del pulsante.
• Pulsante formato testo & colore: Controlla l'aspetto del testo.
• Radius angolo: Regola la rotondità del pulsante.
• Stile pulsante: Selezionare da stili di pulsante disponibili.
• Peso del carattere: Controlla lo spessore del testo.
• Stile del carattere: Toggle tra diversi stili di testo.

💻 Custom CSS (Per sviluppatori)

💡Caratteristica avanzata: Se si desidera aggiungere uno stile completamente unico che non è disponibile nelle impostazioni standard, è possibile incollare il CSS personalizzato direttamente nella casella dell'editor.

• Classi di destinazione previste:
• • Contenitore di Badge Intero: .futureblink-free-shipping
  • Messaggio di progresso: .futureblink-free-shipping .futureblink-message
  • Icon sopra Progress bar: .futureblink-free-shipping .futureblink-icon
  • Pulsante d'azione: .futureblink-free-shipping .futureblink-cta-button
• Fare clic Applicare per testare immediatamente i tuoi stili.

«⚠️ Nota: Se gli stili non vengono applicati dopo aver cliccato Applicare, gentilmente riprovare aggiungendo !important a ogni dichiarazione.

🎯 Impostazioni icone

Aggiungere e personalizzare un'icona visualizzata sopra la barra di avanzamento.

🖼️ Selezionare / rimuovere Icon

• Aprire la libreria Icon integrata per scegliere un'icona.
• Rimuovere l'icona selezionata in qualsiasi momento.

📤 Caricamento Icon

• Carica la tua icona personalizzata per una completa flessibilità.

📏 Dimensione dell'icona & colore

• Regolare la dimensione dell'icona e cambiarne il colore.

🚀 Risultato finale

Una volta configurato con successo, il Design & Styling le impostazioni aiutano i commercianti a creare un'esperienza di shopping più visivamente coinvolgente, professionale e orientata alla conversione.

Con una corretta personalizzazione dello styling in atto:

✅ Il Free Shipping Bar si sente più allineato con il vostro negozio di marca
✅ I messaggi importanti diventano più evidenti e coinvolgenti
✅ Il monitoraggio dei progressi è più pulito e facile da capire
✅ I pulsanti CTA diventano più visivamente attraenti
✅ Le sezioni di vendita si fondono più naturalmente nel negozio
✅ I clienti sperimentano un'interfaccia più lucida e interattiva
✅ I commercianti ottengono un migliore controllo sull'aspetto generale e sull'esperienza dell'utente

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