Riuscito
Button
Crea un pulsante flessibile per le call to action con opzioni personalizzabili per stile, icona, link e visualizzazione su dispositivi mobili.
Usa questo blocco per aggiungere una call to action chiara all’interno di una sezione o di un blocco. Puoi mantenerla semplice, con testo e un link, oppure renderla più visiva con un’icona, stili alternativi e opzioni di visualizzazione specifiche per i dispositivi mobili.
Impostazioni principali
Sezione intitolata “Impostazioni principali”Inizia dal testo e dal link del pulsante, quindi regola lo stile visivo in base all’importanza che vuoi dare all’azione. Gli stili più evidenti funzionano meglio per le azioni principali, mentre gli stili semplici o secondari sono adatti ai link di supporto e alle azioni meno importanti.
Puoi aggiungere un’emoji o il nome di un’icona supportata per fornire al pulsante un rapido elemento visivo. Nella maggior parte dei casi, l’icona dovrebbe supportare l’etichetta anziché sostituirla.
I controlli del layout determinano la posizione dell’icona o se il pulsante deve mostrare solo l’icona. I pulsanti con la sola icona funzionano meglio quando il significato è evidente dal contenuto circostante o quando il simbolo è ampiamente riconosciuto.
Se usi un layout con la sola icona, assicurati che l’azione sia comunque facile da comprendere a colpo d’occhio. Le etichette testuali sono generalmente più chiare e accessibili.
Usa le varianti di dimensione più piccole o più grandi quando il pulsante predefinito appare sproporzionato rispetto al contenuto circostante. Gli stili grandi possono aiutare a mettere in risalto una promozione in evidenza, mentre gli stili piccoli si adattano meglio ai layout compatti.
L’opzione a larghezza completa sui dispositivi mobili rende il pulsante più facile da toccare sugli schermi più piccoli. È particolarmente utile nei layout impilati o nelle aree promozionali, dove un pulsante in linea stretto potrebbe passare inosservato.
Se il pulsante rimanda a una destinazione esterna, aprire il link in una nuova scheda può aiutare i clienti a non perdere la posizione. Per le destinazioni interne, l’apertura nella stessa scheda è generalmente più naturale.
Impostazioni standard dei blocchi
Sezione intitolata “Impostazioni standard dei blocchi”Impostazioni di visibilità
Sezione intitolata “Impostazioni di visibilità”Le impostazioni di visibilità ti consentono di mostrare o nascondere questo blocco su desktop o dispositivi mobili. Sono utili quando vuoi applicare trattamenti diversi al pulsante in base alle dimensioni dello schermo o devi semplificare un layout mobile sovraccarico. Per il comportamento correlato dell’editor del tema, consulta la documentazione Shopify sulla personalizzazione delle sezioni
Consulta le impostazioni di visibilità per il comportamento condiviso di questi controlli.
Note sull’uso
Sezione intitolata “Note sull’uso”- Usa un testo d’azione chiaro. Scegli etichette che dicano ai clienti esattamente cosa succederà dopo, come Acquista ora, Scopri di più o Prenota un appuntamento.
- Abbina l’importanza alla priorità. Riserva gli stili più evidenti o più grandi all’azione principale e usa stili più discreti per i link secondari.
- Mantieni le icone di supporto. Aggiungi icone per rafforzare il significato, ma evita di affidarti solo a esse, a meno che il contesto renda l’azione inequivocabile.
- Ottimizza per i tocchi sui dispositivi mobili. Attiva la visualizzazione a larghezza completa quando il pulsante deve avere maggiore presenza o essere più facile da toccare sugli schermi piccoli.
- Verifica gli stili di fallback. Lascia non impostati i colori e le sostituzioni visive quando vuoi che il pulsante erediti lo stile di fallback dell’area circostante; aggiungi uno stile esplicito solo quando il pulsante deve distinguersi dal contenitore.
- Controlla gli stati nascosti. Se nascondi il blocco su desktop o dispositivi mobili, assicurati che la stessa azione sia comunque disponibile in un altro punto su quel dispositivo.