ℹ️ 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.

The Trust Badges & Icons sezione aiuta i commercianti migliorare visivamente la loro credibilità negozio utilizzando indicatori di fiducia personalizzabili come icone di pagamento sicuro, badge di garanzia, punti di consegna e altro ancora.

Questa sezione consente il pieno controllo su:

• Badge aspetto
• Comportamento del layout
• Tipografia
• Animazione
• Stile di sfondo
• Reattività mobile
• Personalizzazione CSS avanzata

🎨 Template

Che cosa fa

Cambia il tema visivo generale e la tavolozza dei colori dei tuoi badge.

Come usare

Fare clic sul menu a discesa per scegliere tra preset come:

• Venerdì nero
• Minimal
• Mint
• Dusk

Questi modelli immediatamente aiutano a abbinare il vostro negozio branding e stile visivo.

👀 Visibilità

Che cosa fa

Controlli quali dispositivi possono vedere i badge di fiducia.

Opzioni disponibili

• Desktop e Mobile → Mostra distintivi ovunque
• Solo Desktop → Nascosto su dispositivi mobili
• Solo mobile → Nascosto su dispositivi desktop

Questo aiuta i commercianti a creare esperienze specifiche del dispositivo.

↔ Orientamento del layout (Desktop & Mobile)

Che cosa fa

Determina come i distintivi individuali sono disposti.

Opzioni disponibili

Orizzonte

I cattivi appaiono fianco a fianco in una sola riga.

Verticale

Badges impilano uno sotto l'altro in un layout della colonna.

I controlli separati possono essere disponibili per layout Desktop e Mobile.

📱 Badge Display Behavior (solo mobili)

Che cosa fa

Controlla come i badge si comportano su schermi mobili più piccoli quando lo spazio diventa limitato.

Opzioni disponibili

Scorrevole

I clienti possono scorrere orizzontalmente per visualizzare tutti i badge in una riga.

Merda.

I Badges si spostano automaticamente alla linea successiva, quindi tutti sono visibili insieme.

✨ Animazione

Che cosa fa

Aggiunge animazioni di ingresso quando i badge caricano sulla pagina.

Come usare

Selezionare uno stile di animazione dal menu a tendina.

Le opzioni di animazione includono:

• Scivolo in
• Papà!
• Condividi su Google
• E più

Le animazioni aiutano ad attirare l'attenzione del cliente senza richiedere ulteriori lavori di progettazione.

🖼️ Stile di sfondo

Che cosa fa

Controlla l'aspetto di sfondo dietro la sezione badge.

Opzioni disponibili

• Colore unico
• Gradiente
• Gradiente tricolore
• Modelli

Personalizzazione aggiuntiva

I commercianti possono anche personalizzare:

• Grado di angolo gradiente
• Colori individuali
• Codici di colore Hex
• aspetto del modello

Questo aiuta i distintivi visivamente si fondono nel design del negozio.

📐 Borders & Corners

Radius d'angolo (px)

Controlla come arrotondato gli angoli esterni appaiono.

• Valori più elevati → Angolo più arrotondato
• 0 → Angoli quadrati affilati

Dimensione del bordo (px)

Regola lo spessore del bordo esterno.

Colore di confine

Cambia il colore della linea di confine.

Stile di confine

Gli stili disponibili possono includere:

• Solido
• Dotted
• Dare
• Nessuno

📏 Spacing (Desktop vs Mobile)

Lo spazio può essere personalizzato separatamente per dispositivi desktop e mobili.

Questo assicura che il layout del badge rimanga equilibrato e reattivo in tutte le dimensioni dello schermo.

Ricambio interno (Padding)

Controlli che spaziano all'interno del contenitore del distintivo.

Indicazioni disponibili:

• Top
• Fondo
• Sinistra
• Giusto.

Questo crea spazio di respirazione tra contenuti e confini.

Spaziatura esterna (Margin)

Aggiunge spaziatura fuori dal blocco del distintivo.

Controlli disponibili:

• Margine superiore
• Margine inferiore

Utile per separare i distintivi dalle sezioni del negozio circostante.

Icon Spaziale

Controlla la distanza tra distintivi / icone individuali.

🔷 Icon Styling

Badge/Icona

Che cosa fa

Aggiunge sfondi decorativi dietro le singole icone.

Opzioni disponibili

• Nessuno
• Schermo
• Emblema
• Circolo
• Piazza

📏 Dimensioni e personalizzazione

Desktop / Mobile Size (px)

Controlla la dimensione dell'icona indipendentemente per:

• Desktop
• Mobile

Colore dello sfondo

Cambia il colore di sfondo dietro la forma dell'icona.

Radiatore ad angolo

Regola come arrotondato lo sfondo dell'icona diventa.

🚀 Pro Styling (Avanzato)

Animazione Icona

Aggiunge effetti di movimento continui alle icone.

Esempi possono includere:

• Shake
• Pulsante
• Bounce

Icon Hover Animation

Attiva le animazioni quando i clienti superano le icone.

Esempi possono includere:

• Float
• Wobble
• Olografica

Icon Shadow

Aggiunge la profondità e gli effetti di stratificazione utilizzando ombre.

Esempi possono includere:

• Morbido Glow
• Subtle Drop Shadow

➖ Separatore di icone

Che cosa fa

Aggiunge le linee divisorie tra le singole icone del badge.

Come usare

Abilitare il Aggiungere separatore icona casella di controllo.

Questo aiuta a creare spaziatura più pulita e separazione visiva.

✍️ Tipografia (Text & Fonts)

Selezione caratteri

Che cosa fa

Controlla lo stile tipografico utilizzato per i titoli e le sottovoci del badge.

Opzioni disponibili

• Usa il tuo Shopify tema font
• Scegli font personalizzati
• Supporto di Google Fonts

Utilizzando il carattere tema aiuta a mantenere la coerenza storefront.

📝 Titolo & Subheading Styling

Dimensioni (px)

Controlla la dimensione del testo.

Colore

Modifica il colore del testo utilizzando:

• Picker di colore
• Codice Hex

📐 Risparmio di testo

Che cosa fa

Controlli che spaziano tra linee di testo per una migliore leggibilità.

Aumentare la spaziatura può rendere il contenuto più pulito e più premium.

💻 Custom CSS (Per sviluppatori)

Caratteristica avanzata

Se le impostazioni integrate non sono sufficienti, i commercianti possono aggiungere uno stile CSS completamente personalizzato.

Classi di destinazione disponibili

Contenitore di Badge

.futureblink-trust-badge

Titolo

.fb-title

Testo di sottofondo

.subheadings

Pulsante CTA

.cta-button

⚡ Applicare CSS personalizzato

Come usare

1. Incolla il tuo CSS personalizzato nell'editor
2. Fare clic Applicare
3. L'anteprima cambia istantaneamente

❗ Sovrapposizione Shopify Stile tematici

A volte Shopify temi possono ignorare il tuo stile personalizzato.

Se le modifiche CSS non appaiono correttamente, utilizzare:

!

Questo costringe il vostro stile a prendere la priorità sugli stili di tema.

Esempio:

.fb-title {
colore: rosso!importante;

✅ Risultato finale

Una volta configurato con successo, Trust Badges & Icons contribuisce a creare un'esperienza di storagefront più professionale, affidabile e orientata alla conversione.

Con uno stile adeguato al posto:

• ✅ La credibilità del negozio migliora
• ✅ Importanti garanzie diventano più visibili
• ✅ La fiducia dei clienti aumenta
• ✅ negozio branding si sente più lucido
• ✅ La reattività mobile migliora
• ✅ I layout Badge diventano più puliti e più organizzati
• ✅ La consistenza visiva attraverso il negozio diventa più forte

I distintivi di fiducia ben progettati possono significatival

Aggiornato il: 10/09/2026